How to add a code block in Gutenberg in WordPress

• Step 1: Accessing the Gutenberg Editor
• Step 2: Adding a Code Block
• Step 3: Formatting the Code Block
• Step 4: Choosing a Language (With Plugins)
• Step 5: Preview and Adjust
• Best Practices for Displaying Code

The introduction of the Gutenberg editor in WordPress marked a significant shift in content creation, offering a more intuitive, block-based approach to crafting posts and pages. For developers, tech bloggers, or anyone needing to display code within their content, Gutenberg's 'Code' block is a key feature. Let's explore how to create and use formatted code blocks in Gutenberg, ensuring your code is both readable and visually appealing.

¶Step 1: Accessing the Gutenberg Editor

To get started, create a new post or page, or edit an existing one in WordPress. Gutenberg is the default editor, so you should be greeted by its block-centric interface.

¶Step 2: Adding a Code Block

1. Insert the Code Block: Click on the '+' (Add Block) button at the top left of the editor or in the body of the editor. Search for 'Code' in the block search bar and select it.

2. Insert Your Code: Now, paste or type your code into the code block. Gutenberg will retain the formatting and spacing of your code.

¶Step 3: Formatting the Code Block

While the default code block is functional, it doesn't provide syntax highlighting, which is essential for readability. To enhance your code blocks:

• Use a Plugin: Install a Gutenberg-friendly syntax highlighting plugin. Plugins like 'Code Syntax Block' or 'Enlighter' add syntax highlighting to the code blocks. Once installed, these plugins usually add a new block type or additional settings to the existing code block for syntax highlighting.

• Custom CSS: For simple styling without a plugin, you can add custom CSS directly to your theme or via the 'Additional CSS' section in the Customizer. This method requires knowledge of CSS and is best suited for minor styling changes.

¶Step 4: Choosing a Language (With Plugins)

If you're using a syntax highlighting plugin, you'll often have the option to select the programming language of your code snippet. This ensures that the syntax is correctly highlighted. Look for a dropdown or a setting within the block to choose the language.

¶Step 5: Preview and Adjust

Preview your post or page to see how the code block appears. Depending on your theme and any additional plugins or CSS, you might need to adjust the styling to ensure that the code is displayed exactly as you want it.

¶Best Practices for Displaying Code

• Clarity: Ensure your code is well-formatted and easy to read. Proper indentation and spacing are key.
• Comments: Adding comments to your code can help readers understand what specific parts of the code do.
• Responsiveness: Test how your code blocks look on different devices to ensure they are responsive and legible.