HTML Code

How to Convert WordPress Blocks to HTML Code

Posted on by Prakash Tiwari

WordPress is the most popular platform for building websites, and its block editor, Gutenberg, makes designing pages more effortless than ever. Using pre-built blocks, you can add text, images, buttons, and more. But what if you need more control or want to customize your content further?

That’s where converting blocks to HTML code comes in handy. If you want to add some advanced design elements to your page, you need to edit or modify the HTML code. You can also switch to HTML view.

This guide will teach you how to do it in simple steps.

Steps to Convert WordPress Blocks to HTML

You can easily convert blocks to HTML directly within the WordPress editor. 

Step 1: Open the WordPress Editor

  1. Log in to your WordPress dashboard.
  2. Navigate to the page or post where you want to edit the blocks.
  3. Click Edit to open the block editor.

Step 2: Select the Block You Want to Convert

  1. Click on the block you want to convert.
  2. A small toolbar will appear above the block.

Step 3: Open the Block Options

  1. On the toolbar, click the three-dot menu (the “More Options” menu).
  2. A dropdown menu will appear.

Step 4: Convert the Block to HTML

  1. In the dropdown menu, select Edit as HTML.
  2. The block will switch from a visual editor to an HTML editor.

You’ll now see the raw HTML code for that specific block.

Step 5: Copy or Edit the HTML Code

  1. If you only need the HTML code, highlight it and copy it.
  2. To make changes, directly edit the HTML code in the editor.

Step 6: Switch Back to Visual Mode (Optional)

  1. If you’re done editing the HTML and want to return to the visual block editor, click the three-dot menu again.
  2. Select Edit Visually to switch back.

How to View the Entire Page’s HTML

You can use the Code Editor if you need the HTML for the entire page, not just a single block.

Steps to Access the Full-Page HTML

  1. Open the page or post in the block editor.
  2. Click the three-dot menu in the top-right corner of the editor.
  3. Select Code Editor from the dropdown menu.

You’ll now see the entire page’s HTML code. You can copy, edit, or save it as needed.

Tips for Working with HTML in WordPress

1. Use Proper HTML Tags

Ensure you use the correct tags, like <p> for paragraphs, <h1> for headings, and <img> for images.

2. Avoid Breaking the Layout

Be careful when editing HTML. Changing the structure too much can break the design.

3. Backup Before Making Changes

Always back up your page or post before editing the HTML, just in case something goes wrong.

4. Test Changes

Preview your page after making changes to ensure everything looks right.

Common Questions About Converting Blocks to HTML

1. Can I convert all types of blocks to HTML?

Yes, you can convert any block to HTML, including text, images, buttons, etc.

2. Will editing the HTML affect the block editor?

If you make changes to the HTML, some features of the block editor might no longer work. For example, custom HTML changes may disable specific visual editing options.

3. Can I switch back to blocks after editing HTML?

You can switch back to the visual editor unless your changes significantly alter the structure.

4. Can I use the HTML outside WordPress?

Absolutely! You can copy and use the HTML on other websites or email templates.

Conclusion

Converting WordPress blocks to HTML gives you more freedom to customize and manage your website. Knowing how to switch between blocks and HTML is essential, whether you need to add advanced styles, debug issues, or export content.

With the steps outlined in this guide, you can easily convert blocks to HTML and edit them as needed.