If and when do I need to add block markup code?

  • I’m starting from scratch creating a custom block theme. This is for the purpose of understanding the technology and new concepts as much as possible. I have experience with “classical” theming. I have questions about block markup code. I’ve been told that the purpose of the block markup code is to create meta data about the blocks and configuration for the blocks.

    Questions:
    – If I don’t need to create any configuration for any blocks, do I need to add markup code?
    – In my example below, if I don’t need my client to configure anything relating to the footer, then do I need “wp:group” for any reason?
    – Why do I want to include markup such as wp:group?

    My footer:
    <!-- wp:group {
    "align":"wide",
    "layout":{
    "type":"flex",
    "orientation":"vertical",
    "justifyContent":"center"
    }
    } -->
    <div class="wp-block-group">
    <!-- wp:site-title {"level":0} /-->

    <!-- wp:paragraph -->
    <p>Copyright</p>
    <!-- /wp:paragraph -->
    </div>
    <!-- /wp:group -->

Viewing 1 replies (of 1 total)

  • – If I don’t need to create any configuration for any blocks, do I need to add markup code?

    Yes, so that the block is recognized as such. Both in the editor and in the frontend, this is a condition for the correct formatting of the output, e.g. by setting the block-specific classes.

    – In my example below, if I don’t need my client to configure anything relating to the footer, then do I need “wp:group” for any reason?

    Yes, for the reasons mentioned above.

    – Why do I want to include markup such as wp:group?

    Because you don’t want the editor to see an error message in the editor. And because you want to enable formatting in the frontend using the styles of the theme.

    A simple example:

    1. start the Playground: https://playground.wordpress.net
    2. create a post there.
    3. switch to the code editor and add this there:
    <p>Hello world.</p>
    1. then switch to the visual editor.

    You will see that the code has been recognized as a Classic Block. This is the fallback block if it is unclear what the code actually is. For other code, the message may also appear that it was not recognized, including the option to “restore” it.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.