Editing Core Gutenberg Blocks

I've been researching how we could use the core gutenberg blocks but with our styles.

I've found that there are ways to edit them.

In this example I'm going to show how to edit the button block which we'll be using in our piconsulting theme.

    Create a folder in the theme blocks folder ex. piconsuting/blocks/button
    Create a button.js file that adds the new styles and removes the default ones
wp.blocks.registerBlockStyle("core/button", {
  name: "btn",
  label: "pic - default",
  isDefault: true
});

wp.blocks.registerBlockStyle("core/button", {
  name: "btn btn-white",
  label: "pic - white btn"
});

wp.domReady( function () {
  wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
  wp.blocks.unregisterBlockStyle( 'core/button', 'fill' );

});


3. Create a button.php with the following to call that js script and also edit the render button.
<?php


/*
This was created by pic to modify the default styles for the buttons.

*/

class PIC_Button
{
    function __construct()
    {
        add_action('enqueue_block_editor_assets', array($this, 'adminAssets'));
        add_filter('render_block', array($this, 'wporg_block_wrapper'), 10, 2);
    }

    function adminAssets() {
        wp_enqueue_script('pic-button', '/wp-content/themes/piconsulting/blocks/button/button.js', array('wp-blocks', 'wp-dom-ready', 'wp-edit-post', 'wp-element'));
    }


    function wporg_block_wrapper($block_content, $block) {
        if ($block['blockName'] === 'core/button') {

            $class = $block['attrs']['className'];

            if (strpos($class, "white") !== false) {
                $block_content = str_replace('wp-block-button__link', 'wp-block-button__link btn btn-white', $block_content);
                return $block_content;
            }

            $block_content = str_replace('wp-block-button__link', 'wp-block-button__link btn', $block_content);
            return $block_content;
        }
        return $block_content;
    }
}

$PIC_Button = new PIC_Button();

4. Call your button.php file in functions ex

// Gutenberg blocks
require_once(get_template_directory() . '/blocks/button/button.php');

5. Use the gutenberg default button with the pic styles.


https://slite.com/api/files/35NXl2zz8/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiN0lWUHBORmJOIiwiaWF0IjoxNzU5NzkwMTk1LCJpc3MiOiJodHRwczovL3NsaXRlLmNvbSIsImp0aSI6InBtY1U3NUFJMHR1WlFTIiwiZXhwIjoxNzYyMzgyMTk1fQ.l3196TsirIak0k3Gx7_D6zvSe1Qgnbqa31fyNtH1v5s
Example of front end.


https://slite.com/api/files/qvEvz4Cjg~/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiN0lWUHBORmJOIiwiaWF0IjoxNzU5NzkwMTk1LCJpc3MiOiJodHRwczovL3NsaXRlLmNvbSIsImp0aSI6InBtY1U3NUFJMHR1WlFTIiwiZXhwIjoxNzYyMzgyMTk1fQ.l3196TsirIak0k3Gx7_D6zvSe1Qgnbqa31fyNtH1v5s

Still need to figure how to mix our styles, using our variables and also be able to show that in the backend.

But I'm very exited about this!