WP Manifestindependent plugin directory
manifest / editor / burbs-add-style-to-blocks

'burbs Add Style to Blocks

Adding Style to Block Editor.

by Cross Check SEO · github.com/pbrocks/burbs-add-style-to-blocks · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/pbrocks/burbs-add-style-to-blocks/archive/refs/heads/master.zip
Readme github.com/pbrocks/burbs-add-style-to-blocks ↗

burbs-blocks-style

Adding Style to Block Editor.

Turning on Style

Before adding style images not inline

Before Style

Enqueue Block Assets

add_action( 'enqueue_block_assets', 'enqueue_burbs_blocks_style_scripts_styles' );
function enqueue_burbs_blocks_style_scripts_styles() {
    wp_register_style( 'burbs-blocks-style', plugins_url( 'css/burbs-blocks-style.css', __FILE__ ), [], time() );
    wp_register_script( 'burbs-blocks-style', plugins_url( 'js/burbs-blocks-style.js', __FILE__ ), [], time(), true );
    wp_enqueue_style( 'burbs-blocks-style' );
    wp_enqueue_script( 'burbs-blocks-style' );
}

Javascript to access global variables

wp.blocks.registerBlockStyle( 'core/paragraph', {
    name: 'bullet-image',
    label: 'Inline Bullet Image'
} );

CSS

.is-style-bullet-image img {
    width: 20px;
    float: left;
    margin: .5rem 1rem 0 0;
}

After adding style

After Style