Adding custom data to Rows/Columns

To add another thing: I tried using the render_block server-side filter, to add a wrapper around the row-layout with my data added to it. But it doesn’t seem like my custom attributes are getting passed into this filter.

Hey,
This is more complex then something I can just guess at here in your code. Do you have a GitHub showing your project so I can see what you are doing?

You mention wanting to be able to change the class on render instead of on save. Can you tell me more what you are using this for? If it’s a control in the block then having it work on save would make sense because it could only be changed in the block settings. Since this is a static block saved as HTML that would also make the most sense code wise. However, if you need this to change based on something else outside of the block controls then you will need to approach this differently.

A note, if you are using the filters correctly Gutenberg will account for what HTML changes your code would make when checking for render and not show a broken block. I do something like this in Kadence Blocks Pro because columns for example have animation options which are an addon to the block settings.

Ben

Okay I’ll try to expand on it. I don’t have it on GitHub, but I’ll share the necessary code-parts here.

First I’ll try to explain visually what I’m doing/want to be doing, and then I’ll show you the code that I’m using so far.

So this is the structure:

View post on imgur.com

* Red = Rowlayout
* Green = Column

Inside the column are some other blocks.

This is what I want to achieve:

View post on imgur.com

This is the “Background-Decoration” settings-toggle (and color select) I added to the kadence/rowlayout (last panel):

View post on imgur.com

What should happen:
If the toggle is enabled it should add the class inset-background to the row-layout-wrapper and add the selected HEX-Color as --inset-background-color CSS variable into the style-tag.

Here you can see that I got it pretty much working: https://imgur.com/7RtNHc9
But once it is saved and the editor reloaded the Kadence-Row-Block shows invalid content.

This is what the validation-console-output shows:

View post on imgur.com

As you can see the save-function does not include the CSS-variable, but the post-body does. What I just noticed, does the kt-row-layout-inner has an extra space in the save-function output? Why could that be?

Interesting note here: You will see in a minute, that I use this feature on the kadence/rowlayout AND core/group block, with the exact same code. But on the core/group-block this validation error doesn’t happen.

Ok now to the code:
https://pastebin.com/WZWRJAAs

I’ve tried to comment a little what I’m doing.
As mentioned above you can see the same code is used for kadence/rowlayout and core/group but the second blocks doesn’t seem to have any problems with it.

I hope this helps with the understanding of my problem and thanks a lot for your help ??

Hey,
The main thing I see is that once it’s loaded in the editor the attributes are missing. There is an issue in Gutenberg with timing for when you are loading the scripts to add attributes. In Kadence Blocks Pro for example (and this seems to be true of other plugins I’ve seen add attributes like editors kit) I load a script with the blocks.registerBlockType filter early in the page load before things are registered. Else Gutenberg won’t pick up the new attributes that you’ve saved.

For example, I enqueue my early script on the current_screen action so it loads at the top of the head and the filter is registered for when registerBlockType runs.

I hope that helps,

Ben

Hey Ben,

thanks for your answer. This seems to actually help, yes.
For anyone experiencing the same problem, here is how I split up my files:

function enqueue_gutenberg_attributes()
{
    // I took this conditional-code from the Kadence init.php, thanks a lot!
    if ( ! is_admin() ) {
        return;
    }
    global $pagenow;
    if ( 'post.php' === $pagenow || 'post-new.php' === $pagenow ) {
        $current_screen = get_current_screen();
        if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
            wp_enqueue_script(
                'wfp-gutenberg-attributes',
                get_template_directory_uri() . '/dist/js/pages/wp_gutenberg_attributes.js',
                [
                    'wp-editor',
                ],
                filemtime(get_stylesheet_directory() . '/dist/js/pages/wp_gutenberg_attributes.js')
            );
        }
    }
}

add_action('current_screen', 'enqueue_gutenberg_attributes');

and in the wp_gutenberg_attributes.js I only register the new attributes:

import { blocks_galleryStyles, blocks_insetBackground, blocks_textColumns } from "../components/wp_gutenberg_variables";

/**
 * Add Custom Attributes
 */
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'cptx/addCustomAttributes',
    settings => {
        if ( blocks_textColumns.includes(settings.name) ) {
            settings.attributes = {
                ...settings.attributes,
                textColumnsCount: {
                    type:    'number',
                    default: 1
                }
            };
        }

        if ( blocks_insetBackground.includes(settings.name) ) {
            settings.attributes = {
                ...settings.attributes,
                useInsetBackground:   {
                    type: 'boolean',
                    default: false,
                },
                insetBackgroundColor: {
                    type:    'string',
                    default: '#c1c1c1'
                }
            };
        }

        if ( blocks_galleryStyles.includes(settings.name) ) {
            settings.attributes = {
                ...settings.attributes,
                cptxGalleryStyle: {
                    type:    'string',
                    default: 'default'
                }
            };
        }

        return settings;
    }
);

Two things to mention:
1. I had to still restore the faulty blocks and re-save them for it to work.
2. I had one attribute that I added globally to ALL blocks which caused for example the Gravity Forms-Block to break and not being able to load the requested form anymore (it said the attributes contained invalid props). So it should probably only be applied to whitelisted blocks.

The rest of my code from above (the blocks.getSaveContent.extraProps filter etc.) still gets enqueued on the enqueue_block_editor_assets action and works fine.

Thanks again for your help, I think this solution works for now ??

Flo,

• This reply was modified 4 years, 6 months ago by workforpizza. Reason: code highlighting
• This reply was modified 4 years, 6 months ago by workforpizza.