• Resolved Watermark Branding

    (@watermarkbranding)


    I’ve developed a custom theme based off of the Twenty Twenty Four theme. At some point I started experiencing more “Block contains unexpected or invalid content”. Most of the time when I attempt recovery, there is no difference between the original and corrected markup. In some cases, I suspect there’s a difference between the block macros and the inline styling. I’ve looked for a reference for all of the options that can be passed in these macros, but I cannot seem to find one. Any help here?

Viewing 6 replies - 1 through 6 (of 6 total)
  • I am fairly new to block development, but this usually comes from editing the save function. I think it does log the differences it found with the saved content in the console and sometimes that can help shed light on what is failing.

    I don’t know what you mean by the macros, and this might be the wrong link, but the Core Blocks Reference page of the Block Editor Handbook lists the block supports. Worth looking around in the handbook if that page isn’t right, as it could be listed there somewhere

    Hello @watermarkbranding ,

    Just to clarify when you say you developed a custom theme based on Twenty Twenty-Four, do you mean you created a child theme or forked and modified it as a standalone custom theme?

    Thread Starter Watermark Branding

    (@watermarkbranding)

    @bvbaked Hey, thanks for the response. Regarding macros (I’m not sure if that’s the right term, but it does seem like some sort of macro replacement it taking place), if you look at any of the .php files in parts/ or patterns/, you’ll see a bunch of HTML comments that markup blocks. For example, in,

    <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60","right":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)">

    The first part is what I was referring to as ‘macro’. The options that are parsed from there are what I am looking for a reference for. The link you supplied is good in terms of listing a lot of the top level supported options, but it doesn’t give a full listing. For example, from inspecting, say, the Twenty Twenty Four theme, you can see that "padding" is nested under "spacing" which is nested under "style", but "background" is at the top level. This does not reflect the structure of CSS and the inline styles in the following HMTL markup. So what I’m looking for is a full reference so I’m not sort of haphazardly swinging away at modifications and custom blocks, and not sure why such a reference isn’t obviously available if theming is traditionally such a big component of WordPress (I started back in the classic theme days).

    Thread Starter Watermark Branding

    (@watermarkbranding)

    Hi @asifsiam97, close to the second case: I merely duplicated the theme, changed the directory name and all occurrences of twentytwentyfour in the theme, and started modifying.

    bvbaked

    (@bvbaked)

    @watermarkbranding

    What you refer to as macros are just the settings that get applied to a block I think. Blocks are a bit of and odd bird when it comes to what they actually are. On one hand, they are an HTML comment, but on the other there is a JSON object inside it that applies a bunch of settings.

    For the spacing you mentioned check the theme.json reference

    You’ll find that padding is nested under spacing which is also nested under styling, so it is actually correct and in the right place according to this file.
    I can’t 100% know what the error is here, but from my experience with blocks and block development so far is that if what gets saved and what is meant to display in the editor don’t align you’ll end up with this error. For example, using any sort of dynamic or unique ID generating function will always fail because the saved data will never match

    Thread Starter Watermark Branding

    (@watermarkbranding)

    @bvbaked This is exactly what I was looking for but I suppose didn’t no how to search for properly. Thanks very much! Yeah, so I guess it’s not a macro replacement that is happening but a JSON object is being parsed from the HTML comment.

    I’m going to look to see if I can’t figure out what the issue is based on the reference, but if I get everything lined up between the unparsed JSON and the inline styles and it’s still borked, I’ll reinstall my theme and or manually dump theme components from the database if needed (I think that’s what you’re pointing to with the unique ID bit).

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Reference for block options’ is closed to new replies.