[Resolved] Does generateblocks can support persistent uniqueId?

[Thiago Senna]

Hi,

this weekend I have played a lot with GenerateBlocks. Thanks, it’s really a good plugin 😀

But a very uncommon feature I really liked was that classes has unique names like gb-container gb-container-c901225e. I could really fast write CSS code targeting theses classes names.

The problem was that when I move the block to be a reusable block the UniqueId changed – so the class name changed too. But the problem could be easily fixed once I just added my own custom class name in Advanced -> CSS Classes manually.

But I liked how fast is just writing styles to unique generated class names beside thinking and adding class names manually. Is it possible for your plugin to keep the Unique ID persistent or give us an option to target a secondary persistent and unique class name?

Or would be better if I just write my own custom plugin that extends your plugin and add the new functionality?

Thanks,
Thiago Senna

[Tom]

Hi there,

We tried our best to make it so the unique ID value was persistent. Gutenberg doesn’t make it easy, unfortunately.

The ID should remain persistent in every event excerpt for making/unmaking re-usable blocks. That’s the one instance that we couldn’t get it to work, as Gutenberg still thinks the existing IDs are in use, so it generates new ones (prevents duplicate IDs when blocks are duplicated etc..).

Definitely something I’d like to sort out at some point.

Glad you like the plugin!

[Thiago Senna]

Thanks Tom,

good to know that GenerateBlocks is already working on this 😀

So for now I will create a plugin – I already created an initial JS code that creates a secondary class that is persistent. It works now when changing to/from reusable block. I just not tested it with block patterns yet.

You can close the ticket if you want. Let me know if you want me to share the JS code here.

Thanks,
Thiago Senna

[Tom]

I wouldn’t mind taking a look at it once you’re done if you’d like to share 🙂

Thanks!

[Thiago Senna]

I did test if Beaver Builder was keeping persistent their modules generated classes but they also change the generated class if you save the module as template. So thinking better maybe it’s me who needs to find a simple solution for this and avoid using generated classes. So maybe IMHO you can ignore my request and keep as is. Anyway the prototype code I wrote follows bellow.

Thanks very much!

( function () {
    "use strict";

    /**
     * Ut hendrerit est at ex sollicitudin maximus. Suspendisse purus nibh, varius sed elit vitae,
     * lobortis posuere nisi. Integer eu ultrices mauris, eu finibus est.
     *
     * @returns {function()}
     */
    const el = wp.element.createElement;

    /**
     * Ut hendrerit est at ex sollicitudin maximus. Suspendisse purus nibh, varius sed elit vitae,
     * lobortis posuere nisi. Integer eu ultrices mauris, eu finibus est.
     *
     * @param blockName
     * @returns {boolean}
     */
    const isBockSupported = function ( blockName ) {

        return [
            'generateblocks/container',
        ].includes( blockName );

    };

    /**
     * Ut hendrerit est at ex sollicitudin maximus. Suspendisse purus nibh, varius sed elit vitae,
     * lobortis posuere nisi. Integer eu ultrices mauris, eu finibus est.
     *
     * @param className
     * @param classNames
     * @returns {string}
     */
    const mergeClassNames = function ( className, classNames ) {

        if ( undefined === className ) {
            className = '';
        }

        return ( className + ' ' + classNames ).trim();

    };

    const getCustomClassNames = function ( props ) {

        let customClassNames = undefined;

        if ( undefined !== props.attributes.uniqueId && '' !== props.attributes.uniqueId.trim() ) {
            customClassNames = 'has-custom-style ';
            customClassNames += 'has-custom-style-' + props.attributes.uniqueId;
        }

        return customClassNames;

    };

    wp.hooks.addFilter(
        'blocks.registerBlockType',
        'app-theme/applyCustomClassNames',
        function ( settings, name ) {

            if ( !isBockSupported( name ) ) {
                return settings;
            }

            settings.attributes = Object.assign( settings.attributes, {
                customClassNames: {
                    type: 'string',
                }
            } );

            return settings;

        }
    );

    wp.hooks.addFilter(
        'editor.BlockEdit',
        'app-theme/applyCustomClassNames',
        wp.compose.createHigherOrderComponent( function ( BlockEdit ) {
            return function ( props ) {

                if ( isBockSupported( props.name ) && undefined === props.attributes.customClassNames ) {
                    props.setAttributes( { customClassNames: getCustomClassNames( props ) } );
                }

                return el(
                    wp.element.Fragment,
                    {},
                    el(
                        BlockEdit,
                        props
                    )
                );

            }
        } ),
    );

    wp.hooks.addFilter(
        'blocks.getSaveContent.extraProps',
        'app-theme/applyCustomClassNames',
        function ( extraProps, blockType, attributes ) {

            if ( !isBockSupported( blockType.name ) ) {
                return extraProps;
            }

            if ( undefined !== attributes.customClassNames ) {
                extraProps.children.props.className = mergeClassNames( extraProps.children.props.className, attributes.customClassNames );
            }

            return extraProps;

        }
    );

} )();

[Tom]

Great code! Thanks for sharing that with me – I’ll take a closer look 🙂

[Author]

Posts