Skip to content

Commit e0bb85e

Browse files
kaeizenkaeizen
authored
Feat: theme.json block style inheritance (#3490)
* theme block style inheritance * added doc comment and changed description * update version, fix styles in editor * add theme compatibility for twenty twenty-five * fix php error * Added caching * updated version to 3.16.0 --------- Co-authored-by: [email protected] <>
1 parent 36338f6 commit e0bb85e

File tree

11 files changed

+690
-29
lines changed

11 files changed

+690
-29
lines changed

‎plugin.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ function is_frontend() {
230230
require_once( plugin_dir_path( __FILE__ ) . 'src/dynamic-breakpoints.php' );
231231
require_once( plugin_dir_path( __FILE__ ) . 'src/design-library/init.php' );
232232
require_once( plugin_dir_path( __FILE__ ) . 'src/styles/block-design-system.php' );
233+
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/theme-block-style-inheritance/index.php' );
233234
require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );
234235
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
235236
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );

‎src/block/columns/style.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@
1515
margin-right: auto;
1616
}
1717

18+
// These are styles added from the block style inheritance.
19+
:where(.stk-has-block-style-inheritance) {
20+
.stk-block-columns > .stk-block-content {
21+
--stk-column-gap: var(--stk-columns-column-gap, 0px); // For nested columns, this takes precedence.
22+
}
23+
}
24+
1825
// These are styles added from the global spacing and borders.
1926
:where(.stk-has-design-system-spacing-and-borders) {
2027
.stk-block-columns > .stk-block-content {

‎src/compatibility/twenty-twenty-five/style.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:where(.stk-has-block-style-inheritance.stk--is-twentytwentyfive-theme) :where(.stk-block-button .stk-button) {
2+
border-radius: 9999px;
3+
}

‎src/init.php‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ function __construct() {
5151
}
5252
add_action( 'enqueue_block_editor_assets', array( $this, 'register_block_editor_assets_admin' ) );
5353

54+
if ( is_admin() ) {
55+
// Use enqueue_block_assets so it gets loaded in the editor's iframe <head> tag
56+
add_action( 'enqueue_block_assets', array( $this, 'enqueue_style_in_editor' ), 50 );
57+
}
58+
5459
add_action( 'plugins_loaded', array( $this, 'load_plugin_textdomain' ) );
5560

5661
add_action( 'wp_footer', array( $this, 'init_stackable_vars' ) );
@@ -125,6 +130,13 @@ public function register_frontend_assets() {
125130
wp_add_inline_style( 'ugb-style-css-nodep', $inline_css );
126131
}
127132

133+
// Register inline frontend styles for theme.json block style inheritance
134+
wp_register_style( 'ugb-block-style-inheritance-nodep', false );
135+
$block_style_inline_css = apply_filters( 'stackable_block_style_inheritance_inline_styles_nodep', '' );
136+
if ( ! empty( $block_style_inline_css ) ) {
137+
wp_add_inline_style( 'ugb-block-style-inheritance-nodep', $block_style_inline_css );
138+
}
139+
128140
// This is needed for the translation strings in our UI.
129141
if ( is_admin() ) {
130142
stackable_load_js_translations();
@@ -246,6 +258,9 @@ public function load_frontend_scripts_conditionally( $block_content, $block ) {
246258
public function block_enqueue_frontend_assets() {
247259
$this->register_frontend_assets();
248260
wp_enqueue_style( 'ugb-style-css' );
261+
if ( is_frontend() ) {
262+
wp_enqueue_style( 'ugb-block-style-inheritance-nodep' );
263+
}
249264
wp_enqueue_style( 'ugb-style-css-nodep' );
250265
wp_enqueue_script( 'ugb-block-frontend-js' );
251266
do_action( 'stackable_block_enqueue_frontend_assets' );
@@ -358,6 +373,12 @@ public function register_block_editor_assets() {
358373
wp_localize_script( 'wp-blocks', 'stackable', $args );
359374
}
360375

376+
// Ensure that block style inheritance styles comes after the editor block styles.
377+
function enqueue_style_in_editor() {
378+
wp_enqueue_style( 'ugb-block-editor-css' );
379+
wp_enqueue_style( 'ugb-block-style-inheritance-nodep' );
380+
}
381+
361382
/**
362383
* Gets the default/center and wide block widths from the theme if
363384
* possible. We need this so our "Content Width" option can be
@@ -437,6 +458,8 @@ public function add_body_class_theme_compatibility( $classes ) {
437458
$classes[] = 'stk--is-twentytwentyone-theme';
438459
} else if ( function_exists( 'twentytwentytwo_support' ) ) {
439460
$classes[] = 'stk--is-twentytwentytwo-theme';
461+
} else if ( function_exists( 'twentytwentyfive_post_format_setup' ) ) {
462+
$classes[] = 'stk--is-twentytwentyfive-theme';
440463
} else if ( function_exists( 'hello_elementor_setup' ) ) { // Taken from https://github.com/elementor/hello-theme/blob/master/functions.php
441464
$classes[] = 'stk--is-helloelementor-theme';
442465
}

‎src/plugins/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import './layout-picker-reset'
88
// import './v2-migration-popup' // Probably 1.5yrs of checking for backward compatibility is enough.
99
import './save-block'
1010
import './editor-device-preview-class'
11+
import './theme-block-style-inheritance'
1112
import { BlockLinking } from './block-linking'
1213
import { BlockHoverState } from './block-hover-state'
1314
import { ContentAlign } from './content-align'

‎src/plugins/theme-block-style-inheritance/index.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { fetchSettings } from '~stackable/util'
5+
6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { useEffect, useState } from '@wordpress/element'
10+
import { useSelect } from '@wordpress/data'
11+
import { registerPlugin } from '@wordpress/plugins'
12+
13+
// Adds a body class for block style inheritance
14+
const ThemeBlockStyleInheritanceClass = () => {
15+
const [ disableBlockStyleInheritance, setDisableBlockStyleInheritance ] = useState( true )
16+
const editorEl = useSelect( select => {
17+
return select( 'stackable/editor-dom' ).getEditorDom()
18+
}, [] )
19+
20+
useEffect( () => {
21+
fetchSettings().then( response => {
22+
setDisableBlockStyleInheritance( response.stackable_disable_block_style_inheritance )
23+
} )
24+
}, [] )
25+
26+
// Update the editor class
27+
useEffect( () => {
28+
if ( editorEl ) {
29+
// Add block style inheritance class
30+
if ( ! disableBlockStyleInheritance && editorEl.classList.contains( `stk-has-block-style-inheritance` ) === false ) {
31+
editorEl.classList.add( `stk-has-block-style-inheritance` )
32+
}
33+
34+
if ( disableBlockStyleInheritance ) {
35+
editorEl.classList.remove( `stk-has-block-style-inheritance` )
36+
}
37+
38+
// At first load of the editor, the block style inheritance class is removed, so we have to re-add it.
39+
const mo = onClassChange( editorEl, () => {
40+
if ( ! disableBlockStyleInheritance && editorEl.classList.contains( `stk-has-block-style-inheritance` ) === false ) {
41+
editorEl.classList.add( `stk-has-block-style-inheritance` )
42+
}
43+
44+
if ( disableBlockStyleInheritance ) {
45+
editorEl.classList.remove( `stk-has-block-style-inheritance` )
46+
}
47+
} )
48+
49+
return () => mo.disconnect()
50+
}
51+
}, [ editorEl, disableBlockStyleInheritance ] )
52+
53+
return null
54+
}
55+
56+
registerPlugin( 'stackable-theme-block-style-inheritance-class', {
57+
render: ThemeBlockStyleInheritanceClass,
58+
} )
59+
60+
// Listener when a class is changed on an element.
61+
const onClassChange = ( node, callback ) => {
62+
let lastClassString = node.classList.toString()
63+
64+
const mutationObserver = new MutationObserver( mutationList => {
65+
for ( const item of mutationList ) {
66+
if ( item.attributeName === 'class' ) {
67+
const classString = node.classList.toString()
68+
if ( classString !== lastClassString ) {
69+
callback( mutationObserver )
70+
lastClassString = classString
71+
break
72+
}
73+
}
74+
}
75+
} )
76+
77+
mutationObserver.observe( node, { attributes: true } )
78+
79+
return mutationObserver
80+
}

0 commit comments

Comments
 (0)