search

generaxion / axio-starter

Superior WordPress starter theme with modern build tools by Generaxion (previously Aucor Starter). 250+ hours of development over 6 years to make the greatest starting point for WordPress site.
https://axio.generax.io
GNU General Public License v2.0
164 stars 25 forks source link

core-list : 1.1.0 #63

Closed Mil1 closed 2 years ago

Mil1 commented 2 years ago

Hi,

It seems that the core/list module does not apply styles from the scss file.

The core/list block is only a ul without a class, so I added the class with javascript: wp-block-list

So the JS i have add this : `function addBlockClassName(props, blockType) { if (blockType.name === 'core/list') { return Object.assign(props, { class: 'wp-block-list' }) } return props }

wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'gdt-guten-plugin/add-block-class-name', addBlockClassName ) `

And on the Gutenberg side, I removed the * selector

The SCSS looks like : ` @import '../../../../assets/styles/utils.scss';

/ Front-end and back-end ----------------------------------------------- / .block-editor [data-type='core/list'], .blocks .wp-block-list {

}

/ Only front-end ----------------------------------------------- / .blocks .wp-block-list { // entrance animation &.has-viewport-effect { &.is-in-viewport { } } }

/ Only back-end ----------------------------------------------- / .block-editor [data-type='core/list'] { }`

Thanks

TeemuSuoranta commented 2 years ago

That's true. Selector should be now .block-editor [data-type="core/list"] instead of .block-editor [data-type="core/list"] > *. I'd swear the HTML was different at some point so that there was an extra wrapper which is why the star selector was there.