From 98c4c0dec492ad60a66b8a3e0f10ccc9d5525b13 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 7 Nov 2023 09:31:16 +0000 Subject: [PATCH 1/3] Add the experimental setting & first test --- lib/experimental/editor-settings.php | 4 +++ lib/experiments-page.php | 12 +++++++++ packages/block-editor/src/hooks/color.js | 12 +++++++++ packages/edit-post/src/editor.js | 33 +++++++++++++----------- packages/edit-site/src/index.js | 1 + 5 files changed, 47 insertions(+), 15 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 2c7d6310005bfa..899cb91dd54b99 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -30,6 +30,10 @@ function gutenberg_enable_experiments() { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalConnections = true', 'before' ); } + if ( $gutenberg_experiments && array_key_exists( 'gutenberg-styles-inheritance-ui', $gutenberg_experiments ) ) { + wp_add_inline_script( 'wp-block-editor', 'window.__experimentalStylesInheritanceUI = true', 'before' ); + } + if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) { wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' ); } diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 0bcd28b2aa2c49..ef88435c7fedfa 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -138,6 +138,18 @@ function gutenberg_initialize_experiments_settings() { ) ); + add_settings_field( + 'gutenberg-styles-inheritance-ui', + __( 'Styles Inheritance UI', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Styles Inheritance UI', 'gutenberg' ), + 'id' => 'gutenberg-styles-inheritance-ui', + ) + ); + register_setting( 'gutenberg-experiments', 'gutenberg-experiments' diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 19fe4b0ea5ecd4..b6d38ea3c971bc 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -32,6 +32,7 @@ import { default as StylesColorPanel, } from '../components/global-styles/color-panel'; import BlockColorContrastChecker from './contrast-checker'; +import { useGlobalStyle } from '../components/global-styles'; export const COLOR_SUPPORT_KEY = 'color'; @@ -293,6 +294,17 @@ export function ColorEdit( props ) { const { clientId, name, attributes, setAttributes } = props; const settings = useBlockSettings( name ); const isEnabled = useHasColorPanel( settings ); + + const [ blockValue ] = useGlobalStyle( 'color.text', props.name, 'user' ); + const [ globalStylesValue ] = useGlobalStyle( + 'color.text', + undefined, + 'user' + ); + + console.log( 'blockValue', blockValue ); + console.log( 'globalStylesValue', globalStylesValue ); + const value = useMemo( () => { return attributesToStyle( { style: attributes.style, diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index d1ef111e7dc4c3..53abb470594390 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -14,6 +14,7 @@ import { SlotFillProvider } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; import { CommandMenu } from '@wordpress/commands'; +import { GlobalStylesProvider } from '@wordpress/edit-site'; /** * Internal dependencies @@ -151,21 +152,23 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { return ( - - - - - - - - + + + + + + + + + + ); } diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 18cb0d5e5db69b..0692374a1e7cb8 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -110,3 +110,4 @@ export { default as PluginSidebarMoreMenuItem } from './components/header-edit-m export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item'; export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel'; export { store } from './store'; +export { GlobalStylesProvider } from './components/global-styles/global-styles-provider'; From 735ea13dda9d60403829e43c86502f4060d6b2d9 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 7 Nov 2023 20:49:45 +0000 Subject: [PATCH 2/3] Handle the inherited values correctly --- .../components/global-styles/color-panel.js | 32 ++++++++++++++++--- packages/block-editor/src/hooks/color.js | 11 ++----- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index 3b55ec36fc91db..a8dec9e93dc2ed 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -152,7 +152,7 @@ const popoverProps = { shift: true, }; -const LabeledColorIndicators = ( { indicators, label } ) => ( +const LabeledColorIndicators = ( { indicators, label, hasInheritedValue } ) => ( { indicators.map( ( indicator, index ) => ( @@ -164,6 +164,18 @@ const LabeledColorIndicators = ( { indicators, label } ) => ( { label } @@ -177,14 +189,15 @@ function ColorPanelTab( { setValue, colorGradientControlSettings, } ) { + const value = userValue || inheritedValue; return ( ); @@ -512,8 +527,9 @@ export default function ColorPanel( { label: __( 'Text' ), hasValue: hasTextColor, resetValue: resetTextColor, + hasInheritedValue: !! textColor && ! userTextColor, isShownByDefault: defaultControls.text, - indicators: [ textColor ], + indicators: [ userTextColor || textColor ], tabs: [ { key: 'text', @@ -528,6 +544,10 @@ export default function ColorPanel( { key: 'background', label: __( 'Background' ), hasValue: hasBackground, + hasInheritedValue: + ( !! backgroundColor || !! gradient ) && + ! userBackgroundColor && + ! userGradient, resetValue: resetBackground, isShownByDefault: defaultControls.background, indicators: [ gradient ?? backgroundColor ], @@ -553,6 +573,10 @@ export default function ColorPanel( { key: 'link', label: __( 'Link' ), hasValue: hasLink, + hasInheritedValue: + ( !! linkColor || !! hoverLinkColor ) && + ! userLinkColor && + ! userHoverLinkColor, resetValue: resetLink, isShownByDefault: defaultControls.link, indicators: [ linkColor, hoverLinkColor ], diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index b6d38ea3c971bc..4a66fa073fb4bd 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -295,15 +295,7 @@ export function ColorEdit( props ) { const settings = useBlockSettings( name ); const isEnabled = useHasColorPanel( settings ); - const [ blockValue ] = useGlobalStyle( 'color.text', props.name, 'user' ); - const [ globalStylesValue ] = useGlobalStyle( - 'color.text', - undefined, - 'user' - ); - - console.log( 'blockValue', blockValue ); - console.log( 'globalStylesValue', globalStylesValue ); + const [ userValue ] = useGlobalStyle( '', props.name, 'user' ); const value = useMemo( () => { return attributesToStyle( { @@ -349,6 +341,7 @@ export function ColorEdit( props ) { Date: Thu, 7 Mar 2024 19:17:35 +0000 Subject: [PATCH 3/3] Remove experimental connections and pattern syncing options --- lib/experimental/editor-settings.php | 6 ------ lib/experiments-page.php | 24 ------------------------ 2 files changed, 30 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 416c018679e302..3b1f5fe8b380e7 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -25,15 +25,9 @@ function gutenberg_enable_experiments() { if ( $gutenberg_experiments && array_key_exists( 'gutenberg-grid-interactivity', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGridInteractivity = true', 'before' ); } - - if ( $gutenberg_experiments && array_key_exists( 'gutenberg-connections', $gutenberg_experiments ) ) { - wp_add_inline_script( 'wp-block-editor', 'window.__experimentalConnections = true', 'before' ); - } - if ( $gutenberg_experiments && array_key_exists( 'gutenberg-styles-inheritance-ui', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalStylesInheritanceUI = true', 'before' ); } - if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) { wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' ); } diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 807f7dfa2c67aa..e4f4d691632bcc 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -127,30 +127,6 @@ function gutenberg_initialize_experiments_settings() { ) ); - add_settings_field( - 'gutenberg-custom-fields', - __( 'Connections', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Test Connections', 'gutenberg' ), - 'id' => 'gutenberg-connections', - ) - ); - - add_settings_field( - 'gutenberg-pattern-partial-syncing', - __( 'Synced patterns partial syncing', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Test partial syncing of patterns', 'gutenberg' ), - 'id' => 'gutenberg-pattern-partial-syncing', - ) - ); - add_settings_field( 'gutenberg-styles-inheritance-ui', __( 'Styles Inheritance UI', 'gutenberg' ),