• Add div+class around Shortcode block

    The default WordPress Gutenberg Shortcode block has no setting at all. There is no option to make the block class alignwide or alignfull and there are no block settings to add a custom class..

    I generally add the shortcode block to a Group block so I can use the options and settings of the Group block and use alignwide or alignfull.

    You can also add a div around a shortcode by adding it around the shortcode manually

    And you can even add this code snippet to your functions.php to add this class to all shortcode-blocks.

    // Add div with class alignfull around shortcode block
    add_filter( 'render_block', function( $block_content, $block ) {
        // Target shortcode blocks
        if ( preg_match( '~^core/shortcode|core-embed/shortcode~', $block['blockName'] ) ) {
           $block_content = sprintf( '<div class="alignfull">%s</div>', $block_content );
        return $block_content;
    }, PHP_INT_MAX - 1, 2 );

    PS: In the TwentyTwenty theme the alignwide and alignfull class on the Group block don’t make the Shortcode block show the correct way due to the following css on line 3556 of the style.css

    [class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
        max-width: 58rem;
        width: 100%;

    So if the block inside the inner-container of the Group block has NO align*** class the max-width is 58rem.

    I couldn’t find a feature request on the WordPress support forums so I added one: https://github.com/WordPress/gutenberg/issues/21315

  • Geef een reactie