Search code examples
wordpresswordpress-gutenberg

How to use (any) block within an HTML block?


In the WordPress editor, is it possible to manually use a block (any) inside an HTML block?

For example, given the blocks below, can you manually use block 3 (two-column block) somewhere inside block 5 (HTML block)?

Example blocks:

  1. Header
  2. Text
  3. Two-columns
  4. Text
  5. HTML

Use case: I have a landing page (that came from an external source) with a special complicated layout I don't have time to properly integrate into my custom WP theme.

The custom landing page code lives in a standard WP HTML block, which works, however I'd to still be able to use the block editor for managing specific section within the landing page, and do this without having to dive into theme files.

Suggestions?


Solution

  • The HTML block is used for custom HTML content and cannot contain other blocks. I would suggest recreating the basic structure of the layout with column blocks then converting parts that have direct block equivalents like headings, paragraphs, images. By grouping blocks, you can join the parts into a container to better control the layout. The groups can be added to columns/rows and additional CSS classes can be added (eg. classes used in the original content) to recreate the layout entirely with blocks.

    For styling, if the original content relied heavily on inline styles, I would move them into a separate CSS file and conditionally load them for that page. This would help identify/resolve conflicting style issues between the blocks and the original content.