Block style to core/list to apply css class to child li elements?


I’m trying to apply a style to gutenburg core/list blocks styles. My code below correctly applies the is-border-list class to UL object, i have two questions:

  1. Is it possible to change the style name, since i’m using bootstrap? (instead of the is-{name})
  2. Is it possible to also apply a class to the LI elements inside the UL?

In my editor.js:

wp.domReady( () => {

     wp.blocks.registerBlockStyle( 'core/list', {
          name: 'default',
          label: 'Default',
          isDefault: true,

     wp.blocks.registerBlockStyle( 'core/list', {
          name: 'border-list',
          label: 'Border List',
     } ); 
} );

I’d like my markup to look like this:

<ul class="border-list">
    <li class="list-group-item">Proven results as a recruitment consultant or strong sales experience</li>
DDulla 1 month 0 Answers 8 views 0

Leave an answer