Design System is here - Read the release post

Learn GeneratePress

Developers

Editor: block attributes, appenders and preview

Hooks for how GenerateBlocks blocks behave in the block editor: the data they save, the wrapper and inserter controls they show, and the lists of fonts, shapes and templates they offer. For the controls in the inspector, see Editor: inspector controls and panels.

Jump to

Font, shape and template lists

generateblocks_typography_font_family_list

GB Free — since GenerateBlocks 1.8.

The generateblocks_typography_font_family_list filter changes the list of fonts in the font family control, which is sent to the block editor. Add your own groups of fonts.

Parameters: $font_groups (array of groups, each with a label and an options array of { value, label }). Default: one group, System Fonts, with Arial, Helvetica, Times New Roman and Georgia.

add_filter( 'generateblocks_typography_font_family_list', function( $font_groups ) {
    $font_groups[] = [
        'label'   => __( 'My fonts', 'my-plugin' ),
        'options' => [
            [
                'value' => 'My Font',
                'label' => 'My Font',
            ],
        ],
    ];

    return $font_groups;
} );

Related: generateblocks_dashboard_screens Guide: The Blocks

generateblocks_svg_shapes

GB Free — since GenerateBlocks 1.2.

The generateblocks_svg_shapes filter changes the shape dividers available in the Shape block. Each group has a label and a list of shapes.

Parameters: $shapes (array keyed by group ID, each with a group label and an svgs array keyed by shape ID, where each shape has a label and an icon of SVG markup). Default: the built-in groups of dividers, starting with gb-waves (Waves).

add_filter( 'generateblocks_svg_shapes', function( $shapes ) {
    $shapes['my-shapes'] = [
        'group' => __( 'My shapes', 'my-plugin' ),
        'svgs'  => [
            'my-shapes-1' => [
                'label' => __( 'Slope', 'my-plugin' ),
                'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none"><path d="M0 100V0l1200 100z"/></svg>',
            ],
        ],
    ];

    return $shapes;
} );

Related: generateblocks.editor.iconSVGSets Guide: SVG Shapes & Icons

generateblocks.carousel.templates

GB Pro

The generateblocks.carousel.templates filter changes the layouts offered when you add a Carousel block.

Parameters: templates (array of templates, each with id, label, icon (an element), innerBlocks and attributes), context (object with clientId and attributes). Default: the built-in carousel layouts, such as Basic and Testimonials.

wp.hooks.addFilter(
    'generateblocks.carousel.templates',
    'my-plugin/carousel-templates',
    ( templates ) => templates.filter( ( template ) => 'testimonials-carousel' !== template.id )
);

Related: generateblocks_dynamic_css_blocks Guide: GenerateBlocks Pro

Back to top

Block attributes

These are wp.hooks filters. Add them with wp.hooks.addFilter() in a script that loads in the block editor.

generateblocks.editor.htmlAttributes.style

GB Free — GenerateBlocks Pro also uses it.

The generateblocks.editor.htmlAttributes.style filter changes the value of a block’s style HTML attribute before the editor uses it. Your callback can return a promise.

Parameters: style (the style attribute value), props (the block’s props). Default: the block’s style attribute value.

wp.hooks.addFilter(
    'generateblocks.editor.htmlAttributes.style',
    'my-plugin/html-attributes-style',
    ( style, props ) => style
);

Related: generateblocks.utils.noStyleAttributes Guide: The Blocks

generateblocks.utils.noStyleAttributes

GB Free — GenerateBlocks Pro also uses it.

The generateblocks.utils.noStyleAttributes filter lists block attributes that are not styles. Features that copy, paste or sync styles skip these attributes. Add the attributes of your own block that hold content or settings, not styles.

Parameters: attributes (array of attribute names). Default: the names of the attributes of the GenerateBlocks blocks that aren’t styles, such as anchor, className, content and htmlAttributes.

The filter runs once when the script loads, so add your filter before the GenerateBlocks block scripts run.

wp.hooks.addFilter(
    'generateblocks.utils.noStyleAttributes',
    'my-plugin/no-style-attributes',
    ( attributes ) => [ ...attributes, 'myCustomSetting' ]
);

Related: generateblocks.editor.htmlAttributes.style Guide: The Blocks

generateblocks.media.imageAttributes

GB Free — GenerateBlocks Pro also uses it.

The generateblocks.media.imageAttributes filter changes the attributes the Media block copies from the media library to the image when you choose an image.

Parameters: imageAttributes (object with alt, title, height and width), context (object with image, the media library item, and attributes, the block’s attributes). Default: alt, title, height and width from the media library item.

wp.hooks.addFilter(
    'generateblocks.media.imageAttributes',
    'my-plugin/image-attributes',
    ( imageAttributes, { image } ) => ( { ...imageAttributes, loading: 'lazy' } )
);

Related: generateblocks.blockSettings.afterImageUrlControls Guide: The Blocks

Back to top

Editor wrappers and appenders

generateblocks.rootElement.disable

GB Free — GenerateBlocks Pro also uses it.

The generateblocks.rootElement.disable filter chooses whether a block’s editor wrapper div is left out. A block that is nested inside another block has no wrapper by default.

Parameters: disable (a truthy value, such as the parent block’s client ID, or false), context (object with name, the block’s name). Default: truthy when the block has a parent block, otherwise false.

wp.hooks.addFilter(
    'generateblocks.rootElement.disable',
    'my-plugin/root-element',
    ( disable, { name } ) => ( 'generateblocks/shape' === name ? true : disable )
);

Related: generateblocks.editor.preview.context Guide: The Blocks

generateblocks.editor.preview.context

GB Free — GenerateBlocks Pro also uses it.

The generateblocks.editor.preview.context filter changes the block context the editor uses to preview a Looper or other block.

Parameters: context (object, the block’s context), data (object with props, the block’s props). Default: the block’s own context.

wp.hooks.addFilter(
    'generateblocks.editor.preview.context',
    'my-plugin/preview-context',
    ( context ) => context
);

Related: generateblocks.editor.looper.query Guide: The Blocks

generateblocks.editor.blockAppender

GB Free

The generateblocks.editor.blockAppender filter changes the appender inside an empty Element block, which is the button that opens the inserter.

Parameters: appender (an element), context (object with clientId, isSelected and attributes). Default: the built-in inserter button, or the block selector button when the block isn’t selected.

wp.hooks.addFilter(
    'generateblocks.editor.blockAppender',
    'my-plugin/block-appender',
    ( appender, { clientId, isSelected, attributes } ) => appender
);

Related: generateblocks.editor.showBlockAppender Guide: The Blocks

generateblocks.editor.showBlockAppender

GB Free

The generateblocks.editor.showBlockAppender filter chooses whether the Element block shows its appender.

Parameters: show (bool), context (object with clientId, isSelected and attributes). Default: true, except in a block preview.

wp.hooks.addFilter(
    'generateblocks.editor.showBlockAppender',
    'my-plugin/show-block-appender',
    ( show, { attributes } ) => ( attributes.className?.includes( 'my-locked-layout' ) ? false : show )
);

Related: generateblocks.editor.blockAppender Guide: The Blocks

generateblocks.editor.toolbarAppenders

GB Free

The generateblocks.editor.toolbarAppenders filter changes the extra toolbar controls GenerateBlocks adds to its blocks. The built-in control is an Add to Container button, and the Media block adds more for images.

Parameters: appenders (an element, the toolbar controls), props (object with the block’s clientId, attributes and name). Default: the built-in toolbar controls.

wp.hooks.addFilter(
    'generateblocks.editor.toolbarAppenders',
    'my-plugin/toolbar-appenders',
    ( appenders, props ) => appenders
);

Related: generateblocks.editor.areToolbarControlsDisabled Guide: The Blocks

generateblocks.editor.removeBlockWidthOptions

GB Free

The generateblocks.editor.removeBlockWidthOptions filter chooses whether the Default / Wide / Full width options are removed from the block toolbar.

Parameters: remove (bool), context (object with clientId). Default: false. The options also don’t show when the theme doesn’t support wide alignment or the block is nested.

wp.hooks.addFilter(
    'generateblocks.editor.removeBlockWidthOptions',
    'my-plugin/remove-width-options',
    () => true
);

Related: generateblocks.editor.showBlockAppender Guide: The Blocks

Back to top