Styla dina wordpress block

Ibland så kan det behövas att man skapar en extra stil (style) på ett block i Gutenberg. Det underlättar om man som här vill ha extra stil på en knapp.

Jag kallar här stilen för fyll-ut

Och då läggs följande css till:

• Full bredd (100%)
• Botten marginal
• Blå bakrund

add_action( 'after_setup_theme', 'kobotolo_gutenberg_css' );

function kobotolo_gutenberg_css () {
  register_block_style(
    'core/button',
    array(
       'name'  => 'fyll-ut',
       'label' => __( 'Fyll ut', 'text-domain' ),

     'inline_style' =>
     '.wp-block-button.is-style-fyll-ut { 
         width:100%;
         margin-bottom:1rem; 
         background:blue;}',
      )
  );
}

Det här underlättar om du ofta har inställningar som du vill återanvända.

För mina kunder underlättar det genom att de bara behöver klicka på en stil och inte behöver lägga till en css-klass.

Så här ser det ut vid redigering: