Understanding Gutenberg Default Styling and Radicle

[wispyco]

Hi,

I am trying to understand how to get the default blocks in Gutenberg to match the editor when they are outputted to the front end. This is something that has been somewhat of a mystery for me, so please bear with my limited understanding.

Below I have used the core block called “cover” it looks fine in the block editor.

However when I preview the page the block looks like this, notice the text is below the image (not the same as the block editor)

I noticed Radicle had this Theme supports section so I modified it

 /**
     * Theme supports
     */
    'support' => [
        /**
         * @link https://developer.wordpress.org/reference/functions/add_theme_support/#html5
         */
        'html5' => [
            'caption',
            'comment-form',
            'comment-list',
            'gallery',
            'search-form',
            'script',
            'style',
        ],

        /**
         * @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#wide-alignment
         */
        'align-wide',

        /**
         * @link https://developer.wordpress.org/reference/functions/add_theme_support/#title-tag
         */
        'title-tag',

        /**
         * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
         */
        'post-thumbnails',

        /**
         * @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#wide-alignment
         */
        'responsive-embeds',

        /**
         * @link https://developer.wordpress.org/themes/advanced-topics/customizer-api/#theme-support-in-sidebars
         */
        'customize-selective-refresh-widgets',
        'wp-block-styles',
        'editor-styles',
        /**
         * @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/#disabling-the-default-block-patterns
         */
        'core-block-patterns',
        /**
         * @link https://wptavern.com/gutenberg-10-5-embeds-pdfs-adds-verse-block-color-options-and-introduces-new-patterns
         */

    ],

    /**
     * Remove theme supports
     */
    'remove' => [



    ],

To add wp-block-styles, editor-styles & core-block-patterns

Ran yarn build

And still no style change on the front end

I noticed there were classes like

wp-block-cover

But no css was attached to them on the front end.

Do I have to import styles to the front end that are missing, what may the issue be?

[csorrentino]

I think the acorn/prettify package might be disabling the styles.

In config/prettify.php, look for the following line and try setting that to false:

'disable-gutenberg-block-css' => true,

[Jack_Kudla]

@csorrentino

I think the acorn/prettify package might be disabling the styles.

In config/prettify.php, look for the following line and try setting that to false:

'disable-gutenberg-block-css' => true,

I’ve tried this in Sage 10 and it’s not working for me

[wispyco]

Ok that solved that particular error, however I still am noticing some inconsistencies between Gutenberg that is running in the demo Gutenberg editor online and what I see with Radicle stack.

For example the button component I can’t add rounded corners or other features.

See gutenberg demo settins in right sidebar

and see my settings in right sidebar for button

I think we are very close. I wonder are there things I have to enable or disable elsewhere.

Even if I add a pattern with a button that has border radius there is no way to change it.

[csorrentino]

Radicle includes an example of rendering the core button block in blade. Take a look at BlocksServiceProvder and the related blade view and component.

If you remove the filter for the core button in that service provider, you should see the defaults on the frontend

[ben]

Radicle also removes the default theme.json styles:

https://github.com/roots/radicle/blob/82838367eabe879ef7676805a0176ce48ba3017b/app/Providers/AssetsServiceProvider.php#L74-L92

[wispyco]

There were multiple solutions tacked together to achieve what I needed.

Understanding Gutenberg Default Styling and Radicle

Radicle includes an example of rendering the core button block in blade. Take a look at BlocksServiceProvder and the related blade view and component. If you remove the filter for the core button in that service provider, you should see the defaults on the frontend

https://discourse.roots.io/t/understanding-gutenberg-default-styling-and-radicle/29059/2

https://discourse.roots.io/t/understanding-gutenberg-default-styling-and-radicle/29059/7

thank you for the clear instructions and time taken to help me out.