Jak dodać własny styl do bloku w Gutenbergu?

Zastanawiałeś się czy możesz dodać dodatkowy styl do bloków w Gutenbergu? Ten film pomoże Ci dodać dowolny styl do przycisków, grup czy list wypunktowanych. Pokażę Ci również w jaki sposób dodać własny CSS do edytora w Gutenbergu!

Przykładowe możliwości użycia dodatkowych stylów do bloku Gutenberga

Przyklejone menu nawigacyjne w WordPress

Dodatkowe dwa style dla przycisków

Bądź dla listy wypunktowanej

Skorzystaj z poniższego kodu

Plik functions.php

<?php

    if ( ! function_exists('thr_enqueue_styles') ) {
        function thr_enqueue_styles() {
            wp_enqueue_style( 'twenty-twenty-three-style', get_template_directory_uri() .'/style.css' );
            wp_enqueue_style( 'twenty-twenty-three-child-style', get_stylesheet_uri() );

        }
        add_action('wp_enqueue_scripts', 'thr_enqueue_styles');
    }

    if( function_exists('register_block_style') ) {

        register_block_style(
            'core/group',
            array(
                'name' => 'fixed',
                'label' => __('Fixed Group', 'fse'),
                'is_default' => false
            )
        );

        register_block_style(
            'core/button',
            array(
                'name' => 'skew',
                'label' => __('Skew', 'fse'),
                'is_default' => false
            )
        );

        register_block_style(
            'core/button',
            array(
                'name' => 'skew-contour',
                'label' => __('Skew contour', 'fse'),
                'is_default' => false
            )
        );

    }
    
    function lw_theme_add_editor_styles() {
        add_editor_style( 'style.css' );
    
    }
    add_action( 'after_setup_theme', 'lw_theme_add_editor_styles' );

Plik style.css

/*
    Theme Name: Twenty Twenty-Three Child
    Theme URI: https://lukaszwronski.com/
    Author: Łukasz Wroński
    Author URI: https://lukaszwronski.com
    Template: twentytwentythree
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

.is-style-fixed {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 2;

}

.is-style-skew,
.is-style-skew-contour {
    transform: skewX(-24deg);

}

.is-style-skew {
    background-color: var(--wp--preset--color--primary);
    
}

.is-style-skew-contour {
    background-color: transparent!important;
    border: 2px solid var(--wp--preset--color--primary);

}

.is-style-skew:hover {
    background-color: var(--wp--preset--color--contrast);

}
.is-style-skew-contour > * {
    color: var(--wp--preset--color--primary)!important;

}

.is-style-skew-contour > *,
.is-style-skew-contour > *:hover,
.is-style-skew > *,
.is-style-skew > *:hover {
    background-color: transparent!important;
    transform: skewX(24deg);
    

}

.is-style-skew-contour:hover {
    background-color: var(--wp--preset--color--contrast)!important;
    border: 2px solid var(--wp--preset--color--contrast)!important;

}
.is-style-skew-contour:hover > * {
    color: #fff!important;

}