Styla dina wordpress block

skrivet den 20 juli, 2020, uppdaterat den 20 maj, 2021 av Karin H Olsson

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:

Karin H Olsson

Jag arbetar med teknisk utveckling i WordPress – framförallt när standardlösningar inte räcker.

Jag har en bakgrund som konstruktör inom realtidssystem (de system som finns i bilar, flygplan m.m.) och har följt utvecklingen hela vägen till dagens moderna webb.

Med utbildning inom både systemvetenskap och psykologi arbetar jag i gränslandet mellan teknik och användning – där systemen inte bara ska fungera, utan också fungera för människor.

→ Läs mer KoBoToLo – Om KoBoToLo en webbyrå i Karlskoga