From 4c50a5f729171f7c3a41a7c6093693b36ef8e580 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 22 Jun 2020 17:16:23 +0200 Subject: [PATCH 01/84] Typography panel: add line-height for the blocks that support it --- .../edit-site/src/components/sidebar/index.js | 51 ++++++++++++++++++- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index f9ede8818f64a1..f5403e4861324a 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { createSlotFill, PanelBody } from '@wordpress/components'; import { ComplementaryArea, ComplementaryAreaMoreMenuItem, @@ -9,6 +9,11 @@ import { import { __ } from '@wordpress/i18n'; import { cog, pencil } from '@wordpress/icons'; import { Platform } from '@wordpress/element'; +import { + FontSizePicker, + __experimentalLineHeightControl as LineHeightControl, +} from '@wordpress/block-editor'; +import { getBlockTypes } from '@wordpress/blocks'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' @@ -57,7 +62,49 @@ export function SidebarComplementaryAreaFills() { title={ __( 'Global Styles' ) } icon={ pencil } > -

Global Styles area

+ + { getBlockTypes() + .map( + ( { + title, + supports: { + __experimentalFontSize, + __experimentalLineHeight, + }, + } ) => { + const panels = []; + panels.push(

{ title }

); + if ( __experimentalFontSize ) { + panels.push( + + console.log( + 'change font size' + ) + } + /> + ); + } + + if ( __experimentalLineHeight ) { + panels.push( + + ); + } + + return panels.length > 1 ? panels : null; + } + ) + .filter( Boolean ) } + ); From c3d26b1ba8d061ec42b6f0ad2a9424d35b43147d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 22 Jun 2020 18:42:40 +0200 Subject: [PATCH 02/84] Show user data in controls --- lib/global-styles.php | 34 +++++++++---------- .../edit-site/src/components/sidebar/index.js | 29 ++++++++++++---- .../editor/src/components/provider/index.js | 2 +- 3 files changed, 39 insertions(+), 26 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 354ffa39744b12..e42392120da5f3 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -97,6 +97,8 @@ function gutenberg_experimental_global_styles_get_from_file( $file_path ) { /** * Returns the user's origin config. * + * @param boolean $include_draft Whether to include draft or only publish CPTs. + * * @return array Config that adheres to the theme.json schema. */ function gutenberg_experimental_global_styles_get_user() { @@ -561,15 +563,19 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { * Takes data from the different origins (core, theme, and user) * and returns the merged result. * - * @return array Merged trees. + * @param boolean $include_draft Whether to include draft or only publish CPT for user styles. + * + * @return string */ -function gutenberg_experimental_global_styles_get_merged_origins() { - $core = gutenberg_experimental_global_styles_get_core(); - $theme = gutenberg_experimental_global_styles_get_theme(); - $user = gutenberg_experimental_global_styles_get_user(); - $merged = gutenberg_experimental_global_styles_merge_trees( $core, $theme, $user ); +function gutenberg_experimental_global_styles_get_stylesheet( $include_draft = false ) { + $gs_merged = array(); + $gs_core = gutenberg_experimental_global_styles_get_core(); + $gs_theme = gutenberg_experimental_global_styles_get_theme(); + $gs_user = gutenberg_experimental_global_styles_get_user( $include_draft ); - return $merged; + $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme, $gs_user ); + + return $gs_merged; } /** @@ -645,24 +651,15 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) { */ function gutenberg_experimental_global_styles_settings( $settings ) { + $include_draft = true; if ( gutenberg_experimental_global_styles_has_theme_json_support() ) { + $settings['__experimentalGlobalStylesUser'] = gutenberg_experimental_global_styles_get_user( $include_draft ); $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); - - $global_styles = gutenberg_experimental_global_styles_merge_trees( - gutenberg_experimental_global_styles_get_core(), - gutenberg_experimental_global_styles_get_theme() - ); - - $settings['__experimentalGlobalStylesBase'] = $global_styles; } // Add the styles for the editor via the settings // so they get processed as if they were added via add_editor_styles: // they will get the editor wrapper class. - $merged = gutenberg_experimental_global_styles_get_merged_origins(); - $stylesheet = gutenberg_experimental_global_styles_resolver( $merged ); - $settings['styles'][] = array( 'css' => $stylesheet ); - $settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged ); // Unsetting deprecated settings defined by Core. @@ -670,6 +667,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { unset( $settings['disableCustomGradients'] ); unset( $settings['disableCustomFontSizes'] ); unset( $settings['enableCustomLineHeight'] ); + $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet( $include_draft ) ); return $settings; } diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index f5403e4861324a..595ab0b0dccd15 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -14,6 +14,7 @@ import { __experimentalLineHeightControl as LineHeightControl, } from '@wordpress/block-editor'; import { getBlockTypes } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' @@ -47,6 +48,18 @@ const DefaultSidebar = ( { identifier, title, icon, children } ) => { }; export function SidebarComplementaryAreaFills() { + const { + __experimentalGlobalStylesUser: userStyles, + } = useSelect( ( select ) => select( 'core/block-editor' ).getSettings() ); + + const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; + const getFontSizeValue = ( blockName ) => + fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? + null; + + const getLineHeightValue = ( blockName ) => + userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; + return ( <> { const panels = []; panels.push(

{ title }

); + if ( __experimentalFontSize ) { panels.push( console.log( 'change font size' @@ -92,10 +105,12 @@ export function SidebarComplementaryAreaFills() { if ( __experimentalLineHeight ) { panels.push( + console.log( + 'change line height' + ) + } /> ); } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index b89eae25b5a70d..a33caa4934fb4c 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -165,8 +165,8 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditing', '__experimentalEnableFullSiteEditingDemo', '__experimentalFeatures', + '__experimentalGlobalStylesUser', '__experimentalGlobalStylesUserEntityId', - '__experimentalGlobalStylesBase', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', 'alignWide', From 54c6116a3431259d7eece09f8a43bdd7f6bdd4df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 10:44:22 +0200 Subject: [PATCH 03/84] Extract to own files --- .../src/components/sidebar/default-sidebar.js | 29 +++++ .../sidebar/global-styles-sidebar.js | 80 +++++++++++++ .../edit-site/src/components/sidebar/index.js | 108 ++---------------- 3 files changed, 118 insertions(+), 99 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar/default-sidebar.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-sidebar.js diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar/default-sidebar.js new file mode 100644 index 00000000000000..d797d20b676a50 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/default-sidebar.js @@ -0,0 +1,29 @@ +/** + * WordPress dependencies + */ +import { + ComplementaryArea, + ComplementaryAreaMoreMenuItem, +} from '@wordpress/interface'; + +export default ( { identifier, title, icon, children } ) => { + return ( + <> + + { children } + + + { title } + + + ); +}; diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js new file mode 100644 index 00000000000000..c5743bfc8304b7 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -0,0 +1,80 @@ +/** + * WordPress dependencies + */ +import { PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { + FontSizePicker, + __experimentalLineHeightControl as LineHeightControl, +} from '@wordpress/block-editor'; +import { getBlockTypes } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import DefaultSidebar from './default-sidebar'; + +export default ( { identifier, title: panelTitle, icon } ) => { + const { + __experimentalGlobalStylesUser: userStyles, + } = useSelect( ( select ) => select( 'core/block-editor' ).getSettings() ); + + const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; + const getFontSizeValue = ( blockName ) => + fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? + null; + + const getLineHeightValue = ( blockName ) => + userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; + + return ( + + + { getBlockTypes() + .map( + ( { + name, + title, + supports: { + __experimentalFontSize, + __experimentalLineHeight, + }, + } ) => { + const panels = []; + panels.push(

{ title }

); + + if ( __experimentalFontSize ) { + panels.push( + + console.log( 'change font size' ) + } + /> + ); + } + + if ( __experimentalLineHeight ) { + panels.push( + + console.log( 'change line height' ) + } + /> + ); + } + + return panels.length > 1 ? panels : null; + } + ) + .filter( Boolean ) } + + + ); +}; diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 595ab0b0dccd15..d258dd43d5a59b 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -1,126 +1,36 @@ /** * WordPress dependencies */ -import { createSlotFill, PanelBody } from '@wordpress/components'; -import { - ComplementaryArea, - ComplementaryAreaMoreMenuItem, -} from '@wordpress/interface'; +import { createSlotFill } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { cog, pencil } from '@wordpress/icons'; -import { Platform } from '@wordpress/element'; -import { - FontSizePicker, - __experimentalLineHeightControl as LineHeightControl, -} from '@wordpress/block-editor'; -import { getBlockTypes } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import DefaultSidebar from './default-sidebar'; +import GlobalStylesSidebar from './global-styles-sidebar'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' ); export const SidebarInspectorFill = InspectorFill; -const BLOCK_INSPECTOR_ACTIVE_BY_DEFAULT = Platform.select( { - web: true, - native: false, -} ); - -const DefaultSidebar = ( { identifier, title, icon, children } ) => { - return ( - <> - - { children } - - - { title } - - - ); -}; export function SidebarComplementaryAreaFills() { - const { - __experimentalGlobalStylesUser: userStyles, - } = useSelect( ( select ) => select( 'core/block-editor' ).getSettings() ); - - const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; - const getFontSizeValue = ( blockName ) => - fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? - null; - - const getLineHeightValue = ( blockName ) => - userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; - return ( <> - - - { getBlockTypes() - .map( - ( { - name, - title, - supports: { - __experimentalFontSize, - __experimentalLineHeight, - }, - } ) => { - const panels = []; - panels.push(

{ title }

); - - if ( __experimentalFontSize ) { - panels.push( - - console.log( - 'change font size' - ) - } - /> - ); - } - - if ( __experimentalLineHeight ) { - panels.push( - - console.log( - 'change line height' - ) - } - /> - ); - } - - return panels.length > 1 ? panels : null; - } - ) - .filter( Boolean ) } - - + /> ); } From 6ae71b6f4b70a968e6a61b8cadfdf27ed3371b36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 11:20:42 +0200 Subject: [PATCH 04/84] Extract getters & setters to provider --- lib/global-styles.php | 5 +- .../editor/global-styles-provider.js | 48 +++++++ .../edit-site/src/components/editor/index.js | 133 ++++++++++-------- .../sidebar/global-styles-sidebar.js | 29 ++-- .../editor/src/components/provider/index.js | 2 +- 5 files changed, 137 insertions(+), 80 deletions(-) create mode 100644 packages/edit-site/src/components/editor/global-styles-provider.js diff --git a/lib/global-styles.php b/lib/global-styles.php index e42392120da5f3..87957aaa1c5406 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -653,7 +653,10 @@ function gutenberg_experimental_global_styles_settings( $settings ) { $include_draft = true; if ( gutenberg_experimental_global_styles_has_theme_json_support() ) { - $settings['__experimentalGlobalStylesUser'] = gutenberg_experimental_global_styles_get_user( $include_draft ); + $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( + gutenberg_experimental_global_styles_get_core(), + gutenberg_experimental_global_styles_get_theme() + ); $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); } diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js new file mode 100644 index 00000000000000..3a63542b26c0ee --- /dev/null +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; + +const GlobalStylesContext = createContext( { + getFontSize: () => {}, + setFontSize: () => {}, + getLineHeight: () => {}, + setLineHeight: () => {}, +} ); + +export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); + +export default ( { children, entityId, baseStyles } ) => { + // Trigger entity retrieval. + const userStyles = useSelect( ( select ) => { + const userData = select( 'core' ).getEntityRecord( + 'postType', + 'wp_global_styles', + entityId + ); + + return userData?.content?.raw ? JSON.parse( userData.content.raw ) : {}; + } ); + + const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; + const getFontSize = ( blockName ) => + fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? + null; + + const setFontSize = ( blockName, newValue ) => + console.log( 'set font size' ); + + const getLineHeight = ( blockName ) => + userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; + const setLineHeight = ( blockName, newValue ) => + console.log( 'set line height' ); + + return ( + + { children } + + ); +}; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 4e4f40e6eea864..1cc401537ad3df 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -38,6 +38,7 @@ import Header from '../header'; import { SidebarComplementaryAreaFills } from '../sidebar'; import BlockEditor from '../block-editor'; import KeyboardShortcuts from '../keyboard-shortcuts'; +import GlobalStylesProvider from './global-styles-provider'; const interfaceLabels = { leftSidebar: __( 'Block Library' ), @@ -170,36 +171,45 @@ function Editor() { > - - - -
-
-
- { - if ( - isMobile - ) { + + + + +
+
+
+ { + if ( + isMobile + ) { + setIsInserterOpen( + false + ); + } + } } + /> +
) @@ -241,40 +251,41 @@ function Editor() { } - actions={ - <> - - { ! isEntitiesSavedStatesOpen && ( -
- -
- ) } - - } - footer={ } - /> - - + actions={ + <> + + { ! isEntitiesSavedStatesOpen && ( +
+ +
+ ) } + + } + footer={ } + /> + + + diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index c5743bfc8304b7..a7777b101aeedf 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -8,25 +8,20 @@ import { __experimentalLineHeightControl as LineHeightControl, } from '@wordpress/block-editor'; import { getBlockTypes } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import DefaultSidebar from './default-sidebar'; +import { useGlobalStylesContext } from '../editor/global-styles-provider'; export default ( { identifier, title: panelTitle, icon } ) => { const { - __experimentalGlobalStylesUser: userStyles, - } = useSelect( ( select ) => select( 'core/block-editor' ).getSettings() ); - - const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; - const getFontSizeValue = ( blockName ) => - fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? - null; - - const getLineHeightValue = ( blockName ) => - userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; + getFontSize, + setFontSize, + getLineHeight, + setLineHeight, + } = useGlobalStylesContext(); return ( { if ( __experimentalFontSize ) { panels.push( - console.log( 'change font size' ) + value={ getFontSize( name ) } + onChange={ ( value ) => + setFontSize( name, value ) } /> ); @@ -62,9 +57,9 @@ export default ( { identifier, title: panelTitle, icon } ) => { if ( __experimentalLineHeight ) { panels.push( - console.log( 'change line height' ) + value={ getLineHeight( name ) } + onChange={ ( value ) => + setLineHeight( name, value ) } /> ); diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index a33caa4934fb4c..1389a0910fcadf 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -165,7 +165,7 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditing', '__experimentalEnableFullSiteEditingDemo', '__experimentalFeatures', - '__experimentalGlobalStylesUser', + '__experimentalGlobalStylesBaseStyles', '__experimentalGlobalStylesUserEntityId', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', From 4e96c1caa6f46f8c4f923ad20f73b662dda573cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 11:26:39 +0200 Subject: [PATCH 05/84] Edit entities when user interacts with controls --- .../editor/global-styles-provider.js | 31 ++++++++++++++++--- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 3a63542b26c0ee..34782371b22672 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { createContext, useContext } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; const GlobalStylesContext = createContext( { getFontSize: () => {}, @@ -14,7 +14,7 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); export default ( { children, entityId, baseStyles } ) => { - // Trigger entity retrieval. + const { editEntityRecord } = useDispatch( 'core' ); const userStyles = useSelect( ( select ) => { const userData = select( 'core' ).getEntityRecord( 'postType', @@ -25,18 +25,39 @@ export default ( { children, entityId, baseStyles } ) => { return userData?.content?.raw ? JSON.parse( userData.content.raw ) : {}; } ); + // Font Size getter & setter const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; const getFontSize = ( blockName ) => fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? null; - const setFontSize = ( blockName, newValue ) => - console.log( 'set font size' ); + editEntityRecord( 'postType', 'wp_global_styles', entityId, { + content: JSON.stringify( { + [ blockName ]: { + styles: { + typography: { + fontSize: newValue, + }, + }, + }, + } ), + } ); + // Line height getter & setter const getLineHeight = ( blockName ) => userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; const setLineHeight = ( blockName, newValue ) => - console.log( 'set line height' ); + editEntityRecord( 'postType', 'wp_global_styles', entityId, { + content: JSON.stringify( { + [ blockName ]: { + styles: { + typography: { + lineHeight: newValue, + }, + }, + }, + } ), + } ); return ( Date: Tue, 23 Jun 2020 11:35:10 +0200 Subject: [PATCH 06/84] Pass the embedded stylesheet handle to the client --- lib/global-styles.php | 31 +++++++++++++------ .../editor/global-styles-provider.js | 5 ++- .../edit-site/src/components/editor/index.js | 3 ++ 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 87957aaa1c5406..23af3eefb8913c 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -578,20 +578,25 @@ function gutenberg_experimental_global_styles_get_stylesheet( $include_draft = f return $gs_merged; } +/** + * Returns the stylesheet handle used for the embedded stylesheet. + * + * @return string Stylesheet handle. + */ +function gutenberg_experimental_global_styles_get_embedded_stylesheet_handle() { + return 'global-styles'; +} + /** * Fetches the preferences for each origin (core, theme, user) * and enqueues the resulting stylesheet. */ function gutenberg_experimental_global_styles_enqueue_assets() { - $merged = gutenberg_experimental_global_styles_get_merged_origins(); - $stylesheet = gutenberg_experimental_global_styles_resolver( $merged ); - if ( empty( $stylesheet ) ) { - return; - } - - wp_register_style( 'global-styles', false, array(), true, true ); - wp_add_inline_style( 'global-styles', $stylesheet ); - wp_enqueue_style( 'global-styles' ); + $stylesheet = gutenberg_experimental_global_styles_get_stylesheet(); + $handle = gutenberg_experimental_global_styles_get_embedded_stylesheet_handle(); + wp_register_style( $handle, false, array(), true, true ); + wp_add_inline_style( $handle, $stylesheet ); + wp_enqueue_style( $handle ); } /** @@ -653,11 +658,17 @@ function gutenberg_experimental_global_styles_settings( $settings ) { $include_draft = true; if ( gutenberg_experimental_global_styles_has_theme_json_support() ) { - $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( + // Base styles to be used to regenerate the stylesheet upon user changes in the editor. + $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme() ); + + // The CPT ID for entity retrieval/saving. $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); + + // WordPress adds the suffix '-inline-css' to the handle we pass for embedded stylesheets. + $settings['__experimentalGlobalStylesEmbeddedId'] = gutenberg_experimental_global_styles_get_embedded_stylesheet_handle() . '-inline-css'; } // Add the styles for the editor via the settings diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 34782371b22672..f3e26d3b968871 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -13,7 +13,7 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { children, entityId, baseStyles } ) => { +export default ( { children, entityId, stylesheetId, baseStyles } ) => { const { editEntityRecord } = useDispatch( 'core' ); const userStyles = useSelect( ( select ) => { const userData = select( 'core' ).getEntityRecord( @@ -25,6 +25,9 @@ export default ( { children, entityId, baseStyles } ) => { return userData?.content?.raw ? JSON.parse( userData.content.raw ) : {}; } ); + console.log( 'base styles ', baseStyles ); + console.log( 'stylesheet id ', stylesheetId ); + // Font Size getter & setter const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; const getFontSize = ( blockName ) => diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 1cc401537ad3df..e4ccd120bd3bba 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -178,6 +178,9 @@ function Editor() { baseStyles={ settings.__experimentalGlobalStylesBaseStyles } + stylesheetId={ + settings.__experimentalGlobalStylesEmbeddedId + } > From 0d884670d3faafbeaa2c60f98907da75998778c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 11:40:31 +0200 Subject: [PATCH 07/84] Save proper value for font-size --- .../edit-site/src/components/editor/global-styles-provider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index f3e26d3b968871..0f027dd76ff212 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -30,6 +30,7 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { // Font Size getter & setter const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; + const toPx = ( value ) => value + 'px'; const getFontSize = ( blockName ) => fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? null; @@ -39,7 +40,7 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { [ blockName ]: { styles: { typography: { - fontSize: newValue, + fontSize: toPx( newValue ), }, }, }, From 6be29f118f9b2e40e0b47020165b76b69a6ba649 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 12:01:17 +0200 Subject: [PATCH 08/84] Use edited data to feed controls & no overwrite existing data --- .../components/editor/global-styles-provider.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 0f027dd76ff212..85619b62478a1e 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -16,13 +16,20 @@ export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); export default ( { children, entityId, stylesheetId, baseStyles } ) => { const { editEntityRecord } = useDispatch( 'core' ); const userStyles = useSelect( ( select ) => { - const userData = select( 'core' ).getEntityRecord( + // Trigger entity retrieval + select( 'core' ).getEntityRecord( 'postType', 'wp_global_styles', entityId ); - return userData?.content?.raw ? JSON.parse( userData.content.raw ) : {}; + const userData = select( 'core' ).getEditedEntityRecord( + 'postType', + 'wp_global_styles', + entityId + ); + + return userData?.content ? JSON.parse( userData.content ) : {}; } ); console.log( 'base styles ', baseStyles ); @@ -31,15 +38,19 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { // Font Size getter & setter const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; const toPx = ( value ) => value + 'px'; + const getFontSize = ( blockName ) => fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? null; + const setFontSize = ( blockName, newValue ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { + ...userStyles, [ blockName ]: { styles: { typography: { + ...userStyles[ blockName ].styles.typography, fontSize: toPx( newValue ), }, }, @@ -53,9 +64,11 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { const setLineHeight = ( blockName, newValue ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { + ...userStyles, [ blockName ]: { styles: { typography: { + ...userStyles[ blockName ].styles.typography, lineHeight: newValue, }, }, From 0b952d7105e6772084c576a48184f21802f08d3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 12:02:28 +0200 Subject: [PATCH 09/84] Do not overwrite existing data from other styles --- .../edit-site/src/components/editor/global-styles-provider.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 85619b62478a1e..41960ea9672bf8 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -49,6 +49,7 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { ...userStyles, [ blockName ]: { styles: { + ...userStyles[ blockName ].styles, typography: { ...userStyles[ blockName ].styles.typography, fontSize: toPx( newValue ), @@ -67,6 +68,7 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { ...userStyles, [ blockName ]: { styles: { + ...userStyles[ blockName ].styles, typography: { ...userStyles[ blockName ].styles.typography, lineHeight: newValue, From 00c612654a5d56a5af8da9823fbae5319377b924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 12:24:04 +0200 Subject: [PATCH 10/84] Remove passing down handle as styles are processed via settings, not stylesheet --- lib/global-styles.php | 19 +++---------------- .../edit-site/src/components/editor/index.js | 3 --- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 23af3eefb8913c..d7b1c30edcba30 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -578,25 +578,15 @@ function gutenberg_experimental_global_styles_get_stylesheet( $include_draft = f return $gs_merged; } -/** - * Returns the stylesheet handle used for the embedded stylesheet. - * - * @return string Stylesheet handle. - */ -function gutenberg_experimental_global_styles_get_embedded_stylesheet_handle() { - return 'global-styles'; -} - /** * Fetches the preferences for each origin (core, theme, user) * and enqueues the resulting stylesheet. */ function gutenberg_experimental_global_styles_enqueue_assets() { $stylesheet = gutenberg_experimental_global_styles_get_stylesheet(); - $handle = gutenberg_experimental_global_styles_get_embedded_stylesheet_handle(); - wp_register_style( $handle, false, array(), true, true ); - wp_add_inline_style( $handle, $stylesheet ); - wp_enqueue_style( $handle ); + wp_register_style( 'global-styles', false, array(), true, true ); + wp_add_inline_style( 'global-styles', $stylesheet ); + wp_enqueue_style( 'global-styles'); } /** @@ -666,9 +656,6 @@ function gutenberg_experimental_global_styles_settings( $settings ) { // The CPT ID for entity retrieval/saving. $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); - - // WordPress adds the suffix '-inline-css' to the handle we pass for embedded stylesheets. - $settings['__experimentalGlobalStylesEmbeddedId'] = gutenberg_experimental_global_styles_get_embedded_stylesheet_handle() . '-inline-css'; } // Add the styles for the editor via the settings diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index e4ccd120bd3bba..1cc401537ad3df 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -178,9 +178,6 @@ function Editor() { baseStyles={ settings.__experimentalGlobalStylesBaseStyles } - stylesheetId={ - settings.__experimentalGlobalStylesEmbeddedId - } > From 25cfb3aaa40a389e157fbe9f08547872f81c9bb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 13:00:18 +0200 Subject: [PATCH 11/84] Add effect hook to update styles --- .../editor/global-styles-provider.js | 70 +++++++++++++++---- 1 file changed, 58 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 41960ea9672bf8..b9ba271c60fde8 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createContext, useContext } from '@wordpress/element'; +import { createContext, useContext, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; const GlobalStylesContext = createContext( { @@ -13,7 +13,34 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { children, entityId, stylesheetId, baseStyles } ) => { +export default ( { children, entityId, baseStyles } ) => { + const { + userStyles, + getFontSize, + setFontSize, + getLineHeight, + setLineHeight, + } = useGlobalStylesFromEntities( entityId ); + + useGlobalStylesEffectToUpdateStylesheet( baseStyles, userStyles ); + + return ( + + { children } + + ); +}; + +/** + * Hook that exposes an API to retrieve and update user styles. + * + * @param {number} entityId Entity that stores the user data as CPT. + * + * @return {Object} User data as well as getters and setters. + */ +const useGlobalStylesFromEntities = ( entityId ) => { const { editEntityRecord } = useDispatch( 'core' ); const userStyles = useSelect( ( select ) => { // Trigger entity retrieval @@ -32,9 +59,6 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { return userData?.content ? JSON.parse( userData.content ) : {}; } ); - console.log( 'base styles ', baseStyles ); - console.log( 'stylesheet id ', stylesheetId ); - // Font Size getter & setter const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; const toPx = ( value ) => value + 'px'; @@ -78,11 +102,33 @@ export default ( { children, entityId, stylesheetId, baseStyles } ) => { } ), } ); - return ( - - { children } - - ); + return { + userStyles, + getFontSize, + setFontSize, + getLineHeight, + setLineHeight, + }; +}; + +const useGlobalStylesEffectToUpdateStylesheet = ( baseStyles, userStyles ) => { + useEffect( () => { + const embeddedStylesheetId = 'user-generated-global-styles-inline-css'; + let styleNode = document.getElementById( embeddedStylesheetId ); + + if ( ! styleNode ) { + styleNode = document.createElement( 'style' ); + styleNode.id = embeddedStylesheetId; + document + .getElementsByTagName( 'head' )[ 0 ] + .appendChild( styleNode ); + } + + // TODO: look at how to hook into the styles generation + // so we can avoid having to increase the class specificity here. + styleNode.innerText = `.editor-styles-wrapper.editor-styles-wrapper p { + font-size: 42px; + line-height: 2; + }`; + }, [ baseStyles, userStyles ] ); }; From ac89dcf53fcd0f38873db62cfcda9fd8522a9ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 14:13:35 +0200 Subject: [PATCH 12/84] Update stylesheet from user data --- .../editor/global-styles-provider.js | 61 +++++++++++++++++-- 1 file changed, 56 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index b9ba271c60fde8..0429feaa4ad76a 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -3,6 +3,7 @@ */ import { createContext, useContext, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; +import { getBlockType } from '@wordpress/blocks'; const GlobalStylesContext = createContext( { getFontSize: () => {}, @@ -124,11 +125,61 @@ const useGlobalStylesEffectToUpdateStylesheet = ( baseStyles, userStyles ) => { .appendChild( styleNode ); } + styleNode.innerText = getStylesFromTree( + mergeTrees( baseStyles, userStyles ) + ); + }, [ baseStyles, userStyles ] ); +}; + +const mergeTrees = ( base, user ) => { + //TODO: merge trees + return user; +}; + +const getStylesFromTree = ( tree ) => { + const styles = []; + const getSelector = ( blockName ) => { + const { + name, + supports: { __experimentalSelector }, + } = getBlockType( blockName ); + let selector = '.wp-block-' + name; + if ( + __experimentalSelector && + 'string' === typeof __experimentalSelector + ) { + selector = __experimentalSelector; + } + return selector; + }; + + const getStyleDeclarations = ( blockStyles ) => { + const declarations = []; + if ( blockStyles?.typography?.fontSize ) { + declarations.push( + `font-size: ${ blockStyles.typography.fontSize }` + ); + } + if ( blockStyles?.typography?.lineHeight ) { + declarations.push( + `line-height: ${ blockStyles.typography.lineHeight }` + ); + } + return declarations.join( ';' ); + }; + + Object.keys( tree ).forEach( ( blockName ) => { + const blockSelector = getSelector( blockName ); + const blockDeclarations = getStyleDeclarations( + tree[ blockName ]?.styles + ); + // TODO: look at how to hook into the styles generation // so we can avoid having to increase the class specificity here. - styleNode.innerText = `.editor-styles-wrapper.editor-styles-wrapper p { - font-size: 42px; - line-height: 2; - }`; - }, [ baseStyles, userStyles ] ); + styles.push( + `.editor-styles-wrapper.editor-styles-wrapper ${ blockSelector } { ${ blockDeclarations } }` + ); + } ); + + return styles.join( '\n' ); }; From c0ef0b32834ccef2bd9084f06dc52e27a414c9cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 14:21:25 +0200 Subject: [PATCH 13/84] Account for blocks that do not define a particular property --- .../components/editor/global-styles-provider.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 0429feaa4ad76a..714ebde4e18a51 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -60,23 +60,21 @@ const useGlobalStylesFromEntities = ( entityId ) => { return userData?.content ? JSON.parse( userData.content ) : {}; } ); - // Font Size getter & setter - const fromPx = ( value ) => +value?.replace( 'px', '' ) ?? null; - const toPx = ( value ) => value + 'px'; - + // Font size getter & setter + const fromPx = ( value ) => ( value ? +value.replace( 'px', '' ) : null ); + const toPx = ( value ) => ( value ? value + 'px' : null ); const getFontSize = ( blockName ) => fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? null; - const setFontSize = ( blockName, newValue ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { ...userStyles, [ blockName ]: { styles: { - ...userStyles[ blockName ].styles, + ...userStyles?.[ blockName ]?.styles, typography: { - ...userStyles[ blockName ].styles.typography, + ...userStyles?.[ blockName ]?.styles?.typography, fontSize: toPx( newValue ), }, }, @@ -93,9 +91,9 @@ const useGlobalStylesFromEntities = ( entityId ) => { ...userStyles, [ blockName ]: { styles: { - ...userStyles[ blockName ].styles, + ...userStyles?.[ blockName ]?.styles, typography: { - ...userStyles[ blockName ].styles.typography, + ...userStyles?.[ blockName ]?.styles?.typography, lineHeight: newValue, }, }, From 4c1e497a6b54113ef6034636dc6f723057918c58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 14:24:17 +0200 Subject: [PATCH 14/84] Remove line breaks from stylesheet --- .../edit-site/src/components/editor/global-styles-provider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 714ebde4e18a51..a89753c2fda900 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -179,5 +179,5 @@ const getStylesFromTree = ( tree ) => { ); } ); - return styles.join( '\n' ); + return styles.join( '' ); }; From 62ded6b4301a0fccaf9bc6a8a21e9ac11f7c166c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 14:46:49 +0200 Subject: [PATCH 15/84] Add skeleton for color panel --- .../sidebar/global-styles-sidebar.js | 43 ++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index a7777b101aeedf..160b514ae753d7 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { PanelBody } from '@wordpress/components'; +import { ColorPalette, PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { FontSizePicker, @@ -70,6 +70,47 @@ export default ( { identifier, title: panelTitle, icon } ) => { ) .filter( Boolean ) } + + { getBlockTypes() + .map( + ( { + name, + title, + supports: { __experimentalColor }, + } ) => { + const panels = []; + panels.push(

{ title }

); + + if ( __experimentalColor ) { + // TODO: text & background color + panels.push( + + console.log( 'change color' ) + } + /> + ); + } + + if ( __experimentalColor?.gradients ) { + // TODO: do gradients + } + + if ( __experimentalColor?.linkColor ) { + // TODO: do link color + } + + return panels.length > 1 ? panels : null; + } + ) + .filter( Boolean ) } + ); }; From ac655f51275fb76fda0a05aea42febe4dee4d621 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 14:55:37 +0200 Subject: [PATCH 16/84] Remove base styles as we only need to generate user styles --- lib/global-styles.php | 6 ------ .../components/editor/global-styles-provider.js | 17 +++++------------ .../edit-site/src/components/editor/index.js | 3 --- .../editor/src/components/provider/index.js | 1 - 4 files changed, 5 insertions(+), 22 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index d7b1c30edcba30..6b83723e7a85c8 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -648,12 +648,6 @@ function gutenberg_experimental_global_styles_settings( $settings ) { $include_draft = true; if ( gutenberg_experimental_global_styles_has_theme_json_support() ) { - // Base styles to be used to regenerate the stylesheet upon user changes in the editor. - $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( - gutenberg_experimental_global_styles_get_core(), - gutenberg_experimental_global_styles_get_theme() - ); - // The CPT ID for entity retrieval/saving. $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); } diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index a89753c2fda900..c8a393f0fc82c1 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -14,7 +14,7 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { children, entityId, baseStyles } ) => { +export default ( { children, entityId } ) => { const { userStyles, getFontSize, @@ -23,7 +23,7 @@ export default ( { children, entityId, baseStyles } ) => { setLineHeight, } = useGlobalStylesFromEntities( entityId ); - useGlobalStylesEffectToUpdateStylesheet( baseStyles, userStyles ); + useGlobalStylesEffectToUpdateStylesheet( userStyles ); return ( { }; }; -const useGlobalStylesEffectToUpdateStylesheet = ( baseStyles, userStyles ) => { +const useGlobalStylesEffectToUpdateStylesheet = ( userStyles ) => { useEffect( () => { const embeddedStylesheetId = 'user-generated-global-styles-inline-css'; let styleNode = document.getElementById( embeddedStylesheetId ); @@ -123,15 +123,8 @@ const useGlobalStylesEffectToUpdateStylesheet = ( baseStyles, userStyles ) => { .appendChild( styleNode ); } - styleNode.innerText = getStylesFromTree( - mergeTrees( baseStyles, userStyles ) - ); - }, [ baseStyles, userStyles ] ); -}; - -const mergeTrees = ( base, user ) => { - //TODO: merge trees - return user; + styleNode.innerText = getStylesFromTree( userStyles ); + }, [ userStyles ] ); }; const getStylesFromTree = ( tree ) => { diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 1cc401537ad3df..4b4357f0165562 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -175,9 +175,6 @@ function Editor() { entityId={ settings.__experimentalGlobalStylesUserEntityId } - baseStyles={ - settings.__experimentalGlobalStylesBaseStyles - } > diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 1389a0910fcadf..3f0424f29c7e16 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -165,7 +165,6 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditing', '__experimentalEnableFullSiteEditingDemo', '__experimentalFeatures', - '__experimentalGlobalStylesBaseStyles', '__experimentalGlobalStylesUserEntityId', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', From 0c4e8dc05bb046881ea2d0a3f38a83f4e23462b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 17:07:02 +0200 Subject: [PATCH 17/84] Add colors --- .../editor/global-styles-provider.js | 105 +++++++++++++++++- .../sidebar/global-styles-sidebar.js | 64 +++++++---- 2 files changed, 143 insertions(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index c8a393f0fc82c1..35b98768cbafb6 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -10,6 +10,12 @@ const GlobalStylesContext = createContext( { setFontSize: () => {}, getLineHeight: () => {}, setLineHeight: () => {}, + getTextColor: () => {}, + setTextColor: () => {}, + getBackgroundColor: () => {}, + setBackgroundColor: () => {}, + getLinkColor: () => {}, + setLinkColor: () => {}, } ); export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); @@ -21,13 +27,30 @@ export default ( { children, entityId } ) => { setFontSize, getLineHeight, setLineHeight, + getTextColor, + setTextColor, + getBackgroundColor, + setBackgroundColor, + getLinkColor, + setLinkColor, } = useGlobalStylesFromEntities( entityId ); useGlobalStylesEffectToUpdateStylesheet( userStyles ); return ( { children } @@ -60,7 +83,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { return userData?.content ? JSON.parse( userData.content ) : {}; } ); - // Font size getter & setter + // Font size: getter & setter const fromPx = ( value ) => ( value ? +value.replace( 'px', '' ) : null ); const toPx = ( value ) => ( value ? value + 'px' : null ); const getFontSize = ( blockName ) => @@ -82,7 +105,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { } ), } ); - // Line height getter & setter + // Line height: getter & setter const getLineHeight = ( blockName ) => userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; const setLineHeight = ( blockName, newValue ) => @@ -101,12 +124,75 @@ const useGlobalStylesFromEntities = ( entityId ) => { } ), } ); + // Text color: getter & setter + const getTextColor = ( blockName ) => + userStyles?.[ blockName ]?.styles?.color?.textColor; + const setTextColor = ( blockName, newValue ) => + editEntityRecord( 'postType', 'wp_global_styles', entityId, { + content: JSON.stringify( { + ...userStyles, + [ blockName ]: { + styles: { + ...userStyles?.[ blockName ]?.styles, + color: { + ...userStyles?.[ blockName ]?.styles?.color, + textColor: newValue, + }, + }, + }, + } ), + } ); + + // Background color: getter & setter + const getBackgroundColor = ( blockName ) => + userStyles?.[ blockName ]?.styles?.color?.backgroundColor; + const setBackgroundColor = ( blockName, newValue ) => + editEntityRecord( 'postType', 'wp_global_styles', entityId, { + content: JSON.stringify( { + ...userStyles, + [ blockName ]: { + styles: { + ...userStyles?.[ blockName ]?.styles, + color: { + ...userStyles?.[ blockName ]?.styles?.color, + backgroundColor: newValue, + }, + }, + }, + } ), + } ); + + // Link color: getter & setter + const getLinkColor = ( blockName ) => + userStyles?.[ blockName ]?.styles?.color?.linkColor; + const setLinkColor = ( blockName, newValue ) => + editEntityRecord( 'postType', 'wp_global_styles', entityId, { + content: JSON.stringify( { + ...userStyles, + [ blockName ]: { + styles: { + ...userStyles?.[ blockName ]?.styles, + color: { + ...userStyles?.[ blockName ]?.styles?.color, + linkColor: newValue, + }, + }, + }, + } ), + } ); + return { userStyles, getFontSize, setFontSize, getLineHeight, setLineHeight, + getTextColor, + setTextColor, + getBackgroundColor, + setBackgroundColor, + getLinkColor, + setLinkColor, }; }; @@ -156,6 +242,19 @@ const getStylesFromTree = ( tree ) => { `line-height: ${ blockStyles.typography.lineHeight }` ); } + if ( blockStyles?.color?.textColor ) { + declarations.push( `color: ${ blockStyles.color.textColor }` ); + } + if ( blockStyles?.color?.backgroundColor ) { + declarations.push( + `background-color: ${ blockStyles.color.backgroundColor }` + ); + } + if ( blockStyles?.color?.linkColor ) { + declarations.push( + `--wp--style--color--link: ${ blockStyles.color.linkColor }` + ); + } return declarations.join( ';' ); }; diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index 160b514ae753d7..ca4d1d017b89a7 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -1,11 +1,12 @@ /** * WordPress dependencies */ -import { ColorPalette, PanelBody } from '@wordpress/components'; +import { PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { - FontSizePicker, __experimentalLineHeightControl as LineHeightControl, + FontSizePicker, + PanelColorSettings, } from '@wordpress/block-editor'; import { getBlockTypes } from '@wordpress/blocks'; @@ -21,6 +22,12 @@ export default ( { identifier, title: panelTitle, icon } ) => { setFontSize, getLineHeight, setLineHeight, + getBackgroundColor, + setBackgroundColor, + getTextColor, + setTextColor, + getLinkColor, + setLinkColor, } = useGlobalStylesContext(); return ( @@ -29,7 +36,7 @@ export default ( { identifier, title: panelTitle, icon } ) => { title={ panelTitle } icon={ icon } > - + { getBlockTypes() .map( ( { @@ -70,7 +77,8 @@ export default ( { identifier, title: panelTitle, icon } ) => { ) .filter( Boolean ) } - + + { getBlockTypes() .map( ( { @@ -78,24 +86,20 @@ export default ( { identifier, title: panelTitle, icon } ) => { title, supports: { __experimentalColor }, } ) => { - const panels = []; - panels.push(

{ title }

); - + const settings = []; if ( __experimentalColor ) { - // TODO: text & background color - panels.push( - - console.log( 'change color' ) - } - /> - ); + settings.push( { + value: getTextColor( name ), + onChange: ( value ) => + setTextColor( name, value ), + label: __( 'Text color' ), + } ); + settings.push( { + value: getBackgroundColor( name ), + onChange: ( value ) => + setBackgroundColor( name, value ), + label: __( 'Background color' ), + } ); } if ( __experimentalColor?.gradients ) { @@ -103,10 +107,24 @@ export default ( { identifier, title: panelTitle, icon } ) => { } if ( __experimentalColor?.linkColor ) { - // TODO: do link color + settings.push( { + value: getLinkColor( name ), + onChange: ( value ) => + setLinkColor( name, value ), + label: __( 'Link color' ), + } ); } - return panels.length > 1 ? panels : null; + if ( settings.length > 0 ) { + return ( + + ); + } + + return null; } ) .filter( Boolean ) } From 31a8b1a34e2a1486cc5ef8b1cb366bd1f07428b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 17:14:58 +0200 Subject: [PATCH 18/84] Work only with published CPT for user data --- lib/global-styles.php | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 6b83723e7a85c8..a62f8de05cf548 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -563,15 +563,13 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { * Takes data from the different origins (core, theme, and user) * and returns the merged result. * - * @param boolean $include_draft Whether to include draft or only publish CPT for user styles. - * * @return string */ -function gutenberg_experimental_global_styles_get_stylesheet( $include_draft = false ) { +function gutenberg_experimental_global_styles_get_stylesheet() { $gs_merged = array(); $gs_core = gutenberg_experimental_global_styles_get_core(); $gs_theme = gutenberg_experimental_global_styles_get_theme(); - $gs_user = gutenberg_experimental_global_styles_get_user( $include_draft ); + $gs_user = gutenberg_experimental_global_styles_get_user(); $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme, $gs_user ); From f0b0293bcb8fcbc92c4273eb76522114c92be1fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 17:15:19 +0200 Subject: [PATCH 19/84] Fix phpdocs --- lib/global-styles.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index a62f8de05cf548..5de684d3214344 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -97,8 +97,6 @@ function gutenberg_experimental_global_styles_get_from_file( $file_path ) { /** * Returns the user's origin config. * - * @param boolean $include_draft Whether to include draft or only publish CPTs. - * * @return array Config that adheres to the theme.json schema. */ function gutenberg_experimental_global_styles_get_user() { From 56850d5ce939114916900438f2e69bc51ee73081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 17:22:42 +0200 Subject: [PATCH 20/84] Fix color names --- .../editor/global-styles-provider.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 35b98768cbafb6..f58a791f5adb1c 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -126,7 +126,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { // Text color: getter & setter const getTextColor = ( blockName ) => - userStyles?.[ blockName ]?.styles?.color?.textColor; + userStyles?.[ blockName ]?.styles?.color?.text; const setTextColor = ( blockName, newValue ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { @@ -136,7 +136,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { ...userStyles?.[ blockName ]?.styles, color: { ...userStyles?.[ blockName ]?.styles?.color, - textColor: newValue, + text: newValue, }, }, }, @@ -145,7 +145,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { // Background color: getter & setter const getBackgroundColor = ( blockName ) => - userStyles?.[ blockName ]?.styles?.color?.backgroundColor; + userStyles?.[ blockName ]?.styles?.color?.background; const setBackgroundColor = ( blockName, newValue ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { @@ -155,7 +155,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { ...userStyles?.[ blockName ]?.styles, color: { ...userStyles?.[ blockName ]?.styles?.color, - backgroundColor: newValue, + background: newValue, }, }, }, @@ -164,7 +164,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { // Link color: getter & setter const getLinkColor = ( blockName ) => - userStyles?.[ blockName ]?.styles?.color?.linkColor; + userStyles?.[ blockName ]?.styles?.color?.link; const setLinkColor = ( blockName, newValue ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { @@ -174,7 +174,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { ...userStyles?.[ blockName ]?.styles, color: { ...userStyles?.[ blockName ]?.styles?.color, - linkColor: newValue, + link: newValue, }, }, }, @@ -242,17 +242,17 @@ const getStylesFromTree = ( tree ) => { `line-height: ${ blockStyles.typography.lineHeight }` ); } - if ( blockStyles?.color?.textColor ) { - declarations.push( `color: ${ blockStyles.color.textColor }` ); + if ( blockStyles?.color?.text ) { + declarations.push( `color: ${ blockStyles.color.text }` ); } - if ( blockStyles?.color?.backgroundColor ) { + if ( blockStyles?.color?.background ) { declarations.push( - `background-color: ${ blockStyles.color.backgroundColor }` + `background-color: ${ blockStyles.color.background }` ); } - if ( blockStyles?.color?.linkColor ) { + if ( blockStyles?.color?.link ) { declarations.push( - `--wp--style--color--link: ${ blockStyles.color.linkColor }` + `--wp--style--color--link: ${ blockStyles.color.link }` ); } return declarations.join( ';' ); From f69f437c6c1f24ec013f97b6e81622e705cad5e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 18:00:38 +0200 Subject: [PATCH 21/84] Compact API: expose only getProperty / setProperty --- .../editor/global-styles-provider.js | 152 +++--------------- .../sidebar/global-styles-sidebar.js | 74 ++++++--- 2 files changed, 77 insertions(+), 149 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index f58a791f5adb1c..48decafbb1ef51 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -6,16 +6,8 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { getBlockType } from '@wordpress/blocks'; const GlobalStylesContext = createContext( { - getFontSize: () => {}, - setFontSize: () => {}, - getLineHeight: () => {}, - setLineHeight: () => {}, - getTextColor: () => {}, - setTextColor: () => {}, - getBackgroundColor: () => {}, - setBackgroundColor: () => {}, - getLinkColor: () => {}, - setLinkColor: () => {}, + getProperty: ( context, family, name, units ) => {}, + setProperty: ( context, family, name, value, units ) => {}, } ); export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); @@ -23,16 +15,8 @@ export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); export default ( { children, entityId } ) => { const { userStyles, - getFontSize, - setFontSize, - getLineHeight, - setLineHeight, - getTextColor, - setTextColor, - getBackgroundColor, - setBackgroundColor, - getLinkColor, - setLinkColor, + getProperty, + setProperty, } = useGlobalStylesFromEntities( entityId ); useGlobalStylesEffectToUpdateStylesheet( userStyles ); @@ -40,16 +24,8 @@ export default ( { children, entityId } ) => { return ( { children } @@ -83,98 +59,30 @@ const useGlobalStylesFromEntities = ( entityId ) => { return userData?.content ? JSON.parse( userData.content ) : {}; } ); - // Font size: getter & setter - const fromPx = ( value ) => ( value ? +value.replace( 'px', '' ) : null ); - const toPx = ( value ) => ( value ? value + 'px' : null ); - const getFontSize = ( blockName ) => - fromPx( userStyles?.[ blockName ]?.styles?.typography?.fontSize ) ?? - null; - const setFontSize = ( blockName, newValue ) => - editEntityRecord( 'postType', 'wp_global_styles', entityId, { - content: JSON.stringify( { - ...userStyles, - [ blockName ]: { - styles: { - ...userStyles?.[ blockName ]?.styles, - typography: { - ...userStyles?.[ blockName ]?.styles?.typography, - fontSize: toPx( newValue ), - }, - }, - }, - } ), - } ); - - // Line height: getter & setter - const getLineHeight = ( blockName ) => - userStyles?.[ blockName ]?.styles?.typography?.lineHeight ?? null; - const setLineHeight = ( blockName, newValue ) => - editEntityRecord( 'postType', 'wp_global_styles', entityId, { - content: JSON.stringify( { - ...userStyles, - [ blockName ]: { - styles: { - ...userStyles?.[ blockName ]?.styles, - typography: { - ...userStyles?.[ blockName ]?.styles?.typography, - lineHeight: newValue, - }, - }, - }, - } ), - } ); - - // Text color: getter & setter - const getTextColor = ( blockName ) => - userStyles?.[ blockName ]?.styles?.color?.text; - const setTextColor = ( blockName, newValue ) => - editEntityRecord( 'postType', 'wp_global_styles', entityId, { - content: JSON.stringify( { - ...userStyles, - [ blockName ]: { - styles: { - ...userStyles?.[ blockName ]?.styles, - color: { - ...userStyles?.[ blockName ]?.styles?.color, - text: newValue, - }, - }, - }, - } ), - } ); + const fromUnits = { + noop: ( value ) => value, + px: ( value ) => ( value ? +value.replace( 'px', '' ) : null ), + }; + const toUnits = { + noop: ( value ) => value, + px: ( value ) => ( value ? value + 'px' : null ), + }; - // Background color: getter & setter - const getBackgroundColor = ( blockName ) => - userStyles?.[ blockName ]?.styles?.color?.background; - const setBackgroundColor = ( blockName, newValue ) => - editEntityRecord( 'postType', 'wp_global_styles', entityId, { - content: JSON.stringify( { - ...userStyles, - [ blockName ]: { - styles: { - ...userStyles?.[ blockName ]?.styles, - color: { - ...userStyles?.[ blockName ]?.styles?.color, - background: newValue, - }, - }, - }, - } ), - } ); + const getProperty = ( context, family, name, units = 'noop' ) => + fromUnits[ units ]( + userStyles?.[ context ]?.styles?.[ family ]?.[ name ] + ); - // Link color: getter & setter - const getLinkColor = ( blockName ) => - userStyles?.[ blockName ]?.styles?.color?.link; - const setLinkColor = ( blockName, newValue ) => + const setProperty = ( context, family, name, value, units = 'noop' ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { ...userStyles, - [ blockName ]: { + [ context ]: { styles: { - ...userStyles?.[ blockName ]?.styles, - color: { - ...userStyles?.[ blockName ]?.styles?.color, - link: newValue, + ...userStyles?.[ context ]?.styles, + [ family ]: { + ...userStyles?.[ context ]?.styles?.[ family ], + [ name ]: toUnits[ units ]( value ), }, }, }, @@ -183,16 +91,8 @@ const useGlobalStylesFromEntities = ( entityId ) => { return { userStyles, - getFontSize, - setFontSize, - getLineHeight, - setLineHeight, - getTextColor, - setTextColor, - getBackgroundColor, - setBackgroundColor, - getLinkColor, - setLinkColor, + getProperty, + setProperty, }; }; diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index ca4d1d017b89a7..55dd9daf2c1ebe 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -17,18 +17,7 @@ import DefaultSidebar from './default-sidebar'; import { useGlobalStylesContext } from '../editor/global-styles-provider'; export default ( { identifier, title: panelTitle, icon } ) => { - const { - getFontSize, - setFontSize, - getLineHeight, - setLineHeight, - getBackgroundColor, - setBackgroundColor, - getTextColor, - setTextColor, - getLinkColor, - setLinkColor, - } = useGlobalStylesContext(); + const { getProperty, setProperty } = useGlobalStylesContext(); return ( { if ( __experimentalFontSize ) { panels.push( - setFontSize( name, value ) + setProperty( + name, + 'typography', + 'fontSize', + value, + 'px' + ) } /> ); @@ -64,9 +64,18 @@ export default ( { identifier, title: panelTitle, icon } ) => { if ( __experimentalLineHeight ) { panels.push( - setLineHeight( name, value ) + setProperty( + name, + 'typography', + 'lineHeight', + value + ) } /> ); @@ -78,7 +87,7 @@ export default ( { identifier, title: panelTitle, icon } ) => { .filter( Boolean ) } - + { getBlockTypes() .map( ( { @@ -89,15 +98,29 @@ export default ( { identifier, title: panelTitle, icon } ) => { const settings = []; if ( __experimentalColor ) { settings.push( { - value: getTextColor( name ), + value: getProperty( name, 'color', 'text' ), onChange: ( value ) => - setTextColor( name, value ), + setProperty( + name, + 'color', + 'text', + value + ), label: __( 'Text color' ), } ); settings.push( { - value: getBackgroundColor( name ), + value: getProperty( + name, + 'color', + 'background' + ), onChange: ( value ) => - setBackgroundColor( name, value ), + setProperty( + name, + 'color', + 'background', + value + ), label: __( 'Background color' ), } ); } @@ -108,9 +131,14 @@ export default ( { identifier, title: panelTitle, icon } ) => { if ( __experimentalColor?.linkColor ) { settings.push( { - value: getLinkColor( name ), + value: getProperty( name, 'color', 'link' ), onChange: ( value ) => - setLinkColor( name, value ), + setProperty( + name, + 'color', + 'link', + value + ), label: __( 'Link color' ), } ); } From 3c9b3a636da90bc0e3a2d1fe4b99efb1e9440c00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 18:25:13 +0200 Subject: [PATCH 22/84] Create panels per block --- .../sidebar/global-styles-sidebar.js | 208 ++++++++---------- 1 file changed, 93 insertions(+), 115 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index 55dd9daf2c1ebe..81511ccb4923e9 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -25,138 +25,116 @@ export default ( { identifier, title: panelTitle, icon } ) => { title={ panelTitle } icon={ icon } > - - { getBlockTypes() - .map( - ( { - name, - title, - supports: { - __experimentalFontSize, - __experimentalLineHeight, - }, - } ) => { - const panels = []; - panels.push(

{ title }

); + { getBlockTypes() + .map( + ( { + name, + title, + supports: { + __experimentalFontSize, + __experimentalLineHeight, + __experimentalColor, + }, + } ) => { + const panels = []; - if ( __experimentalFontSize ) { - panels.push( - + setProperty( name, 'typography', 'fontSize', + value, 'px' - ) } - onChange={ ( value ) => - setProperty( - name, - 'typography', - 'fontSize', - value, - 'px' - ) - } - /> - ); - } - - if ( __experimentalLineHeight ) { - panels.push( - - setProperty( - name, - 'typography', - 'lineHeight', - value - ) - } - /> - ); - } - - return panels.length > 1 ? panels : null; + ) + } + /> + ); } - ) - .filter( Boolean ) } - - - { getBlockTypes() - .map( - ( { - name, - title, - supports: { __experimentalColor }, - } ) => { - const settings = []; - if ( __experimentalColor ) { - settings.push( { - value: getProperty( name, 'color', 'text' ), - onChange: ( value ) => + if ( __experimentalLineHeight ) { + panels.push( + setProperty( name, - 'color', - 'text', + 'typography', + 'lineHeight', value - ), - label: __( 'Text color' ), - } ); - settings.push( { - value: getProperty( + ) + } + /> + ); + } + + const settings = []; + if ( __experimentalColor ) { + settings.push( { + value: getProperty( name, 'color', 'text' ), + onChange: ( value ) => + setProperty( name, 'color', 'text', value ), + label: __( 'Text color' ), + } ); + settings.push( { + value: getProperty( + name, + 'color', + 'background' + ), + onChange: ( value ) => + setProperty( name, 'color', - 'background' + 'background', + value ), - onChange: ( value ) => - setProperty( - name, - 'color', - 'background', - value - ), - label: __( 'Background color' ), - } ); - } - - if ( __experimentalColor?.gradients ) { - // TODO: do gradients - } + label: __( 'Background color' ), + } ); + } - if ( __experimentalColor?.linkColor ) { - settings.push( { - value: getProperty( name, 'color', 'link' ), - onChange: ( value ) => - setProperty( - name, - 'color', - 'link', - value - ), - label: __( 'Link color' ), - } ); - } + if ( __experimentalColor?.gradients ) { + // TODO: do gradients + } - if ( settings.length > 0 ) { - return ( - - ); - } + if ( __experimentalColor?.linkColor ) { + settings.push( { + value: getProperty( name, 'color', 'link' ), + onChange: ( value ) => + setProperty( name, 'color', 'link', value ), + label: __( 'Link color' ), + } ); + } - return null; + if ( settings.length > 0 ) { + panels.push( + + ); } - ) - .filter( Boolean ) } - + + return panels.length > 0 ? ( + + { panels } + + ) : null; + } + ) + .filter( Boolean ) } ); }; From 7bc6cb760957e2e61d973fea691d916414bf3c57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 23 Jun 2020 18:26:40 +0200 Subject: [PATCH 23/84] Do not render heading block yet --- .../src/components/sidebar/global-styles-sidebar.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index 81511ccb4923e9..8f6432f5b19375 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -38,6 +38,11 @@ export default ( { identifier, title: panelTitle, icon } ) => { } ) => { const panels = []; + if ( 'core/heading' === name ) { + //TODO: process heading as separate blocks + return null; + } + if ( __experimentalFontSize ) { panels.push( Date: Tue, 23 Jun 2020 18:32:18 +0200 Subject: [PATCH 24/84] Fix selector for core blocks --- .../edit-site/src/components/editor/global-styles-provider.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 48decafbb1ef51..1c393cce0151eb 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -6,8 +6,10 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { getBlockType } from '@wordpress/blocks'; const GlobalStylesContext = createContext( { + /* eslint-disable no-unused-vars */ getProperty: ( context, family, name, units ) => {}, setProperty: ( context, family, name, value, units ) => {}, + /* eslint-enable no-unused-vars */ } ); export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); @@ -120,7 +122,7 @@ const getStylesFromTree = ( tree ) => { name, supports: { __experimentalSelector }, } = getBlockType( blockName ); - let selector = '.wp-block-' + name; + let selector = '.wp-block-' + name.replace( 'core/', '' ); if ( __experimentalSelector && 'string' === typeof __experimentalSelector From 7b30c5d0c2ad4d91d67ad7908b02b4d9470f2978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 24 Jun 2020 21:24:34 +0200 Subject: [PATCH 25/84] PoC for global context --- lib/global-styles.php | 13 ++ .../editor/global-styles-provider.js | 10 +- .../edit-site/src/components/editor/index.js | 3 + .../src/components/sidebar/block-panel.js | 139 ++++++++++++++++++ .../src/components/sidebar/global-panel.js | 76 ++++++++++ .../sidebar/global-styles-sidebar.js | 139 ++---------------- .../editor/src/components/provider/index.js | 1 + 7 files changed, 256 insertions(+), 125 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar/block-panel.js create mode 100644 packages/edit-site/src/components/sidebar/global-panel.js diff --git a/lib/global-styles.php b/lib/global-styles.php index 5de684d3214344..0083933be3e630 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -288,6 +288,18 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) return $supported_features; } +/** + * Return the data for the global context. + * + * @return array + */ +function gutenberg_experimental_global_styles_get_global_context() { + return array( + 'selector' => ':root', + 'supports' => array( 'background-color', '--wp--style--color--link', 'font-size' ), + ); +} + /** * Retrieves the block data (selector/supports). * @@ -646,6 +658,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { if ( gutenberg_experimental_global_styles_has_theme_json_support() ) { // The CPT ID for entity retrieval/saving. $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); + $settings['__experimentalGlobalStylesGlobalContext'] = gutenberg_experimental_global_styles_get_global_context(); } // Add the styles for the editor via the settings diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 1c393cce0151eb..1f3b831857135e 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -9,12 +9,13 @@ const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ getProperty: ( context, family, name, units ) => {}, setProperty: ( context, family, name, value, units ) => {}, + globalContext: {}, /* eslint-enable no-unused-vars */ } ); export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { children, entityId } ) => { +export default ( { children, entityId, globalContext } ) => { const { userStyles, getProperty, @@ -28,6 +29,7 @@ export default ( { children, entityId } ) => { value={ { getProperty, setProperty, + globalContext, } } > { children } @@ -117,11 +119,17 @@ const useGlobalStylesEffectToUpdateStylesheet = ( userStyles ) => { const getStylesFromTree = ( tree ) => { const styles = []; + const getSelector = ( blockName ) => { + if ( 'global' === blockName ) { + return ''; // We use the .editor-styles-wrapper for this one + } + const { name, supports: { __experimentalSelector }, } = getBlockType( blockName ); + let selector = '.wp-block-' + name.replace( 'core/', '' ); if ( __experimentalSelector && diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 4b4357f0165562..13d7544c798898 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -175,6 +175,9 @@ function Editor() { entityId={ settings.__experimentalGlobalStylesUserEntityId } + globalContext={ + settings.__experimentalGlobalStylesGlobalContext + } > diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js new file mode 100644 index 00000000000000..3bb00d74aad1b1 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -0,0 +1,139 @@ +/** + * WordPress dependencies + */ +import { PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { + __experimentalLineHeightControl as LineHeightControl, + FontSizePicker, + PanelColorSettings, +} from '@wordpress/block-editor'; +import { getBlockTypes } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { useGlobalStylesContext } from '../editor/global-styles-provider'; + +export default () => { + const { getProperty, setProperty } = useGlobalStylesContext(); + return ( + <> + { getBlockTypes() + .map( + ( { + name, + title, + supports: { + __experimentalFontSize, + __experimentalLineHeight, + __experimentalColor, + }, + } ) => { + const panels = []; + + if ( 'core/heading' === name ) { + //TODO: process heading as separate blocks + return null; + } + + if ( __experimentalFontSize ) { + panels.push( + + setProperty( + name, + 'typography', + 'fontSize', + value, + 'px' + ) + } + /> + ); + } + + if ( __experimentalLineHeight ) { + panels.push( + + setProperty( + name, + 'typography', + 'lineHeight', + value + ) + } + /> + ); + } + + const settings = []; + if ( __experimentalColor ) { + settings.push( { + value: getProperty( name, 'color', 'text' ), + onChange: ( value ) => + setProperty( name, 'color', 'text', value ), + label: __( 'Text color' ), + } ); + settings.push( { + value: getProperty( + name, + 'color', + 'background' + ), + onChange: ( value ) => + setProperty( + name, + 'color', + 'background', + value + ), + label: __( 'Background color' ), + } ); + } + + if ( __experimentalColor?.gradients ) { + // TODO: do gradients + } + + if ( __experimentalColor?.linkColor ) { + settings.push( { + value: getProperty( name, 'color', 'link' ), + onChange: ( value ) => + setProperty( name, 'color', 'link', value ), + label: __( 'Link color' ), + } ); + } + + if ( settings.length > 0 ) { + panels.push( + + ); + } + + return panels.length > 0 ? ( + + { panels } + + ) : null; + } + ) + .filter( Boolean ) } + + ); +}; diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js new file mode 100644 index 00000000000000..94aa1e4d225976 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-panel.js @@ -0,0 +1,76 @@ +/** + * WordPress dependencies + */ +import { FontSizePicker, PanelColorSettings } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { useGlobalStylesContext } from '../editor/global-styles-provider'; + +const FONT_SIZE = 'font-size'; +const LINK_COLOR = '--wp--style--color--link'; +const BACKGROUND_COLOR = 'background-color'; + +export default () => { + const { + globalContext: { supports }, + getProperty, + setProperty, + } = useGlobalStylesContext(); + + const panels = []; + const colorSettings = []; + + if ( supports.includes( FONT_SIZE ) ) { + panels.push( + + setProperty( + 'global', + 'typography', + 'fontSize', + value, + 'px' + ) + } + /> + ); + } + + if ( supports.includes( BACKGROUND_COLOR ) ) { + colorSettings.push( { + value: getProperty( 'global', 'color', 'background' ), + onChange: ( value ) => + setProperty( 'global', 'color', 'background', value ), + label: __( 'Background color' ), + } ); + } + + if ( supports.includes( LINK_COLOR ) ) { + colorSettings.push( { + value: getProperty( 'global', 'color', 'link' ), + onChange: ( value ) => + setProperty( 'global', 'color', 'link', value ), + label: __( 'Link color' ), + } ); + } + + if ( colorSettings.length > 0 ) { + panels.push( + + ); + } + + return panels; +}; diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index 8f6432f5b19375..fa280ab995e3a9 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -1,145 +1,36 @@ /** * WordPress dependencies */ -import { PanelBody } from '@wordpress/components'; +import { TabPanel } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { - __experimentalLineHeightControl as LineHeightControl, - FontSizePicker, - PanelColorSettings, -} from '@wordpress/block-editor'; -import { getBlockTypes } from '@wordpress/blocks'; /** * Internal dependencies */ import DefaultSidebar from './default-sidebar'; -import { useGlobalStylesContext } from '../editor/global-styles-provider'; +import BlockPanel from './block-panel'; +import GlobalPanel from './global-panel'; export default ( { identifier, title: panelTitle, icon } ) => { - const { getProperty, setProperty } = useGlobalStylesContext(); - return ( - { getBlockTypes() - .map( - ( { - name, - title, - supports: { - __experimentalFontSize, - __experimentalLineHeight, - __experimentalColor, - }, - } ) => { - const panels = []; - - if ( 'core/heading' === name ) { - //TODO: process heading as separate blocks - return null; - } - - if ( __experimentalFontSize ) { - panels.push( - - setProperty( - name, - 'typography', - 'fontSize', - value, - 'px' - ) - } - /> - ); - } - - if ( __experimentalLineHeight ) { - panels.push( - - setProperty( - name, - 'typography', - 'lineHeight', - value - ) - } - /> - ); - } - - const settings = []; - if ( __experimentalColor ) { - settings.push( { - value: getProperty( name, 'color', 'text' ), - onChange: ( value ) => - setProperty( name, 'color', 'text', value ), - label: __( 'Text color' ), - } ); - settings.push( { - value: getProperty( - name, - 'color', - 'background' - ), - onChange: ( value ) => - setProperty( - name, - 'color', - 'background', - value - ), - label: __( 'Background color' ), - } ); - } - - if ( __experimentalColor?.gradients ) { - // TODO: do gradients - } - - if ( __experimentalColor?.linkColor ) { - settings.push( { - value: getProperty( name, 'color', 'link' ), - onChange: ( value ) => - setProperty( name, 'color', 'link', value ), - label: __( 'Link color' ), - } ); - } - - if ( settings.length > 0 ) { - panels.push( - - ); - } - - return panels.length > 0 ? ( - - { panels } - - ) : null; + + { ( tab ) => { + if ( 'block' === tab.name ) { + return ; } - ) - .filter( Boolean ) } + return ; + } } + ); }; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 3f0424f29c7e16..3022a0735b4a4f 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -166,6 +166,7 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditingDemo', '__experimentalFeatures', '__experimentalGlobalStylesUserEntityId', + '__experimentalGlobalStylesGlobalContext', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', 'alignWide', From a57df4705452f4ba20d06045657b8ad5eeeed892 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 11:00:02 +0200 Subject: [PATCH 26/84] Add typography panel --- .../src/components/sidebar/global-panel.js | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js index 94aa1e4d225976..78094e8bb550f0 100644 --- a/packages/edit-site/src/components/sidebar/global-panel.js +++ b/packages/edit-site/src/components/sidebar/global-panel.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { FontSizePicker, PanelColorSettings } from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -25,23 +26,25 @@ export default () => { if ( supports.includes( FONT_SIZE ) ) { panels.push( - - setProperty( + + + ) } + onChange={ ( value ) => + setProperty( + 'global', + 'typography', + 'fontSize', + value, + 'px' + ) + } + /> + ); } From 43fae0be5527e837e86012c7ed47a4a3d9ff486b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 13:30:49 +0200 Subject: [PATCH 27/84] Use typography icon --- packages/edit-site/src/components/sidebar/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index d258dd43d5a59b..918f858b52ad20 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -3,7 +3,7 @@ */ import { createSlotFill } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { cog, pencil } from '@wordpress/icons'; +import { cog, typography } from '@wordpress/icons'; /** * Internal dependencies @@ -29,7 +29,7 @@ export function SidebarComplementaryAreaFills() { ); From a2c0860f32ee7a8de4198fc4137b11ff40f0d0d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 11:49:08 +0200 Subject: [PATCH 28/84] Load global styles settings only in edit-site --- lib/global-styles.php | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 0083933be3e630..e14a2c12b76c3d 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -594,7 +594,7 @@ function gutenberg_experimental_global_styles_enqueue_assets() { $stylesheet = gutenberg_experimental_global_styles_get_stylesheet(); wp_register_style( 'global-styles', false, array(), true, true ); wp_add_inline_style( 'global-styles', $stylesheet ); - wp_enqueue_style( 'global-styles'); + wp_enqueue_style( 'global-styles' ); } /** @@ -653,17 +653,30 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) { * @return array New block editor settings */ function gutenberg_experimental_global_styles_settings( $settings ) { + if ( ! function_exists( 'get_current_screen' ) ) { + return false; + } + $screen = get_current_screen(); - $include_draft = true; - if ( gutenberg_experimental_global_styles_has_theme_json_support() ) { - // The CPT ID for entity retrieval/saving. - $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); + if ( ! empty( $screen ) && + gutenberg_is_edit_site_page( $screen->id ) && + gutenberg_experimental_global_styles_has_theme_json_support() ) { + $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); $settings['__experimentalGlobalStylesGlobalContext'] = gutenberg_experimental_global_styles_get_global_context(); + $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( + gutenberg_experimental_global_styles_get_core(), + gutenberg_experimental_global_styles_get_theme() + ); + } else { + // We are in a block editor context, as this function + // is hooked to the block_editor_settings filter. + // + // Add the styles for the editor via the settings + // so they get processed as if they were added via add_editor_styles: + // they will get the editor wrapper class. + $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet() ); } - // Add the styles for the editor via the settings - // so they get processed as if they were added via add_editor_styles: - // they will get the editor wrapper class. $settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged ); // Unsetting deprecated settings defined by Core. @@ -671,7 +684,6 @@ function gutenberg_experimental_global_styles_settings( $settings ) { unset( $settings['disableCustomGradients'] ); unset( $settings['disableCustomFontSizes'] ); unset( $settings['enableCustomLineHeight'] ); - $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet( $include_draft ) ); return $settings; } From c045d8866ae31c13acdfaf353f683b7e7770a463 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 13:32:50 +0200 Subject: [PATCH 29/84] Generate stylesheet in the client - step 1 --- .../editor/global-styles-provider.js | 83 ++----------- .../editor/global-styles-renderer.js | 113 ++++++++++++++++++ .../edit-site/src/components/editor/index.js | 3 + .../editor/src/components/provider/index.js | 1 + 4 files changed, 127 insertions(+), 73 deletions(-) create mode 100644 packages/edit-site/src/components/editor/global-styles-renderer.js diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 1f3b831857135e..5b35d32a2f87b1 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -3,7 +3,11 @@ */ import { createContext, useContext, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { getBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { getGlobalStyles } from './global-styles-renderer'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ @@ -15,14 +19,14 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { children, entityId, globalContext } ) => { +export default ( { children, entityId, globalContext, baseStyles } ) => { const { userStyles, getProperty, setProperty, } = useGlobalStylesFromEntities( entityId ); - useGlobalStylesEffectToUpdateStylesheet( userStyles ); + useGlobalStylesEffectToUpdateStylesheet( baseStyles, userStyles ); return ( { }; }; -const useGlobalStylesEffectToUpdateStylesheet = ( userStyles ) => { +const useGlobalStylesEffectToUpdateStylesheet = ( baseStyles, userStyles ) => { useEffect( () => { - const embeddedStylesheetId = 'user-generated-global-styles-inline-css'; + const embeddedStylesheetId = 'global-styles-inline-css'; let styleNode = document.getElementById( embeddedStylesheetId ); if ( ! styleNode ) { @@ -113,73 +117,6 @@ const useGlobalStylesEffectToUpdateStylesheet = ( userStyles ) => { .appendChild( styleNode ); } - styleNode.innerText = getStylesFromTree( userStyles ); + styleNode.innerText = getGlobalStyles( baseStyles, userStyles ); }, [ userStyles ] ); }; - -const getStylesFromTree = ( tree ) => { - const styles = []; - - const getSelector = ( blockName ) => { - if ( 'global' === blockName ) { - return ''; // We use the .editor-styles-wrapper for this one - } - - const { - name, - supports: { __experimentalSelector }, - } = getBlockType( blockName ); - - let selector = '.wp-block-' + name.replace( 'core/', '' ); - if ( - __experimentalSelector && - 'string' === typeof __experimentalSelector - ) { - selector = __experimentalSelector; - } - return selector; - }; - - const getStyleDeclarations = ( blockStyles ) => { - const declarations = []; - if ( blockStyles?.typography?.fontSize ) { - declarations.push( - `font-size: ${ blockStyles.typography.fontSize }` - ); - } - if ( blockStyles?.typography?.lineHeight ) { - declarations.push( - `line-height: ${ blockStyles.typography.lineHeight }` - ); - } - if ( blockStyles?.color?.text ) { - declarations.push( `color: ${ blockStyles.color.text }` ); - } - if ( blockStyles?.color?.background ) { - declarations.push( - `background-color: ${ blockStyles.color.background }` - ); - } - if ( blockStyles?.color?.link ) { - declarations.push( - `--wp--style--color--link: ${ blockStyles.color.link }` - ); - } - return declarations.join( ';' ); - }; - - Object.keys( tree ).forEach( ( blockName ) => { - const blockSelector = getSelector( blockName ); - const blockDeclarations = getStyleDeclarations( - tree[ blockName ]?.styles - ); - - // TODO: look at how to hook into the styles generation - // so we can avoid having to increase the class specificity here. - styles.push( - `.editor-styles-wrapper.editor-styles-wrapper ${ blockSelector } { ${ blockDeclarations } }` - ); - } ); - - return styles.join( '' ); -}; diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js new file mode 100644 index 00000000000000..1b8a11ab76c2e1 --- /dev/null +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -0,0 +1,113 @@ +/** + * WordPress dependencies + */ +import { getBlockType } from '@wordpress/blocks'; + +const mergeTrees = ( baseStyles, userStyles ) => { + // TODO: merge trees + return baseStyles; +}; + +export const getGlobalStyles = ( baseTree, userTree ) => { + const styles = []; + const tree = mergeTrees( baseTree, userTree ); + + const getSelector = ( blockName ) => { + if ( 'global' === blockName ) { + return ''; // We use the .editor-styles-wrapper for this one + } + + const { + name, + supports: { __experimentalSelector }, + } = getBlockType( blockName ); + + let selector = '.wp-block-' + name.replace( 'core/', '' ); + if ( + __experimentalSelector && + 'string' === typeof __experimentalSelector + ) { + selector = __experimentalSelector; + } + return selector; + }; + + /** + * Transform given style tree into a set of style declarations. + * + * @param {Object} blockStyles + * + * @return {Array} An array of style declarations. + */ + const getBlockStylesDeclarations = ( blockStyles ) => { + const declarations = []; + if ( blockStyles?.typography?.fontSize ) { + declarations.push( + `font-size: ${ blockStyles.typography.fontSize }` + ); + } + if ( blockStyles?.typography?.lineHeight ) { + declarations.push( + `line-height: ${ blockStyles.typography.lineHeight }` + ); + } + if ( blockStyles?.color?.text ) { + declarations.push( `color: ${ blockStyles.color.text }` ); + } + if ( blockStyles?.color?.background ) { + declarations.push( + `background-color: ${ blockStyles.color.background }` + ); + } + if ( blockStyles?.color?.link ) { + declarations.push( + `--wp--style--color--link: ${ blockStyles.color.link }` + ); + } + return declarations; + }; + + /** + * Transform given preset tree into a set of style declarations. + * + * @param {Object} blockPresets + * + * @return {Array} An array of style declarations. + */ + const getBlockPresetsDeclarations = ( blockPresets ) => { + const declarations = []; + [ 'color', 'font-size', 'gradient' ].forEach( ( category ) => { + if ( blockPresets?.[ category ] ) { + blockPresets[ category ].forEach( ( { slug, value } ) => + declarations.push( + `--wp--preset--${ category }--${ slug }: ${ value }` + ) + ); + } + } ); + return declarations; + }; + + Object.keys( tree ).forEach( ( blockName ) => { + if ( blockName.startsWith( 'core/heading/' ) ) { + return; // We skip heading for now. + } + const blockSelector = getSelector( blockName ); + const blockDeclarations = [ + ...getBlockStylesDeclarations( tree[ blockName ].styles ), + ...getBlockPresetsDeclarations( tree[ blockName ].presets ), + ]; + + if ( blockDeclarations.length > 0 ) { + // TODO: look at how to hook into the styles generation + // so we can avoid having to increase the class specificity here. + styles.push( + `.editor-styles-wrapper.editor-styles-wrapper ${ blockSelector } { ${ blockDeclarations.join( + ';' + ) } }` + ); + } + } ); + + return styles.join( '' ); +}; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 13d7544c798898..c913c1ff25c1e0 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -178,6 +178,9 @@ function Editor() { globalContext={ settings.__experimentalGlobalStylesGlobalContext } + baseStyles={ + settings.__experimentalGlobalStylesBaseStyles + } > diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 3022a0735b4a4f..e490e8a257c134 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -166,6 +166,7 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditingDemo', '__experimentalFeatures', '__experimentalGlobalStylesUserEntityId', + '__experimentalGlobalStylesBaseStyles', '__experimentalGlobalStylesGlobalContext', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', From 554a857760079edef40582b4966269d809522e23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 14:00:04 +0200 Subject: [PATCH 30/84] Generate stylesheet in the client - step 2 --- lib/global-styles.php | 1 + .../editor/global-styles-provider.js | 26 +++- .../editor/global-styles-renderer.js | 114 ++++++++++-------- .../edit-site/src/components/editor/index.js | 3 + .../edit-site/src/components/editor/utils.js | 8 ++ .../src/components/sidebar/global-panel.js | 5 +- .../editor/src/components/provider/index.js | 1 + 7 files changed, 100 insertions(+), 58 deletions(-) create mode 100644 packages/edit-site/src/components/editor/utils.js diff --git a/lib/global-styles.php b/lib/global-styles.php index e14a2c12b76c3d..e66cf5162f8539 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -663,6 +663,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { gutenberg_experimental_global_styles_has_theme_json_support() ) { $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); $settings['__experimentalGlobalStylesGlobalContext'] = gutenberg_experimental_global_styles_get_global_context(); + $settings['__experimentalGlobalStylesBlockData'] = gutenberg_experimental_global_styles_get_block_data(); $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme() diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 5b35d32a2f87b1..ea8273b6f7f97f 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -19,14 +19,24 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { children, entityId, globalContext, baseStyles } ) => { +export default ( { + children, + entityId, + globalContext, + baseStyles, + blockData, +} ) => { const { userStyles, getProperty, setProperty, } = useGlobalStylesFromEntities( entityId ); - useGlobalStylesEffectToUpdateStylesheet( baseStyles, userStyles ); + useGlobalStylesEffectToUpdateStylesheet( + blockData, + baseStyles, + userStyles + ); return ( { }; }; -const useGlobalStylesEffectToUpdateStylesheet = ( baseStyles, userStyles ) => { +const useGlobalStylesEffectToUpdateStylesheet = ( + blockData, + baseStyles, + userStyles +) => { useEffect( () => { const embeddedStylesheetId = 'global-styles-inline-css'; let styleNode = document.getElementById( embeddedStylesheetId ); @@ -117,6 +131,10 @@ const useGlobalStylesEffectToUpdateStylesheet = ( baseStyles, userStyles ) => { .appendChild( styleNode ); } - styleNode.innerText = getGlobalStyles( baseStyles, userStyles ); + styleNode.innerText = getGlobalStyles( + blockData, + baseStyles, + userStyles + ); }, [ userStyles ] ); }; diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 1b8a11ab76c2e1..6d1460942ce0af 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -1,65 +1,70 @@ /** - * WordPress dependencies + * Internal dependencies */ -import { getBlockType } from '@wordpress/blocks'; +import { + FONT_SIZE, + TEXT_COLOR, + BACKGROUND_COLOR, + LINE_HEIGHT, + LINK_COLOR, + PRESET_COLOR, + PRESET_FONT_SIZE, + PRESET_GRADIENT, +} from './utils'; const mergeTrees = ( baseStyles, userStyles ) => { // TODO: merge trees return baseStyles; }; -export const getGlobalStyles = ( baseTree, userTree ) => { +export const getGlobalStyles = ( blockData, baseTree, userTree ) => { const styles = []; const tree = mergeTrees( baseTree, userTree ); - const getSelector = ( blockName ) => { - if ( 'global' === blockName ) { - return ''; // We use the .editor-styles-wrapper for this one - } - - const { - name, - supports: { __experimentalSelector }, - } = getBlockType( blockName ); - - let selector = '.wp-block-' + name.replace( 'core/', '' ); - if ( - __experimentalSelector && - 'string' === typeof __experimentalSelector - ) { - selector = __experimentalSelector; - } - return selector; - }; - /** * Transform given style tree into a set of style declarations. * - * @param {Object} blockStyles + * @param {Object} blockSupports What styles the block supports. + * @param {Object} blockStyles Block styles. * * @return {Array} An array of style declarations. */ - const getBlockStylesDeclarations = ( blockStyles ) => { + const getBlockStylesDeclarations = ( blockSupports, blockStyles ) => { const declarations = []; - if ( blockStyles?.typography?.fontSize ) { + if ( + blockSupports.includes( FONT_SIZE ) && + blockStyles?.typography?.fontSize + ) { declarations.push( - `font-size: ${ blockStyles.typography.fontSize }` + `${ FONT_SIZE }: ${ blockStyles.typography.fontSize }` ); } - if ( blockStyles?.typography?.lineHeight ) { + if ( + blockSupports.includes( LINE_HEIGHT ) && + blockStyles?.typography?.lineHeight + ) { declarations.push( `line-height: ${ blockStyles.typography.lineHeight }` ); } - if ( blockStyles?.color?.text ) { + if ( + blockSupports.includes( TEXT_COLOR ) && + blockStyles?.color?.text + ) { declarations.push( `color: ${ blockStyles.color.text }` ); } - if ( blockStyles?.color?.background ) { + if ( + blockSupports.includes( BACKGROUND_COLOR ) && + blockStyles?.color?.background + ) { declarations.push( `background-color: ${ blockStyles.color.background }` ); } - if ( blockStyles?.color?.link ) { + if ( + blockSupports.includes( LINK_COLOR ) && + blockStyles?.color?.link + ) { declarations.push( `--wp--style--color--link: ${ blockStyles.color.link }` ); @@ -76,35 +81,44 @@ export const getGlobalStyles = ( baseTree, userTree ) => { */ const getBlockPresetsDeclarations = ( blockPresets ) => { const declarations = []; - [ 'color', 'font-size', 'gradient' ].forEach( ( category ) => { - if ( blockPresets?.[ category ] ) { - blockPresets[ category ].forEach( ( { slug, value } ) => - declarations.push( - `--wp--preset--${ category }--${ slug }: ${ value }` - ) - ); + [ PRESET_GRADIENT, PRESET_COLOR, PRESET_FONT_SIZE ].forEach( + ( category ) => { + if ( blockPresets?.[ category ] ) { + blockPresets[ category ].forEach( ( { slug, value } ) => + declarations.push( + `--wp--preset--${ category }--${ slug }: ${ value }` + ) + ); + } } - } ); + ); return declarations; }; - Object.keys( tree ).forEach( ( blockName ) => { - if ( blockName.startsWith( 'core/heading/' ) ) { - return; // We skip heading for now. + const getBlockSelector = ( selector ) => { + // TODO: look at how to hook into the styles generation + // so we can avoid having to increase the class specificity here + // and remap :root. + if ( ':root' === selector ) { + selector = ''; } - const blockSelector = getSelector( blockName ); + return `.editor-styles-wrapper.editor-styles-wrapper ${ selector }`; + }; + + Object.keys( blockData ).forEach( ( blockName ) => { + const blockSelector = getBlockSelector( + blockData[ blockName ].selector + ); const blockDeclarations = [ - ...getBlockStylesDeclarations( tree[ blockName ].styles ), + ...getBlockStylesDeclarations( + blockData[ blockName ].supports, + tree[ blockName ].styles + ), ...getBlockPresetsDeclarations( tree[ blockName ].presets ), ]; - if ( blockDeclarations.length > 0 ) { - // TODO: look at how to hook into the styles generation - // so we can avoid having to increase the class specificity here. styles.push( - `.editor-styles-wrapper.editor-styles-wrapper ${ blockSelector } { ${ blockDeclarations.join( - ';' - ) } }` + `${ blockSelector } { ${ blockDeclarations.join( ';' ) } }` ); } } ); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c913c1ff25c1e0..f885bdc14b2dc6 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -181,6 +181,9 @@ function Editor() { baseStyles={ settings.__experimentalGlobalStylesBaseStyles } + blockData={ + settings.__experimentalGlobalStylesBlockData + } > diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js new file mode 100644 index 00000000000000..b6bcbbc37cf09a --- /dev/null +++ b/packages/edit-site/src/components/editor/utils.js @@ -0,0 +1,8 @@ +export const FONT_SIZE = 'font-size'; +export const LINK_COLOR = '--wp--style--color--link'; +export const BACKGROUND_COLOR = 'background-color'; +export const TEXT_COLOR = 'color'; +export const LINE_HEIGHT = 'line-height'; +export const PRESET_COLOR = 'color'; +export const PRESET_FONT_SIZE = 'font-size'; +export const PRESET_GRADIENT = 'gradient'; diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js index 78094e8bb550f0..8e177091f8a1aa 100644 --- a/packages/edit-site/src/components/sidebar/global-panel.js +++ b/packages/edit-site/src/components/sidebar/global-panel.js @@ -9,10 +9,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { useGlobalStylesContext } from '../editor/global-styles-provider'; - -const FONT_SIZE = 'font-size'; -const LINK_COLOR = '--wp--style--color--link'; -const BACKGROUND_COLOR = 'background-color'; +import { FONT_SIZE, BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; export default () => { const { diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index e490e8a257c134..af5c0d9a9b05c6 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -167,6 +167,7 @@ class EditorProvider extends Component { '__experimentalFeatures', '__experimentalGlobalStylesUserEntityId', '__experimentalGlobalStylesBaseStyles', + '__experimentalGlobalStylesBlockData', '__experimentalGlobalStylesGlobalContext', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', From d7392b5bf685cb8f37a540c52c6bb405d38a6244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 14:05:57 +0200 Subject: [PATCH 31/84] Add stylesheet for link color --- .../edit-site/src/components/editor/global-styles-renderer.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 6d1460942ce0af..e3226b8a035ed4 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -19,6 +19,9 @@ const mergeTrees = ( baseStyles, userStyles ) => { export const getGlobalStyles = ( blockData, baseTree, userTree ) => { const styles = []; + // TODO: this needs to be integrated in the processing. + // See comment in the server + styles.push( 'a { color: var(--wp--style--color--link, #00e); }' ); const tree = mergeTrees( baseTree, userTree ); /** From 3ad9f9b7fd1f31803b73915195904662a19dc5b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 14:08:06 +0200 Subject: [PATCH 32/84] Make order as front --- .../edit-site/src/components/editor/global-styles-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index e3226b8a035ed4..958dce4d68037f 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -84,7 +84,7 @@ export const getGlobalStyles = ( blockData, baseTree, userTree ) => { */ const getBlockPresetsDeclarations = ( blockPresets ) => { const declarations = []; - [ PRESET_GRADIENT, PRESET_COLOR, PRESET_FONT_SIZE ].forEach( + [ PRESET_COLOR, PRESET_FONT_SIZE, PRESET_GRADIENT ].forEach( ( category ) => { if ( blockPresets?.[ category ] ) { blockPresets[ category ].forEach( ( { slug, value } ) => From 8a4667b9286eb32370b19d13e22709e296b949fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 14:43:26 +0200 Subject: [PATCH 33/84] Generate stylesheet in the client - step 3 --- .../editor/global-styles-renderer.js | 40 +++++++++++++++++-- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 958dce4d68037f..63f41abbc80db5 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -12,9 +12,43 @@ import { PRESET_GRADIENT, } from './utils'; -const mergeTrees = ( baseStyles, userStyles ) => { - // TODO: merge trees - return baseStyles; +const mergeTrees = ( baseData, userData ) => { + // Deep clone from base data + const mergedTree = JSON.parse( JSON.stringify( baseData ) ); + + Object.keys( userData ).forEach( ( context ) => { + // Normalize object shape + if ( ! mergedTree[ context ].styles?.typography ) { + mergedTree[ context ].styles.typography = {}; + } + if ( ! mergedTree[ context ].styles?.color ) { + mergedTree[ context ].styles.color = {}; + } + + // TODO: this needs to account for presets as well + if ( userData?.[ context ]?.styles?.typography?.fontSize ) { + mergedTree[ context ].styles.typography.fontSize = + userData[ context ].styles.typography.fontSize; + } + if ( userData?.[ context ]?.styles?.typography?.lineHeight ) { + mergedTree[ context ].styles.typography.lineHeight = + userData[ context ].styles.typography.lineHeight; + } + if ( userData?.[ context ]?.styles?.color?.link ) { + mergedTree[ context ].styles.color.link = + userData[ context ].styles.color.link; + } + if ( userData?.[ context ]?.styles?.color?.background ) { + mergedTree[ context ].styles.color.background = + userData[ context ].styles.color.background; + } + if ( userData?.[ context ]?.styles?.color?.text ) { + mergedTree[ context ].styles.color.text = + userData[ context ].styles.color.text; + } + } ); + + return mergedTree; }; export const getGlobalStyles = ( blockData, baseTree, userTree ) => { From 91ede608aa20a2d67606fb8226b855c7de87771a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 17:11:51 +0200 Subject: [PATCH 34/84] Disable font-size for the global level --- lib/global-styles.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index e66cf5162f8539..3659f13e874fb0 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -296,7 +296,7 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) function gutenberg_experimental_global_styles_get_global_context() { return array( 'selector' => ':root', - 'supports' => array( 'background-color', '--wp--style--color--link', 'font-size' ), + 'supports' => array( 'background-color', '--wp--style--color--link' ), ); } From db6c9dccbd4ded551de652838ae5149fc523ad50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 17:24:15 +0200 Subject: [PATCH 35/84] Make sure font-size is removed from the entity --- .../edit-site/src/components/editor/global-styles-provider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index ea8273b6f7f97f..948b3ba24e3c85 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -79,11 +79,11 @@ const useGlobalStylesFromEntities = ( entityId ) => { const fromUnits = { noop: ( value ) => value, - px: ( value ) => ( value ? +value.replace( 'px', '' ) : null ), + px: ( value ) => ( value ? +value.replace( 'px', '' ) : value ), }; const toUnits = { noop: ( value ) => value, - px: ( value ) => ( value ? value + 'px' : null ), + px: ( value ) => ( value ? value + 'px' : value ), }; const getProperty = ( context, family, name, units = 'noop' ) => From 072e5f4b133db625c2de401718209e9d018732a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Jun 2020 17:36:58 +0200 Subject: [PATCH 36/84] Enable back font-size --- lib/global-styles.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 3659f13e874fb0..feb0d988087b73 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -296,7 +296,7 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) function gutenberg_experimental_global_styles_get_global_context() { return array( 'selector' => ':root', - 'supports' => array( 'background-color', '--wp--style--color--link' ), + 'supports' => array( 'font-size', 'background-color', '--wp--style--color--link' ), ); } From 7cd35cd58c6f5348762e30f5fc406037d2a67807 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 21 Jul 2020 12:14:18 +0200 Subject: [PATCH 37/84] Fix rebase --- .../edit-site/src/components/editor/index.js | 145 ++++++++---------- 1 file changed, 68 insertions(+), 77 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index f885bdc14b2dc6..99e40704d616ae 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -171,51 +171,42 @@ function Editor() { > - - - - -
-
+
+ { + if ( + isMobile + ) { setIsInserterOpen( false - ) + ); } - /> -
-
- { - if ( - isMobile - ) { - setIsInserterOpen( - false - ); - } - } } - /> -
+ } } + /> ) @@ -257,41 +248,41 @@ function Editor() { } - actions={ - <> - - { ! isEntitiesSavedStatesOpen && ( -
- -
- ) } - - } - footer={ } - /> - - - + actions={ + <> + + { ! isEntitiesSavedStatesOpen && ( +
+ +
+ ) } + + } + footer={ } + /> + + + From f55fe3ec9da07862ff50ca3fcb69c62f9af71958 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 21 Jul 2020 12:14:36 +0200 Subject: [PATCH 38/84] format-js --- .../edit-site/src/components/editor/index.js | 216 +++++++++--------- 1 file changed, 112 insertions(+), 104 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 99e40704d616ae..1de8cba0739056 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -171,118 +171,126 @@ function Editor() { > - - - - -
-
-
- { - if ( - isMobile - ) { - setIsInserterOpen( - false - ); - } - } } - /> -
- - ) + - ) + globalContext={ + settings.__experimentalGlobalStylesGlobalContext } - header={ -
- setIsInserterOpen( - ! isInserterOpen - ) - } - /> + baseStyles={ + settings.__experimentalGlobalStylesBaseStyles } - content={ - - - - { template && ( - - ) } - - + blockData={ + settings.__experimentalGlobalStylesBlockData } - actions={ - <> - + + + +
+
+
+ { + if ( + isMobile + ) { + setIsInserterOpen( + false + ); + } + } } + /> +
+ + ) + } + sidebar={ + sidebarIsOpened && ( + + ) + } + header={ +
+ setIsInserterOpen( + ! isInserterOpen + ) } /> - { ! isEntitiesSavedStatesOpen && ( -
- -
- ) } - - } - footer={ } - /> - - - + /> + ) } + + + } + actions={ + <> + + { ! isEntitiesSavedStatesOpen && ( +
+ +
+ ) } + + } + footer={ } + /> + + + From 7d4389de267ff749ff5ff9f954f95461cac1e8ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 21 Jul 2020 18:33:21 +0200 Subject: [PATCH 39/84] Show all blocks, including core/heading/* --- lib/global-styles.php | 4 + .../editor/global-styles-provider.js | 1 + .../src/components/sidebar/block-panel.js | 201 +++++++++--------- 3 files changed, 104 insertions(+), 102 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index feb0d988087b73..249a3a69a548d2 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -296,6 +296,7 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) function gutenberg_experimental_global_styles_get_global_context() { return array( 'selector' => ':root', + 'name' => __( 'Global', 'gutenberg' ), 'supports' => array( 'font-size', 'background-color', '--wp--style--color--link' ), ); } @@ -363,6 +364,7 @@ function gutenberg_experimental_global_styles_get_block_data() { $block_data[ $block_name ] = array( 'selector' => $block_type->supports['__experimentalSelector'], 'supports' => $supports, + 'name' => $block_name, ); } elseif ( isset( $block_type->supports['__experimentalSelector'] ) && @@ -372,12 +374,14 @@ function gutenberg_experimental_global_styles_get_block_data() { $block_data[ $key ] = array( 'selector' => $selector, 'supports' => $supports, + 'name' => $block_name, ); } } else { $block_data[ $block_name ] = array( 'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ), 'supports' => $supports, + 'name' => $block_name, ); } } diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 948b3ba24e3c85..7b0c68f444ab03 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -43,6 +43,7 @@ export default ( { value={ { getProperty, setProperty, + blockData, globalContext, } } > diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index 3bb00d74aad1b1..33ac6c582d076f 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -8,131 +8,128 @@ import { FontSizePicker, PanelColorSettings, } from '@wordpress/block-editor'; -import { getBlockTypes } from '@wordpress/blocks'; /** * Internal dependencies */ import { useGlobalStylesContext } from '../editor/global-styles-provider'; +import { + FONT_SIZE, + LINE_HEIGHT, + TEXT_COLOR, + BACKGROUND_COLOR, + LINK_COLOR, +} from '../editor/utils'; export default () => { - const { getProperty, setProperty } = useGlobalStylesContext(); + const { getProperty, setProperty, blockData } = useGlobalStylesContext(); return ( <> - { getBlockTypes() - .map( - ( { - name, - title, - supports: { - __experimentalFontSize, - __experimentalLineHeight, - __experimentalColor, - }, - } ) => { - const panels = []; + { Object.keys( blockData ) + .map( ( selector ) => { + const { supports, name } = blockData[ selector ]; + const panels = []; - if ( 'core/heading' === name ) { - //TODO: process heading as separate blocks - return null; - } + if ( 'global' === name ) { + return null; + } - if ( __experimentalFontSize ) { - panels.push( - + setProperty( + selector, 'typography', 'fontSize', + value, 'px' - ) } - onChange={ ( value ) => - setProperty( - name, - 'typography', - 'fontSize', - value, - 'px' - ) - } - /> - ); - } + ) + } + /> + ); + } - if ( __experimentalLineHeight ) { - panels.push( - + setProperty( + selector, 'typography', - 'lineHeight' - ) } - onChange={ ( value ) => - setProperty( - name, - 'typography', - 'lineHeight', - value - ) - } - /> - ); - } + 'lineHeight', + value + ) + } + /> + ); + } - const settings = []; - if ( __experimentalColor ) { - settings.push( { - value: getProperty( name, 'color', 'text' ), - onChange: ( value ) => - setProperty( name, 'color', 'text', value ), - label: __( 'Text color' ), - } ); - settings.push( { - value: getProperty( - name, + const settings = []; + if ( + supports.includes( TEXT_COLOR ) && + supports.includes( BACKGROUND_COLOR ) + ) { + settings.push( { + value: getProperty( selector, 'color', 'text' ), + onChange: ( value ) => + setProperty( selector, 'color', 'text', value ), + label: __( 'Text color' ), + } ); + settings.push( { + value: getProperty( + selector, + 'color', + 'background' + ), + onChange: ( value ) => + setProperty( + selector, 'color', - 'background' + 'background', + value ), - onChange: ( value ) => - setProperty( - name, - 'color', - 'background', - value - ), - label: __( 'Background color' ), - } ); - } - - if ( __experimentalColor?.gradients ) { - // TODO: do gradients - } + label: __( 'Background color' ), + } ); + } - if ( __experimentalColor?.linkColor ) { - settings.push( { - value: getProperty( name, 'color', 'link' ), - onChange: ( value ) => - setProperty( name, 'color', 'link', value ), - label: __( 'Link color' ), - } ); - } + // TODO: do gradients - if ( settings.length > 0 ) { - panels.push( - - ); - } + if ( supports.includes( LINK_COLOR ) ) { + settings.push( { + value: getProperty( selector, 'color', 'link' ), + onChange: ( value ) => + setProperty( selector, 'color', 'link', value ), + label: __( 'Link color' ), + } ); + } - return panels.length > 0 ? ( - - { panels } - - ) : null; + if ( settings.length > 0 ) { + panels.push( + + ); } - ) + + return panels.length > 0 ? ( + + { panels } + + ) : null; + } ) .filter( Boolean ) } ); From e10e3750bb113f8b71d578dcc3ac6c0f323fbade Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 22 Jul 2020 13:06:32 +0200 Subject: [PATCH 40/84] Show title per context --- lib/global-styles.php | 2 +- .../src/components/sidebar/block-panel.js | 40 +++++++++++++------ 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 249a3a69a548d2..6f62e50592bcfb 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -296,7 +296,7 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) function gutenberg_experimental_global_styles_get_global_context() { return array( 'selector' => ':root', - 'name' => __( 'Global', 'gutenberg' ), + 'name' => 'global', 'supports' => array( 'font-size', 'background-color', '--wp--style--color--link' ), ); } diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index 33ac6c582d076f..b4bcd733697c87 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -8,6 +8,7 @@ import { FontSizePicker, PanelColorSettings, } from '@wordpress/block-editor'; +import { getBlockType } from '@wordpress/blocks'; /** * Internal dependencies @@ -26,8 +27,8 @@ export default () => { return ( <> { Object.keys( blockData ) - .map( ( selector ) => { - const { supports, name } = blockData[ selector ]; + .map( ( context ) => { + const { supports, name } = blockData[ context ]; const panels = []; if ( 'global' === name ) { @@ -38,14 +39,14 @@ export default () => { panels.push( setProperty( - selector, + context, 'typography', 'fontSize', value, @@ -60,13 +61,13 @@ export default () => { panels.push( setProperty( - selector, + context, 'typography', 'lineHeight', value @@ -82,20 +83,20 @@ export default () => { supports.includes( BACKGROUND_COLOR ) ) { settings.push( { - value: getProperty( selector, 'color', 'text' ), + value: getProperty( context, 'color', 'text' ), onChange: ( value ) => - setProperty( selector, 'color', 'text', value ), + setProperty( context, 'color', 'text', value ), label: __( 'Text color' ), } ); settings.push( { value: getProperty( - selector, + context, 'color', 'background' ), onChange: ( value ) => setProperty( - selector, + context, 'color', 'background', value @@ -108,9 +109,9 @@ export default () => { if ( supports.includes( LINK_COLOR ) ) { settings.push( { - value: getProperty( selector, 'color', 'link' ), + value: getProperty( context, 'color', 'link' ), onChange: ( value ) => - setProperty( selector, 'color', 'link', value ), + setProperty( context, 'color', 'link', value ), label: __( 'Link color' ), } ); } @@ -124,8 +125,21 @@ export default () => { ); } + /* + * Some block (eg: core/heading) are split in different + * contexts (eg: core/heading/h1, core/heading/h2). + * Because each context maps to a different UI section + * in the sidebar we attach the selector (h1, h2) + * to the title for those blocks. + */ + const blockType = getBlockType(name); + let panelTitle = blockType.title; + if ( 'object' === typeof blockType?.supports?.__experimentalSelector ) { + panelTitle += ` (${ blockData[ context ].selector })` + } + return panels.length > 0 ? ( - + { panels } ) : null; From 02af322ebe0ca6e4ba1c1a99d87d6d08e838e423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 22 Jul 2020 13:53:33 +0200 Subject: [PATCH 41/84] Destructure selector --- .../edit-site/src/components/sidebar/block-panel.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index b4bcd733697c87..ae3ac4a901261f 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -28,9 +28,10 @@ export default () => { <> { Object.keys( blockData ) .map( ( context ) => { - const { supports, name } = blockData[ context ]; + const { supports, name, selector } = blockData[ context ]; const panels = []; + /* This is shown in the global panel */ if ( 'global' === name ) { return null; } @@ -132,10 +133,13 @@ export default () => { * in the sidebar we attach the selector (h1, h2) * to the title for those blocks. */ - const blockType = getBlockType(name); + const blockType = getBlockType( name ); let panelTitle = blockType.title; - if ( 'object' === typeof blockType?.supports?.__experimentalSelector ) { - panelTitle += ` (${ blockData[ context ].selector })` + if ( + 'object' === + typeof blockType?.supports?.__experimentalSelector + ) { + panelTitle += ` (${ selector })`; } return panels.length > 0 ? ( From 33f20d44c1b6b369e049663fbe30846308dbfd1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 22 Jul 2020 14:37:13 +0200 Subject: [PATCH 42/84] Refactor to reduce the amount of data and extract global to constant --- lib/global-styles.php | 7 +++---- .../components/editor/global-styles-provider.js | 12 +++++------- .../edit-site/src/components/editor/index.js | 7 ++----- .../edit-site/src/components/editor/utils.js | 1 + .../src/components/sidebar/block-panel.js | 13 +++++++------ .../src/components/sidebar/global-panel.js | 17 +++++++++-------- .../editor/src/components/provider/index.js | 3 +-- 7 files changed, 28 insertions(+), 32 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 6f62e50592bcfb..3bb3e1121b6dd1 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -665,10 +665,9 @@ function gutenberg_experimental_global_styles_settings( $settings ) { if ( ! empty( $screen ) && gutenberg_is_edit_site_page( $screen->id ) && gutenberg_experimental_global_styles_has_theme_json_support() ) { - $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); - $settings['__experimentalGlobalStylesGlobalContext'] = gutenberg_experimental_global_styles_get_global_context(); - $settings['__experimentalGlobalStylesBlockData'] = gutenberg_experimental_global_styles_get_block_data(); - $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( + $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); + $settings['__experimentalGlobalStylesContexts'] = gutenberg_experimental_global_styles_get_block_data(); + $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme() ); diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 7b0c68f444ab03..94fccdc583c45a 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -22,9 +22,8 @@ export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); export default ( { children, entityId, - globalContext, baseStyles, - blockData, + contexts, } ) => { const { userStyles, @@ -33,7 +32,7 @@ export default ( { } = useGlobalStylesFromEntities( entityId ); useGlobalStylesEffectToUpdateStylesheet( - blockData, + contexts, baseStyles, userStyles ); @@ -43,8 +42,7 @@ export default ( { value={ { getProperty, setProperty, - blockData, - globalContext, + contexts } } > { children } @@ -116,7 +114,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { }; const useGlobalStylesEffectToUpdateStylesheet = ( - blockData, + contexts, baseStyles, userStyles ) => { @@ -133,7 +131,7 @@ const useGlobalStylesEffectToUpdateStylesheet = ( } styleNode.innerText = getGlobalStyles( - blockData, + contexts, baseStyles, userStyles ); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 1de8cba0739056..3779a0f74c9b39 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -175,14 +175,11 @@ function Editor() { entityId={ settings.__experimentalGlobalStylesUserEntityId } - globalContext={ - settings.__experimentalGlobalStylesGlobalContext - } baseStyles={ settings.__experimentalGlobalStylesBaseStyles } - blockData={ - settings.__experimentalGlobalStylesBlockData + contexts={ + settings.__experimentalGlobalStylesContexts } > diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index b6bcbbc37cf09a..039d44baf6471e 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -6,3 +6,4 @@ export const LINE_HEIGHT = 'line-height'; export const PRESET_COLOR = 'color'; export const PRESET_FONT_SIZE = 'font-size'; export const PRESET_GRADIENT = 'gradient'; +export const GLOBAL_CONTEXT = 'global'; \ No newline at end of file diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index ae3ac4a901261f..f6a05fd5eb645d 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -15,24 +15,25 @@ import { getBlockType } from '@wordpress/blocks'; */ import { useGlobalStylesContext } from '../editor/global-styles-provider'; import { + BACKGROUND_COLOR, FONT_SIZE, + GLOBAL_CONTEXT, LINE_HEIGHT, - TEXT_COLOR, - BACKGROUND_COLOR, LINK_COLOR, + TEXT_COLOR, } from '../editor/utils'; export default () => { - const { getProperty, setProperty, blockData } = useGlobalStylesContext(); + const { getProperty, setProperty, contexts } = useGlobalStylesContext(); return ( <> - { Object.keys( blockData ) + { Object.keys( contexts ) .map( ( context ) => { - const { supports, name, selector } = blockData[ context ]; + const { supports, name, selector } = contexts[ context ]; const panels = []; /* This is shown in the global panel */ - if ( 'global' === name ) { + if ( GLOBAL_CONTEXT === name ) { return null; } diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js index 8e177091f8a1aa..54e9b14134ba3d 100644 --- a/packages/edit-site/src/components/sidebar/global-panel.js +++ b/packages/edit-site/src/components/sidebar/global-panel.js @@ -9,15 +9,16 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { useGlobalStylesContext } from '../editor/global-styles-provider'; -import { FONT_SIZE, BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; +import { GLOBAL_CONTEXT, FONT_SIZE, BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; export default () => { const { - globalContext: { supports }, + contexts, getProperty, setProperty, } = useGlobalStylesContext(); + const { supports } = contexts[ GLOBAL_CONTEXT ]; const panels = []; const colorSettings = []; @@ -26,14 +27,14 @@ export default () => { setProperty( - 'global', + GLOBAL_CONTEXT, 'typography', 'fontSize', value, @@ -47,18 +48,18 @@ export default () => { if ( supports.includes( BACKGROUND_COLOR ) ) { colorSettings.push( { - value: getProperty( 'global', 'color', 'background' ), + value: getProperty( GLOBAL_CONTEXT, 'color', 'background' ), onChange: ( value ) => - setProperty( 'global', 'color', 'background', value ), + setProperty( GLOBAL_CONTEXT, 'color', 'background', value ), label: __( 'Background color' ), } ); } if ( supports.includes( LINK_COLOR ) ) { colorSettings.push( { - value: getProperty( 'global', 'color', 'link' ), + value: getProperty( GLOBAL_CONTEXT, 'color', 'link' ), onChange: ( value ) => - setProperty( 'global', 'color', 'link', value ), + setProperty( GLOBAL_CONTEXT, 'color', 'link', value ), label: __( 'Link color' ), } ); } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index af5c0d9a9b05c6..717dd0b0e3b7a0 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -167,8 +167,7 @@ class EditorProvider extends Component { '__experimentalFeatures', '__experimentalGlobalStylesUserEntityId', '__experimentalGlobalStylesBaseStyles', - '__experimentalGlobalStylesBlockData', - '__experimentalGlobalStylesGlobalContext', + '__experimentalGlobalStylesContexts', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', 'alignWide', From 584c145990a3c75d995ed4b66ada6b9383b7f9a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 23 Jul 2020 18:22:19 +0200 Subject: [PATCH 43/84] Inline function --- lib/global-styles.php | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 3bb3e1121b6dd1..fb77fc4b4ce75a 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -288,19 +288,6 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) return $supported_features; } -/** - * Return the data for the global context. - * - * @return array - */ -function gutenberg_experimental_global_styles_get_global_context() { - return array( - 'selector' => ':root', - 'name' => 'global', - 'supports' => array( 'font-size', 'background-color', '--wp--style--color--link' ), - ); -} - /** * Retrieves the block data (selector/supports). * From a5bb681ca2f05c337a597c28acd73a96fd032d61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 23 Jul 2020 18:58:22 +0200 Subject: [PATCH 44/84] Simplify code --- .../editor/global-styles-renderer.js | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 63f41abbc80db5..b4d6c6bc0bd0c9 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -25,27 +25,15 @@ const mergeTrees = ( baseData, userData ) => { mergedTree[ context ].styles.color = {}; } - // TODO: this needs to account for presets as well - if ( userData?.[ context ]?.styles?.typography?.fontSize ) { - mergedTree[ context ].styles.typography.fontSize = - userData[ context ].styles.typography.fontSize; - } - if ( userData?.[ context ]?.styles?.typography?.lineHeight ) { - mergedTree[ context ].styles.typography.lineHeight = - userData[ context ].styles.typography.lineHeight; - } - if ( userData?.[ context ]?.styles?.color?.link ) { - mergedTree[ context ].styles.color.link = - userData[ context ].styles.color.link; - } - if ( userData?.[ context ]?.styles?.color?.background ) { - mergedTree[ context ].styles.color.background = - userData[ context ].styles.color.background; - } - if ( userData?.[ context ]?.styles?.color?.text ) { - mergedTree[ context ].styles.color.text = - userData[ context ].styles.color.text; - } + mergedTree[ context ].styles.typography = { + ...mergedTree[ context ].styles.typography, + ...userData[ context ]?.styles?.typography + }; + + mergedTree[ context ].styles.color = { + ...mergedTree[ context ].styles.color, + ...userData[ context ]?.styles?.color + }; } ); return mergedTree; From 279eadc8397ce91a509068dcad6aab7acc2c8172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 23 Jul 2020 19:23:58 +0200 Subject: [PATCH 45/84] Simplify code for renderer --- .../editor/global-styles-renderer.js | 93 +++++++------------ .../edit-site/src/components/editor/utils.js | 16 +++- 2 files changed, 44 insertions(+), 65 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index b4d6c6bc0bd0c9..d3eef14c4f9b21 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -1,15 +1,15 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + /** * Internal dependencies */ import { - FONT_SIZE, - TEXT_COLOR, - BACKGROUND_COLOR, - LINE_HEIGHT, - LINK_COLOR, - PRESET_COLOR, - PRESET_FONT_SIZE, - PRESET_GRADIENT, + STYLE_PROPS, + PRESET_CATEGORIES, + LINK_COLOR_DECLARATION, } from './utils'; const mergeTrees = ( baseData, userData ) => { @@ -27,12 +27,12 @@ const mergeTrees = ( baseData, userData ) => { mergedTree[ context ].styles.typography = { ...mergedTree[ context ].styles.typography, - ...userData[ context ]?.styles?.typography + ...userData[ context ]?.styles?.typography, }; mergedTree[ context ].styles.color = { ...mergedTree[ context ].styles.color, - ...userData[ context ]?.styles?.color + ...userData[ context ]?.styles?.color, }; } ); @@ -41,9 +41,9 @@ const mergeTrees = ( baseData, userData ) => { export const getGlobalStyles = ( blockData, baseTree, userTree ) => { const styles = []; - // TODO: this needs to be integrated in the processing. - // See comment in the server - styles.push( 'a { color: var(--wp--style--color--link, #00e); }' ); + // Can this be converted to a context, as the global context? + // See comment in the server. + styles.push( LINK_COLOR_DECLARATION ); const tree = mergeTrees( baseTree, userTree ); /** @@ -56,44 +56,17 @@ export const getGlobalStyles = ( blockData, baseTree, userTree ) => { */ const getBlockStylesDeclarations = ( blockSupports, blockStyles ) => { const declarations = []; - if ( - blockSupports.includes( FONT_SIZE ) && - blockStyles?.typography?.fontSize - ) { - declarations.push( - `${ FONT_SIZE }: ${ blockStyles.typography.fontSize }` - ); - } - if ( - blockSupports.includes( LINE_HEIGHT ) && - blockStyles?.typography?.lineHeight - ) { - declarations.push( - `line-height: ${ blockStyles.typography.lineHeight }` - ); - } - if ( - blockSupports.includes( TEXT_COLOR ) && - blockStyles?.color?.text - ) { - declarations.push( `color: ${ blockStyles.color.text }` ); - } - if ( - blockSupports.includes( BACKGROUND_COLOR ) && - blockStyles?.color?.background - ) { - declarations.push( - `background-color: ${ blockStyles.color.background }` - ); - } - if ( - blockSupports.includes( LINK_COLOR ) && - blockStyles?.color?.link - ) { - declarations.push( - `--wp--style--color--link: ${ blockStyles.color.link }` - ); - } + Object.keys( STYLE_PROPS ).forEach( ( key ) => { + if ( + blockSupports.includes( key ) && + get( blockStyles, STYLE_PROPS[ key ], false ) + ) { + declarations.push( + `${ key }: ${ get( blockStyles, STYLE_PROPS[ key ] ) }` + ) + } + } ); + return declarations; }; @@ -106,7 +79,7 @@ export const getGlobalStyles = ( blockData, baseTree, userTree ) => { */ const getBlockPresetsDeclarations = ( blockPresets ) => { const declarations = []; - [ PRESET_COLOR, PRESET_FONT_SIZE, PRESET_GRADIENT ].forEach( + PRESET_CATEGORIES.forEach( ( category ) => { if ( blockPresets?.[ category ] ) { blockPresets[ category ].forEach( ( { slug, value } ) => @@ -121,25 +94,23 @@ export const getGlobalStyles = ( blockData, baseTree, userTree ) => { }; const getBlockSelector = ( selector ) => { - // TODO: look at how to hook into the styles generation + // Can we hook into the styles generation mechanism // so we can avoid having to increase the class specificity here - // and remap :root. + // and remap :root? if ( ':root' === selector ) { selector = ''; } return `.editor-styles-wrapper.editor-styles-wrapper ${ selector }`; }; - Object.keys( blockData ).forEach( ( blockName ) => { - const blockSelector = getBlockSelector( - blockData[ blockName ].selector - ); + Object.keys( blockData ).forEach( ( context ) => { + const blockSelector = getBlockSelector( blockData[ context ].selector ); const blockDeclarations = [ ...getBlockStylesDeclarations( - blockData[ blockName ].supports, - tree[ blockName ].styles + blockData[ context ].supports, + tree[ context ].styles ), - ...getBlockPresetsDeclarations( tree[ blockName ].presets ), + ...getBlockPresetsDeclarations( tree[ context ].presets ), ]; if ( blockDeclarations.length > 0 ) { styles.push( diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 039d44baf6471e..2e975a461db79c 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -1,9 +1,17 @@ +/* CSS properties */ export const FONT_SIZE = 'font-size'; export const LINK_COLOR = '--wp--style--color--link'; export const BACKGROUND_COLOR = 'background-color'; export const TEXT_COLOR = 'color'; export const LINE_HEIGHT = 'line-height'; -export const PRESET_COLOR = 'color'; -export const PRESET_FONT_SIZE = 'font-size'; -export const PRESET_GRADIENT = 'gradient'; -export const GLOBAL_CONTEXT = 'global'; \ No newline at end of file +/* Supporting data */ +export const GLOBAL_CONTEXT = 'global'; +export const PRESET_CATEGORIES = [ 'color', 'font-size', 'gradient' ]; +export const STYLE_PROPS = { + [ FONT_SIZE ]: 'typography.fontSize', + [ LINE_HEIGHT ]: 'typography.lineHeight', + [ TEXT_COLOR ]: 'color.text', + [ BACKGROUND_COLOR ]: 'color.background', + [ LINK_COLOR ]: 'color.link', +}; +export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; From 03fad42c6efd4bd56bcabe3fb73c73d1cb937610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 23 Jul 2020 19:24:34 +0200 Subject: [PATCH 46/84] Add prettier suggestion --- .../editor/global-styles-renderer.js | 20 +++++++++---------- .../edit-site/src/components/editor/utils.js | 10 +++++----- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index d3eef14c4f9b21..ed589d9776b81f 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -63,7 +63,7 @@ export const getGlobalStyles = ( blockData, baseTree, userTree ) => { ) { declarations.push( `${ key }: ${ get( blockStyles, STYLE_PROPS[ key ] ) }` - ) + ); } } ); @@ -79,17 +79,15 @@ export const getGlobalStyles = ( blockData, baseTree, userTree ) => { */ const getBlockPresetsDeclarations = ( blockPresets ) => { const declarations = []; - PRESET_CATEGORIES.forEach( - ( category ) => { - if ( blockPresets?.[ category ] ) { - blockPresets[ category ].forEach( ( { slug, value } ) => - declarations.push( - `--wp--preset--${ category }--${ slug }: ${ value }` - ) - ); - } + PRESET_CATEGORIES.forEach( ( category ) => { + if ( blockPresets?.[ category ] ) { + blockPresets[ category ].forEach( ( { slug, value } ) => + declarations.push( + `--wp--preset--${ category }--${ slug }: ${ value }` + ) + ); } - ); + } ); return declarations; }; diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 2e975a461db79c..4cf0894d009b56 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -8,10 +8,10 @@ export const LINE_HEIGHT = 'line-height'; export const GLOBAL_CONTEXT = 'global'; export const PRESET_CATEGORIES = [ 'color', 'font-size', 'gradient' ]; export const STYLE_PROPS = { - [ FONT_SIZE ]: 'typography.fontSize', - [ LINE_HEIGHT ]: 'typography.lineHeight', - [ TEXT_COLOR ]: 'color.text', - [ BACKGROUND_COLOR ]: 'color.background', - [ LINK_COLOR ]: 'color.link', + [ FONT_SIZE ]: 'typography.fontSize', + [ LINE_HEIGHT ]: 'typography.lineHeight', + [ TEXT_COLOR ]: 'color.text', + [ BACKGROUND_COLOR ]: 'color.background', + [ LINK_COLOR ]: 'color.link', }; export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; From cd55f33d0a1025410b8d7668026f2a3755636128 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 4 Aug 2020 19:16:03 +0200 Subject: [PATCH 47/84] Fix rebase --- lib/global-styles.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index fb77fc4b4ce75a..3c09379b5b9548 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -574,7 +574,7 @@ function gutenberg_experimental_global_styles_get_stylesheet() { $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme, $gs_user ); - return $gs_merged; + return gutenberg_experimental_global_styles_resolver( $gs_merged ); } /** From cdda0e2245eb2bc5e73e7b691aad6a694a1243bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 25 Aug 2020 13:46:45 +0200 Subject: [PATCH 48/84] Fix warnings --- lib/global-styles.php | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 3c09379b5b9548..46c639a3dae196 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -414,7 +414,7 @@ function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) { * * @return string Stylesheet. */ -function gutenberg_experimental_global_styles_resolver( $tree ) { +function gutenberg_experimental_global_styles_get_stylesheet( $tree ) { $stylesheet = ''; $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( array_keys( $tree ) as $block_name ) { @@ -564,17 +564,14 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { * Takes data from the different origins (core, theme, and user) * and returns the merged result. * - * @return string + * @return array Merged trees */ -function gutenberg_experimental_global_styles_get_stylesheet() { - $gs_merged = array(); - $gs_core = gutenberg_experimental_global_styles_get_core(); - $gs_theme = gutenberg_experimental_global_styles_get_theme(); - $gs_user = gutenberg_experimental_global_styles_get_user(); +function gutenberg_experimental_global_styles_get_merged_origins() { + $core = gutenberg_experimental_global_styles_get_core(); + $theme = gutenberg_experimental_global_styles_get_theme(); + $user = gutenberg_experimental_global_styles_get_user(); - $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme, $gs_user ); - - return gutenberg_experimental_global_styles_resolver( $gs_merged ); + return gutenberg_experimental_global_styles_merge_trees( $core, $theme, $user ); } /** @@ -582,7 +579,12 @@ function gutenberg_experimental_global_styles_get_stylesheet() { * and enqueues the resulting stylesheet. */ function gutenberg_experimental_global_styles_enqueue_assets() { - $stylesheet = gutenberg_experimental_global_styles_get_stylesheet(); + $gs_merged = gutenberg_experimental_global_styles_get_merged_origins(); + $stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $gs_merged ); + if ( empty( $stylesheet ) ) { + return; + } + wp_register_style( 'global-styles', false, array(), true, true ); wp_add_inline_style( 'global-styles', $stylesheet ); wp_enqueue_style( 'global-styles' ); @@ -648,6 +650,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { return false; } $screen = get_current_screen(); + $merged = gutenberg_experimental_global_styles_get_merged_origins(); if ( ! empty( $screen ) && gutenberg_is_edit_site_page( $screen->id ) && @@ -665,7 +668,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { // Add the styles for the editor via the settings // so they get processed as if they were added via add_editor_styles: // they will get the editor wrapper class. - $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet() ); + $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet( $merged ) ); } $settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged ); From 8ec4ca0cd2d410f878c1167dadc77343268d3e6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 25 Aug 2020 13:50:17 +0200 Subject: [PATCH 49/84] Add comment about not using cloneDeep --- .../src/components/editor/global-styles-renderer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index ed589d9776b81f..94f8c1c5fd778a 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -13,7 +13,10 @@ import { } from './utils'; const mergeTrees = ( baseData, userData ) => { - // Deep clone from base data + // Deep clone from base data. + // We don't use cloneDeep from lodash here + // because we know the data is JSON compatible, + // see https://github.com/lodash/lodash/issues/1984 const mergedTree = JSON.parse( JSON.stringify( baseData ) ); Object.keys( userData ).forEach( ( context ) => { From f16b7ac614ea8ca2cd629fb5137f8f63cb62ad40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 25 Aug 2020 13:50:52 +0200 Subject: [PATCH 50/84] Fix comment --- .../edit-site/src/components/editor/global-styles-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 94f8c1c5fd778a..ef6fb048482de3 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -14,7 +14,7 @@ import { const mergeTrees = ( baseData, userData ) => { // Deep clone from base data. - // We don't use cloneDeep from lodash here + // We don't use cloneDeep from lodash here // because we know the data is JSON compatible, // see https://github.com/lodash/lodash/issues/1984 const mergedTree = JSON.parse( JSON.stringify( baseData ) ); From f73e2bb03c4b51a46aa67ceb44143fb2edbdc405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 25 Aug 2020 14:17:57 +0200 Subject: [PATCH 51/84] Compact code --- .../editor/global-styles-renderer.js | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index ef6fb048482de3..e50e28bafcfc4d 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -14,29 +14,26 @@ import { const mergeTrees = ( baseData, userData ) => { // Deep clone from base data. + // // We don't use cloneDeep from lodash here // because we know the data is JSON compatible, // see https://github.com/lodash/lodash/issues/1984 const mergedTree = JSON.parse( JSON.stringify( baseData ) ); + const styleKeys = [ 'typography', 'color' ]; Object.keys( userData ).forEach( ( context ) => { - // Normalize object shape - if ( ! mergedTree[ context ].styles?.typography ) { - mergedTree[ context ].styles.typography = {}; - } - if ( ! mergedTree[ context ].styles?.color ) { - mergedTree[ context ].styles.color = {}; - } - - mergedTree[ context ].styles.typography = { - ...mergedTree[ context ].styles.typography, - ...userData[ context ]?.styles?.typography, - }; + styleKeys.forEach( ( key ) => { + // Normalize object shape: make sure the key exists under styles. + if ( ! mergedTree[ context ].styles?.[ key ] ) { + mergedTree[ context ].styles[ key ] = {}; + } - mergedTree[ context ].styles.color = { - ...mergedTree[ context ].styles.color, - ...userData[ context ]?.styles?.color, - }; + // Merge data: base + user. + mergedTree[ context ].styles[ key ] = { + ...mergedTree[ context ].styles[ key ], + ...userData[ context ]?.styles?.[ key ], + }; + } ); } ); return mergedTree; From 3ceeac7fd043b41b056299bd46b7fb4483ca5f1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 25 Aug 2020 14:20:15 +0200 Subject: [PATCH 52/84] Make linter happy --- lib/global-styles.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 46c639a3dae196..c3536631e0f821 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -567,9 +567,9 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { * @return array Merged trees */ function gutenberg_experimental_global_styles_get_merged_origins() { - $core = gutenberg_experimental_global_styles_get_core(); - $theme = gutenberg_experimental_global_styles_get_theme(); - $user = gutenberg_experimental_global_styles_get_user(); + $core = gutenberg_experimental_global_styles_get_core(); + $theme = gutenberg_experimental_global_styles_get_theme(); + $user = gutenberg_experimental_global_styles_get_user(); return gutenberg_experimental_global_styles_merge_trees( $core, $theme, $user ); } From ac1dadda02221c7fed84bfdfa6849757c3785dd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 26 Aug 2020 13:56:40 +0200 Subject: [PATCH 53/84] Make provider units agnostic Note that, at the moment, font-size is serialized to px [1]. We follow that convention at global styles level. [1] see packages/element/src/serialize.js#getNormalStylePropertyValue --- .../editor/global-styles-provider.js | 38 +++++-------------- .../edit-site/src/components/editor/utils.js | 14 +++++++ .../src/components/sidebar/block-panel.js | 16 ++++---- .../src/components/sidebar/global-panel.js | 25 ++++++------ 4 files changed, 44 insertions(+), 49 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 94fccdc583c45a..c12aab2369ab04 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -11,38 +11,29 @@ import { getGlobalStyles } from './global-styles-renderer'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ - getProperty: ( context, family, name, units ) => {}, - setProperty: ( context, family, name, value, units ) => {}, + getProperty: ( context, family, name ) => {}, + setProperty: ( context, family, name, value ) => {}, globalContext: {}, /* eslint-enable no-unused-vars */ } ); export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { - children, - entityId, - baseStyles, - contexts, -} ) => { +export default ( { children, entityId, baseStyles, contexts } ) => { const { userStyles, getProperty, setProperty, } = useGlobalStylesFromEntities( entityId ); - useGlobalStylesEffectToUpdateStylesheet( - contexts, - baseStyles, - userStyles - ); + useGlobalStylesEffectToUpdateStylesheet( contexts, baseStyles, userStyles ); return ( { children } @@ -76,21 +67,10 @@ const useGlobalStylesFromEntities = ( entityId ) => { return userData?.content ? JSON.parse( userData.content ) : {}; } ); - const fromUnits = { - noop: ( value ) => value, - px: ( value ) => ( value ? +value.replace( 'px', '' ) : value ), - }; - const toUnits = { - noop: ( value ) => value, - px: ( value ) => ( value ? value + 'px' : value ), - }; - - const getProperty = ( context, family, name, units = 'noop' ) => - fromUnits[ units ]( - userStyles?.[ context ]?.styles?.[ family ]?.[ name ] - ); + const getProperty = ( context, family, name ) => + userStyles?.[ context ]?.styles?.[ family ]?.[ name ]; - const setProperty = ( context, family, name, value, units = 'noop' ) => + const setProperty = ( context, family, name, value ) => editEntityRecord( 'postType', 'wp_global_styles', entityId, { content: JSON.stringify( { ...userStyles, @@ -99,7 +79,7 @@ const useGlobalStylesFromEntities = ( entityId ) => { ...userStyles?.[ context ]?.styles, [ family ]: { ...userStyles?.[ context ]?.styles?.[ family ], - [ name ]: toUnits[ units ]( value ), + [ name ]: value, }, }, }, diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 4cf0894d009b56..305bfda7e245e3 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -4,6 +4,7 @@ export const LINK_COLOR = '--wp--style--color--link'; export const BACKGROUND_COLOR = 'background-color'; export const TEXT_COLOR = 'color'; export const LINE_HEIGHT = 'line-height'; + /* Supporting data */ export const GLOBAL_CONTEXT = 'global'; export const PRESET_CATEGORIES = [ 'color', 'font-size', 'gradient' ]; @@ -15,3 +16,16 @@ export const STYLE_PROPS = { [ LINK_COLOR ]: 'color.link', }; export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; + +/* Helpers for unit processing */ +export const fromPx = ( value ) => { + switch ( typeof value ) { + case 'string': + return +value.replace( 'px', '' ); + case 'number': + default: + return value; + } +}; + +export const toPx = ( value ) => ( value ? value + 'px' : value ); diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index f6a05fd5eb645d..d6113fb710fc1b 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -21,6 +21,8 @@ import { LINE_HEIGHT, LINK_COLOR, TEXT_COLOR, + fromPx, + toPx, } from '../editor/utils'; export default () => { @@ -40,19 +42,19 @@ export default () => { if ( supports.includes( FONT_SIZE ) ) { panels.push( setProperty( context, 'typography', 'fontSize', - value, - 'px' + toPx( value ) ) } /> diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js index 54e9b14134ba3d..77d897e6bfc6bd 100644 --- a/packages/edit-site/src/components/sidebar/global-panel.js +++ b/packages/edit-site/src/components/sidebar/global-panel.js @@ -9,14 +9,17 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { useGlobalStylesContext } from '../editor/global-styles-provider'; -import { GLOBAL_CONTEXT, FONT_SIZE, BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; +import { + GLOBAL_CONTEXT, + FONT_SIZE, + BACKGROUND_COLOR, + LINK_COLOR, + fromPx, + toPx, +} from '../editor/utils'; export default () => { - const { - contexts, - getProperty, - setProperty, - } = useGlobalStylesContext(); + const { contexts, getProperty, setProperty } = useGlobalStylesContext(); const { supports } = contexts[ GLOBAL_CONTEXT ]; const panels = []; @@ -26,19 +29,15 @@ export default () => { panels.push( setProperty( GLOBAL_CONTEXT, 'typography', 'fontSize', - value, - 'px' + toPx( value ) ) } /> From 9d7abcfae0ccd14100608b15328e98e62c363115 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 11:47:05 +0200 Subject: [PATCH 54/84] Use EntityProvider to get/set the CPT --- .../editor/global-styles-provider.js | 39 ++- .../edit-site/src/components/editor/index.js | 233 +++++++++--------- 2 files changed, 134 insertions(+), 138 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index c12aab2369ab04..12e458970c02be 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { createContext, useContext, useEffect } from '@wordpress/element'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useEntityProp } from '@wordpress/core-data'; /** * Internal dependencies @@ -19,12 +19,12 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); -export default ( { children, entityId, baseStyles, contexts } ) => { +export default ( { children, baseStyles, contexts } ) => { const { userStyles, getProperty, setProperty, - } = useGlobalStylesFromEntities( entityId ); + } = useGlobalStylesFromEntities(); useGlobalStylesEffectToUpdateStylesheet( contexts, baseStyles, userStyles ); @@ -48,31 +48,20 @@ export default ( { children, entityId, baseStyles, contexts } ) => { * * @return {Object} User data as well as getters and setters. */ -const useGlobalStylesFromEntities = ( entityId ) => { - const { editEntityRecord } = useDispatch( 'core' ); - const userStyles = useSelect( ( select ) => { - // Trigger entity retrieval - select( 'core' ).getEntityRecord( - 'postType', - 'wp_global_styles', - entityId - ); - - const userData = select( 'core' ).getEditedEntityRecord( - 'postType', - 'wp_global_styles', - entityId - ); - - return userData?.content ? JSON.parse( userData.content ) : {}; - } ); +const useGlobalStylesFromEntities = () => { + const [ content, setContent ] = useEntityProp( + 'postType', + 'wp_global_styles', + 'content' + ); + const userStyles = content ? JSON.parse( content ) : {}; const getProperty = ( context, family, name ) => userStyles?.[ context ]?.styles?.[ family ]?.[ name ]; const setProperty = ( context, family, name, value ) => - editEntityRecord( 'postType', 'wp_global_styles', entityId, { - content: JSON.stringify( { + setContent( + JSON.stringify( { ...userStyles, [ context ]: { styles: { @@ -83,8 +72,8 @@ const useGlobalStylesFromEntities = ( entityId ) => { }, }, }, - } ), - } ); + } ) + ); return { userStyles, diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 3779a0f74c9b39..2ba44ab5345cbc 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -169,127 +169,134 @@ function Editor() { type={ templateType } id={ entityId } > - - - - - - -
-
-
- { - if ( - isMobile - ) { + + + + + + + +
+
+
+ { + if ( + isMobile + ) { + setIsInserterOpen( + false + ); + } + } } + /> +
- - ) - } - sidebar={ - sidebarIsOpened && ( - - ) - } - header={ -
- setIsInserterOpen( - ! isInserterOpen - ) - } - /> - } - content={ - - - - { template && ( - - ) } - - - } - actions={ - <> - + ) + } + header={ +
+ setIsInserterOpen( + ! isInserterOpen + ) } /> - { ! isEntitiesSavedStatesOpen && ( -
- -
- ) } - - } - footer={ } - /> - - - - - + /> + ) } + + + } + actions={ + <> + + { ! isEntitiesSavedStatesOpen && ( +
+ +
+ ) } + + } + footer={ } + /> + + + + + + From c97540c5741f5865b4abab7e8e0cbfc9da52cb65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 12:46:25 +0200 Subject: [PATCH 55/84] Only process request if theme has theme.json support --- lib/global-styles.php | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index c3536631e0f821..254b657127e948 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -579,6 +579,10 @@ function gutenberg_experimental_global_styles_get_merged_origins() { * and enqueues the resulting stylesheet. */ function gutenberg_experimental_global_styles_enqueue_assets() { + if ( ! gutenberg_experimental_global_styles_has_theme_json_support() ) { + return; + } + $gs_merged = gutenberg_experimental_global_styles_get_merged_origins(); $stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $gs_merged ); if ( empty( $stylesheet ) ) { @@ -646,15 +650,16 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) { * @return array New block editor settings */ function gutenberg_experimental_global_styles_settings( $settings ) { - if ( ! function_exists( 'get_current_screen' ) ) { - return false; + if ( + ! gutenberg_experimental_global_styles_has_theme_json_support() || + ! function_exists( 'get_current_screen' ) ) { + return $settings; } + $screen = get_current_screen(); $merged = gutenberg_experimental_global_styles_get_merged_origins(); - if ( ! empty( $screen ) && - gutenberg_is_edit_site_page( $screen->id ) && - gutenberg_experimental_global_styles_has_theme_json_support() ) { + if ( ! empty( $screen ) && gutenberg_is_edit_site_page( $screen->id ) ) { $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); $settings['__experimentalGlobalStylesContexts'] = gutenberg_experimental_global_styles_get_block_data(); $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( From 8025a073a4c3f4c46b61501db48b6b985640695a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 12:46:57 +0200 Subject: [PATCH 56/84] Do not try to generate stylesheet if we have no data --- .../src/components/editor/global-styles-provider.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 12e458970c02be..8777e798ea9c13 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -88,6 +88,14 @@ const useGlobalStylesEffectToUpdateStylesheet = ( userStyles ) => { useEffect( () => { + if ( + typeof contexts !== 'object' || + typeof baseStyles !== 'object' || + typeof userStyles !== 'object' + ) { + return; + } + const embeddedStylesheetId = 'global-styles-inline-css'; let styleNode = document.getElementById( embeddedStylesheetId ); From 6a347b3884aad988e18d606e65a8f37a1ced21d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 12:48:03 +0200 Subject: [PATCH 57/84] Do not show global styles sidebar if no proper data --- .../src/components/sidebar/block-panel.js | 10 +----- .../src/components/sidebar/global-panel.js | 10 +++--- .../sidebar/global-styles-sidebar.js | 32 +++++++++++++++++-- 3 files changed, 35 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index d6113fb710fc1b..03bbfeb3f2bf30 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -13,11 +13,9 @@ import { getBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import { useGlobalStylesContext } from '../editor/global-styles-provider'; import { BACKGROUND_COLOR, FONT_SIZE, - GLOBAL_CONTEXT, LINE_HEIGHT, LINK_COLOR, TEXT_COLOR, @@ -25,8 +23,7 @@ import { toPx, } from '../editor/utils'; -export default () => { - const { getProperty, setProperty, contexts } = useGlobalStylesContext(); +export default ( { getProperty, setProperty, contexts } ) => { return ( <> { Object.keys( contexts ) @@ -34,11 +31,6 @@ export default () => { const { supports, name, selector } = contexts[ context ]; const panels = []; - /* This is shown in the global panel */ - if ( GLOBAL_CONTEXT === name ) { - return null; - } - if ( supports.includes( FONT_SIZE ) ) { panels.push( { - const { contexts, getProperty, setProperty } = useGlobalStylesContext(); - - const { supports } = contexts[ GLOBAL_CONTEXT ]; +export default ( { context, getProperty, setProperty } ) => { const panels = []; - const colorSettings = []; + const { supports } = context; if ( supports.includes( FONT_SIZE ) ) { panels.push( @@ -45,6 +41,8 @@ export default () => { ); } + const colorSettings = []; + if ( supports.includes( BACKGROUND_COLOR ) ) { colorSettings.push( { value: getProperty( GLOBAL_CONTEXT, 'color', 'background' ), diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index fa280ab995e3a9..c573be0cc948d1 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { omit } from 'lodash'; + /** * WordPress dependencies */ @@ -10,8 +15,17 @@ import { __ } from '@wordpress/i18n'; import DefaultSidebar from './default-sidebar'; import BlockPanel from './block-panel'; import GlobalPanel from './global-panel'; +import { useGlobalStylesContext } from '../editor/global-styles-provider'; +import { GLOBAL_CONTEXT } from '../editor/utils'; export default ( { identifier, title: panelTitle, icon } ) => { + const { contexts, getProperty, setProperty } = useGlobalStylesContext(); + + if ( typeof contexts !== 'object' || ! contexts?.[ GLOBAL_CONTEXT ] ) { + // No sidebar is shown. + return null; + } + return ( { > { ( tab ) => { if ( 'block' === tab.name ) { - return ; + return ( + + ); } - return ; + return ( + + ); } } From ffce3e6c900f50629c09bd548c88dcf3dfca5c8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 14:29:42 +0200 Subject: [PATCH 58/84] Extract TypographyPanel --- .../src/components/sidebar/block-panel.js | 71 +++++-------------- .../src/components/sidebar/global-panel.js | 41 +++-------- .../components/sidebar/typography-panel.js | 60 ++++++++++++++++ 3 files changed, 87 insertions(+), 85 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar/typography-panel.js diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index 03bbfeb3f2bf30..99f31fc92c09c5 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -4,8 +4,6 @@ import { PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { - __experimentalLineHeightControl as LineHeightControl, - FontSizePicker, PanelColorSettings, } from '@wordpress/block-editor'; import { getBlockType } from '@wordpress/blocks'; @@ -15,63 +13,26 @@ import { getBlockType } from '@wordpress/blocks'; */ import { BACKGROUND_COLOR, - FONT_SIZE, - LINE_HEIGHT, LINK_COLOR, TEXT_COLOR, - fromPx, - toPx, } from '../editor/utils'; +import TypographyPanel from './typography-panel'; export default ( { getProperty, setProperty, contexts } ) => { return ( <> { Object.keys( contexts ) - .map( ( context ) => { - const { supports, name, selector } = contexts[ context ]; + .map( ( key ) => { + const { supports, name, selector } = contexts[ key ]; const panels = []; - if ( supports.includes( FONT_SIZE ) ) { - panels.push( - - setProperty( - context, - 'typography', - 'fontSize', - toPx( value ) - ) - } - /> - ); - } - - if ( supports.includes( LINE_HEIGHT ) ) { - panels.push( - - setProperty( - context, - 'typography', - 'lineHeight', - value - ) - } - /> - ); - } + panels.push( + + ); const settings = []; if ( @@ -79,20 +40,20 @@ export default ( { getProperty, setProperty, contexts } ) => { supports.includes( BACKGROUND_COLOR ) ) { settings.push( { - value: getProperty( context, 'color', 'text' ), + value: getProperty( key, 'color', 'text' ), onChange: ( value ) => - setProperty( context, 'color', 'text', value ), + setProperty( key, 'color', 'text', value ), label: __( 'Text color' ), } ); settings.push( { value: getProperty( - context, + key, 'color', 'background' ), onChange: ( value ) => setProperty( - context, + key, 'color', 'background', value @@ -105,9 +66,9 @@ export default ( { getProperty, setProperty, contexts } ) => { if ( supports.includes( LINK_COLOR ) ) { settings.push( { - value: getProperty( context, 'color', 'link' ), + value: getProperty( key, 'color', 'link' ), onChange: ( value ) => - setProperty( context, 'color', 'link', value ), + setProperty( key, 'color', 'link', value ), label: __( 'Link color' ), } ); } diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js index 2d4677d9f3ba36..1195fce1250caa 100644 --- a/packages/edit-site/src/components/sidebar/global-panel.js +++ b/packages/edit-site/src/components/sidebar/global-panel.js @@ -1,45 +1,26 @@ /** * WordPress dependencies */ -import { FontSizePicker, PanelColorSettings } from '@wordpress/block-editor'; -import { PanelBody } from '@wordpress/components'; +import { PanelColorSettings } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { - GLOBAL_CONTEXT, - FONT_SIZE, - BACKGROUND_COLOR, - LINK_COLOR, - fromPx, - toPx, -} from '../editor/utils'; +import { GLOBAL_CONTEXT, BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; +import TypographyPanel from './typography-panel'; export default ( { context, getProperty, setProperty } ) => { const panels = []; const { supports } = context; - if ( supports.includes( FONT_SIZE ) ) { - panels.push( - - - setProperty( - GLOBAL_CONTEXT, - 'typography', - 'fontSize', - toPx( value ) - ) - } - /> - - ); - } + panels.push( + + ); const colorSettings = []; @@ -70,5 +51,5 @@ export default ( { context, getProperty, setProperty } ) => { ); } - return panels; + return panels.filter( Boolean ); }; diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js new file mode 100644 index 00000000000000..cfc80412be8fa7 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -0,0 +1,60 @@ +/** + * WordPress dependencies + */ +import { + FontSizePicker, + __experimentalLineHeightControl as LineHeightControl, +} from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { FONT_SIZE, LINE_HEIGHT, fromPx, toPx } from '../editor/utils'; + +export default ( { + context: { supports, name }, + getProperty, + setProperty, +} ) => { + if ( + ! supports.includes( FONT_SIZE ) && + ! supports.includes( LINE_HEIGHT ) + ) { + return null; + } + + return ( + + { supports.includes( FONT_SIZE ) && ( + + setProperty( + name, + 'typography', + 'fontSize', + toPx( value ) + ) + } + /> + ) } + { supports.includes( LINE_HEIGHT ) && ( + + setProperty( + name, + 'typography', + 'lineHeight', + value + ) + } + /> + ) } + + ); +}; From 2819d1b0df90c2707796a2754cc8fe7f3f4e982e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 14:29:58 +0200 Subject: [PATCH 59/84] Prettier changes --- .../src/components/sidebar/block-panel.js | 16 +++------------- .../src/components/sidebar/typography-panel.js | 7 +------ 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index 99f31fc92c09c5..2959336cae3d50 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -3,19 +3,13 @@ */ import { PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { - PanelColorSettings, -} from '@wordpress/block-editor'; +import { PanelColorSettings } from '@wordpress/block-editor'; import { getBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import { - BACKGROUND_COLOR, - LINK_COLOR, - TEXT_COLOR, -} from '../editor/utils'; +import { BACKGROUND_COLOR, LINK_COLOR, TEXT_COLOR } from '../editor/utils'; import TypographyPanel from './typography-panel'; export default ( { getProperty, setProperty, contexts } ) => { @@ -46,11 +40,7 @@ export default ( { getProperty, setProperty, contexts } ) => { label: __( 'Text color' ), } ); settings.push( { - value: getProperty( - key, - 'color', - 'background' - ), + value: getProperty( key, 'color', 'background' ), onChange: ( value ) => setProperty( key, diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index cfc80412be8fa7..112c6bebc0c7ab 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -46,12 +46,7 @@ export default ( { - setProperty( - name, - 'typography', - 'lineHeight', - value - ) + setProperty( name, 'typography', 'lineHeight', value ) } /> ) } From 48ab46759fb7bf0bfa1d75917f711ee716633b09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 16:58:20 +0200 Subject: [PATCH 60/84] Extract ColorPanel --- .../src/components/sidebar/color-panel.js | 45 +++++++++++++++++++ .../src/components/sidebar/global-panel.js | 44 ++++-------------- 2 files changed, 54 insertions(+), 35 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar/color-panel.js diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js new file mode 100644 index 00000000000000..4cad4e34ff541c --- /dev/null +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -0,0 +1,45 @@ +/** + * WordPress dependencies + */ +import { PanelColorSettings } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; + +export default ( { context: { supports, name }, getProperty, setProperty } ) => { + if ( + ! supports.includes( BACKGROUND_COLOR ) && + ! supports.includes( LINK_COLOR ) + ) { + return null; + } + + const colorSettings = []; + if ( supports.includes( BACKGROUND_COLOR ) ) { + colorSettings.push( { + value: getProperty( name, 'color', 'background' ), + onChange: ( value ) => + setProperty( name, 'color', 'background', value ), + label: __( 'Background color' ), + } ); + } + + if ( supports.includes( LINK_COLOR ) ) { + colorSettings.push( { + value: getProperty( name, 'color', 'link' ), + onChange: ( value ) => + setProperty( name, 'color', 'link', value ), + label: __( 'Link color' ), + } ); + } + + return ( + + ); +}; diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js index 1195fce1250caa..a92c4675750565 100644 --- a/packages/edit-site/src/components/sidebar/global-panel.js +++ b/packages/edit-site/src/components/sidebar/global-panel.js @@ -1,14 +1,9 @@ -/** - * WordPress dependencies - */ -import { PanelColorSettings } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; - /** * Internal dependencies */ -import { GLOBAL_CONTEXT, BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; +import { GLOBAL_CONTEXT } from '../editor/utils'; import TypographyPanel from './typography-panel'; +import ColorPanel from './color-panel'; export default ( { context, getProperty, setProperty } ) => { const panels = []; @@ -22,34 +17,13 @@ export default ( { context, getProperty, setProperty } ) => { /> ); - const colorSettings = []; - - if ( supports.includes( BACKGROUND_COLOR ) ) { - colorSettings.push( { - value: getProperty( GLOBAL_CONTEXT, 'color', 'background' ), - onChange: ( value ) => - setProperty( GLOBAL_CONTEXT, 'color', 'background', value ), - label: __( 'Background color' ), - } ); - } - - if ( supports.includes( LINK_COLOR ) ) { - colorSettings.push( { - value: getProperty( GLOBAL_CONTEXT, 'color', 'link' ), - onChange: ( value ) => - setProperty( GLOBAL_CONTEXT, 'color', 'link', value ), - label: __( 'Link color' ), - } ); - } - - if ( colorSettings.length > 0 ) { - panels.push( - - ); - } + panels.push( + + ); return panels.filter( Boolean ); }; From 36f55a32331212777afaf76ce99652550a781e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 17:05:06 +0200 Subject: [PATCH 61/84] Use ColorPanel in BlockPanel --- .../src/components/sidebar/block-panel.js | 54 +++---------------- .../src/components/sidebar/color-panel.js | 31 ++++++++--- 2 files changed, 31 insertions(+), 54 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js index 2959336cae3d50..1b136f10a6b82b 100644 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ b/packages/edit-site/src/components/sidebar/block-panel.js @@ -2,15 +2,13 @@ * WordPress dependencies */ import { PanelBody } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { PanelColorSettings } from '@wordpress/block-editor'; import { getBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import { BACKGROUND_COLOR, LINK_COLOR, TEXT_COLOR } from '../editor/utils'; import TypographyPanel from './typography-panel'; +import ColorPanel from './color-panel'; export default ( { getProperty, setProperty, contexts } ) => { return ( @@ -28,49 +26,13 @@ export default ( { getProperty, setProperty, contexts } ) => { /> ); - const settings = []; - if ( - supports.includes( TEXT_COLOR ) && - supports.includes( BACKGROUND_COLOR ) - ) { - settings.push( { - value: getProperty( key, 'color', 'text' ), - onChange: ( value ) => - setProperty( key, 'color', 'text', value ), - label: __( 'Text color' ), - } ); - settings.push( { - value: getProperty( key, 'color', 'background' ), - onChange: ( value ) => - setProperty( - key, - 'color', - 'background', - value - ), - label: __( 'Background color' ), - } ); - } - - // TODO: do gradients - - if ( supports.includes( LINK_COLOR ) ) { - settings.push( { - value: getProperty( key, 'color', 'link' ), - onChange: ( value ) => - setProperty( key, 'color', 'link', value ), - label: __( 'Link color' ), - } ); - } - - if ( settings.length > 0 ) { - panels.push( - - ); - } + panels.push( + + ); /* * Some block (eg: core/heading) are split in different diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 4cad4e34ff541c..9abe766a95e6e2 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -7,19 +7,33 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { BACKGROUND_COLOR, LINK_COLOR } from '../editor/utils'; +import { BACKGROUND_COLOR, LINK_COLOR, TEXT_COLOR } from '../editor/utils'; -export default ( { context: { supports, name }, getProperty, setProperty } ) => { +export default ( { + context: { supports, name }, + getProperty, + setProperty, +} ) => { if ( + ! supports.includes( TEXT_COLOR ) && ! supports.includes( BACKGROUND_COLOR ) && ! supports.includes( LINK_COLOR ) ) { return null; } - const colorSettings = []; + const settings = []; + + if ( supports.includes( TEXT_COLOR ) ) { + settings.push( { + value: getProperty( name, 'color', 'text' ), + onChange: ( value ) => setProperty( name, 'color', 'text', value ), + label: __( 'Text color' ), + } ); + } + if ( supports.includes( BACKGROUND_COLOR ) ) { - colorSettings.push( { + settings.push( { value: getProperty( name, 'color', 'background' ), onChange: ( value ) => setProperty( name, 'color', 'background', value ), @@ -27,11 +41,12 @@ export default ( { context: { supports, name }, getProperty, setProperty } ) => } ); } + // TODO: do gradients + if ( supports.includes( LINK_COLOR ) ) { - colorSettings.push( { + settings.push( { value: getProperty( name, 'color', 'link' ), - onChange: ( value ) => - setProperty( name, 'color', 'link', value ), + onChange: ( value ) => setProperty( name, 'color', 'link', value ), label: __( 'Link color' ), } ); } @@ -39,7 +54,7 @@ export default ( { context: { supports, name }, getProperty, setProperty } ) => return ( ); }; From 43d4dabe7830d7f84150e7ba044cb3261f3b8ef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 17:46:03 +0200 Subject: [PATCH 62/84] Get rid of GlobalPanel & BlockPanel in favor of inlining the style components --- .../src/components/sidebar/block-panel.js | 62 ---------- .../src/components/sidebar/global-panel.js | 29 ----- .../sidebar/global-styles-sidebar.js | 112 ++++++++++++++---- 3 files changed, 88 insertions(+), 115 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar/block-panel.js delete mode 100644 packages/edit-site/src/components/sidebar/global-panel.js diff --git a/packages/edit-site/src/components/sidebar/block-panel.js b/packages/edit-site/src/components/sidebar/block-panel.js deleted file mode 100644 index 1b136f10a6b82b..00000000000000 --- a/packages/edit-site/src/components/sidebar/block-panel.js +++ /dev/null @@ -1,62 +0,0 @@ -/** - * WordPress dependencies - */ -import { PanelBody } from '@wordpress/components'; -import { getBlockType } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import TypographyPanel from './typography-panel'; -import ColorPanel from './color-panel'; - -export default ( { getProperty, setProperty, contexts } ) => { - return ( - <> - { Object.keys( contexts ) - .map( ( key ) => { - const { supports, name, selector } = contexts[ key ]; - const panels = []; - - panels.push( - - ); - - panels.push( - - ); - - /* - * Some block (eg: core/heading) are split in different - * contexts (eg: core/heading/h1, core/heading/h2). - * Because each context maps to a different UI section - * in the sidebar we attach the selector (h1, h2) - * to the title for those blocks. - */ - const blockType = getBlockType( name ); - let panelTitle = blockType.title; - if ( - 'object' === - typeof blockType?.supports?.__experimentalSelector - ) { - panelTitle += ` (${ selector })`; - } - - return panels.length > 0 ? ( - - { panels } - - ) : null; - } ) - .filter( Boolean ) } - - ); -}; diff --git a/packages/edit-site/src/components/sidebar/global-panel.js b/packages/edit-site/src/components/sidebar/global-panel.js deleted file mode 100644 index a92c4675750565..00000000000000 --- a/packages/edit-site/src/components/sidebar/global-panel.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Internal dependencies - */ -import { GLOBAL_CONTEXT } from '../editor/utils'; -import TypographyPanel from './typography-panel'; -import ColorPanel from './color-panel'; - -export default ( { context, getProperty, setProperty } ) => { - const panels = []; - const { supports } = context; - - panels.push( - - ); - - panels.push( - - ); - - return panels.filter( Boolean ); -}; diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index c573be0cc948d1..c2a9ae6d8b1cf8 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -6,19 +6,20 @@ import { omit } from 'lodash'; /** * WordPress dependencies */ -import { TabPanel } from '@wordpress/components'; +import { PanelBody, TabPanel } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { getBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import DefaultSidebar from './default-sidebar'; -import BlockPanel from './block-panel'; -import GlobalPanel from './global-panel'; import { useGlobalStylesContext } from '../editor/global-styles-provider'; +import DefaultSidebar from './default-sidebar'; import { GLOBAL_CONTEXT } from '../editor/utils'; +import TypographyPanel from './typography-panel'; +import ColorPanel from './color-panel'; -export default ( { identifier, title: panelTitle, icon } ) => { +export default ( { identifier, title, icon } ) => { const { contexts, getProperty, setProperty } = useGlobalStylesContext(); if ( typeof contexts !== 'object' || ! contexts?.[ GLOBAL_CONTEXT ] ) { @@ -27,11 +28,7 @@ export default ( { identifier, title: panelTitle, icon } ) => { } return ( - + { ] } > { ( tab ) => { + /* Per Block Context */ if ( 'block' === tab.name ) { - return ( - - ); + return Object.keys( + omit( contexts, [ GLOBAL_CONTEXT ] ) + ) + .map( ( name ) => { + const { + supports, + selector, + name: blockName, + } = contexts[ name ]; + + /* + * Some block (eg: core/heading) are split in different + * contexts (eg: core/heading/h1, core/heading/h2). + * Because each context maps to a different UI section + * in the sidebar we attach the selector (h1, h2) + * to the title for those blocks. + */ + const blockType = getBlockType( blockName ); + let panelTitle = blockType.title; + if ( + 'object' === + typeof blockType?.supports + ?.__experimentalSelector + ) { + panelTitle += ` (${ selector })`; + } + + return ( + + { [ + , + , + ].filter( Boolean ) } + + ); + } ) + .filter( Boolean ); } - return ( - , + - ); + setProperty={ setProperty } + />, + ].filter( Boolean ); } } From 5d38eb0a09963439b0d99ad02a11e77a0457820d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 18:08:03 +0200 Subject: [PATCH 63/84] Better variable name and comment --- lib/global-styles.php | 18 +++++++++--------- .../sidebar/global-styles-sidebar.js | 14 +++++++++----- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 254b657127e948..76fc095e7847f1 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -349,9 +349,9 @@ function gutenberg_experimental_global_styles_get_block_data() { is_string( $block_type->supports['__experimentalSelector'] ) ) { $block_data[ $block_name ] = array( - 'selector' => $block_type->supports['__experimentalSelector'], - 'supports' => $supports, - 'name' => $block_name, + 'selector' => $block_type->supports['__experimentalSelector'], + 'supports' => $supports, + 'blockName' => $block_name, ); } elseif ( isset( $block_type->supports['__experimentalSelector'] ) && @@ -359,16 +359,16 @@ function gutenberg_experimental_global_styles_get_block_data() { ) { foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector ) { $block_data[ $key ] = array( - 'selector' => $selector, - 'supports' => $supports, - 'name' => $block_name, + 'selector' => $selector, + 'supports' => $supports, + 'blockName' => $block_name, ); } } else { $block_data[ $block_name ] = array( - 'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ), - 'supports' => $supports, - 'name' => $block_name, + 'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ), + 'supports' => $supports, + 'blockName' => $block_name, ); } } diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index c2a9ae6d8b1cf8..46c69278c97c86 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -45,15 +45,19 @@ export default ( { identifier, title, icon } ) => { const { supports, selector, - name: blockName, + blockName, } = contexts[ name ]; /* - * Some block (eg: core/heading) are split in different + * We use the block's name as the panel title. + * + * Some blocks (eg: core/heading) can represent different * contexts (eg: core/heading/h1, core/heading/h2). - * Because each context maps to a different UI section - * in the sidebar we attach the selector (h1, h2) - * to the title for those blocks. + * For those, we attach the selector (h1) after the block's name. + * + * The title can't be accessed in the server, + * as it's translatable and the block.json doesn't + * have it yet. */ const blockType = getBlockType( blockName ); let panelTitle = blockType.title; From 6a180f18f9a83e2564d1c46eba54021b72a05ebe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Aug 2020 18:10:16 +0200 Subject: [PATCH 64/84] Reformat to make less diff changes --- lib/global-styles.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 76fc095e7847f1..1d9f309acb2d5c 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -583,8 +583,8 @@ function gutenberg_experimental_global_styles_enqueue_assets() { return; } - $gs_merged = gutenberg_experimental_global_styles_get_merged_origins(); - $stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $gs_merged ); + $merged = gutenberg_experimental_global_styles_get_merged_origins(); + $stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $merged ); if ( empty( $stylesheet ) ) { return; } From 4f5622188421fc23ea13643211b5f1a2a136d3bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 31 Aug 2020 09:19:42 +0200 Subject: [PATCH 65/84] Fix variable name --- .../src/components/sidebar/global-styles-sidebar.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index 46c69278c97c86..c2f0c58de74b14 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -104,22 +104,22 @@ export default ( { identifier, title, icon } ) => { } /* Global Context */ - const { supports, name } = contexts[ GLOBAL_CONTEXT ]; + const { supports, blockName } = contexts[ GLOBAL_CONTEXT ]; return [ , Date: Mon, 31 Aug 2020 19:09:55 +0200 Subject: [PATCH 66/84] Use PanelColorGradientSettings --- .../src/components/sidebar/color-panel.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 9abe766a95e6e2..5062cc4f5b02df 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { PanelColorSettings } from '@wordpress/block-editor'; +import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -26,35 +26,36 @@ export default ( { if ( supports.includes( TEXT_COLOR ) ) { settings.push( { - value: getProperty( name, 'color', 'text' ), - onChange: ( value ) => setProperty( name, 'color', 'text', value ), + colorValue: getProperty( name, 'color', 'text' ), + onColorChange: ( value ) => + setProperty( name, 'color', 'text', value ), label: __( 'Text color' ), } ); } + // TODO: do gradients if ( supports.includes( BACKGROUND_COLOR ) ) { settings.push( { - value: getProperty( name, 'color', 'background' ), - onChange: ( value ) => + colorValue: getProperty( name, 'color', 'background' ), + onColorChange: ( value ) => setProperty( name, 'color', 'background', value ), label: __( 'Background color' ), } ); } - // TODO: do gradients - if ( supports.includes( LINK_COLOR ) ) { settings.push( { - value: getProperty( name, 'color', 'link' ), - onChange: ( value ) => setProperty( name, 'color', 'link', value ), + colorValue: getProperty( name, 'color', 'link' ), + onColorChange: ( value ) => + setProperty( name, 'color', 'link', value ), label: __( 'Link color' ), } ); } return ( - ); }; From 510181fa13fa5b7e4c96958f56555824f1cc0c38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 1 Sep 2020 10:34:17 +0200 Subject: [PATCH 67/84] Add support for gradient colors --- packages/edit-site/src/components/editor/utils.js | 2 ++ packages/edit-site/src/components/sidebar/color-panel.js | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 305bfda7e245e3..ebb6cd27a8e555 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -2,6 +2,7 @@ export const FONT_SIZE = 'font-size'; export const LINK_COLOR = '--wp--style--color--link'; export const BACKGROUND_COLOR = 'background-color'; +export const GRADIENT_COLOR = 'background'; export const TEXT_COLOR = 'color'; export const LINE_HEIGHT = 'line-height'; @@ -13,6 +14,7 @@ export const STYLE_PROPS = { [ LINE_HEIGHT ]: 'typography.lineHeight', [ TEXT_COLOR ]: 'color.text', [ BACKGROUND_COLOR ]: 'color.background', + [ GRADIENT_COLOR ]: 'color.gradient', [ LINK_COLOR ]: 'color.link', }; export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 5062cc4f5b02df..7ce51e063139d1 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -33,12 +33,15 @@ export default ( { } ); } - // TODO: do gradients + // TODO: check for gradient support, etc if ( supports.includes( BACKGROUND_COLOR ) ) { settings.push( { colorValue: getProperty( name, 'color', 'background' ), onColorChange: ( value ) => setProperty( name, 'color', 'background', value ), + gradientValue: getProperty( name, 'color', 'gradient' ), + onGradientChange: ( value ) => + setProperty( name, 'color', 'gradient', value ), label: __( 'Background color' ), } ); } From 602920fdd552fc8dad383aeefc8995de9f01e7d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 2 Sep 2020 10:44:46 +0200 Subject: [PATCH 68/84] Simplify setProperty object merging --- .../editor/global-styles-provider.js | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 8777e798ea9c13..8acbd13b423c3a 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { set }from 'lodash'; + /** * WordPress dependencies */ @@ -59,21 +64,11 @@ const useGlobalStylesFromEntities = () => { const getProperty = ( context, family, name ) => userStyles?.[ context ]?.styles?.[ family ]?.[ name ]; - const setProperty = ( context, family, name, value ) => - setContent( - JSON.stringify( { - ...userStyles, - [ context ]: { - styles: { - ...userStyles?.[ context ]?.styles, - [ family ]: { - ...userStyles?.[ context ]?.styles?.[ family ], - [ name ]: value, - }, - }, - }, - } ) - ); + const setProperty = ( context, family, name, value ) => { + const newContent = { ...userStyles }; + set( newContent, `${ context }.styles.${ family }.${ name }`, value ); + setContent( JSON.stringify( newContent ) ); + }; return { userStyles, From 09dc3d9338f0a3cbd8744ea51c6963aff36952dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 2 Sep 2020 10:47:54 +0200 Subject: [PATCH 69/84] Migrate setProperty to use path --- .../src/components/editor/global-styles-provider.js | 8 ++++---- packages/edit-site/src/components/sidebar/color-panel.js | 8 ++++---- .../edit-site/src/components/sidebar/typography-panel.js | 5 ++--- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 8acbd13b423c3a..6afaf68ae2567c 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { set }from 'lodash'; +import { set } from 'lodash'; /** * WordPress dependencies @@ -17,7 +17,7 @@ import { getGlobalStyles } from './global-styles-renderer'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ getProperty: ( context, family, name ) => {}, - setProperty: ( context, family, name, value ) => {}, + setProperty: ( context, path, value ) => {}, globalContext: {}, /* eslint-enable no-unused-vars */ } ); @@ -64,9 +64,9 @@ const useGlobalStylesFromEntities = () => { const getProperty = ( context, family, name ) => userStyles?.[ context ]?.styles?.[ family ]?.[ name ]; - const setProperty = ( context, family, name, value ) => { + const setProperty = ( context, path, value ) => { const newContent = { ...userStyles }; - set( newContent, `${ context }.styles.${ family }.${ name }`, value ); + set( newContent, `${ context }.styles.${ path }`, value ); setContent( JSON.stringify( newContent ) ); }; diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 7ce51e063139d1..9fb710a8f8b727 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -28,7 +28,7 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color', 'text' ), onColorChange: ( value ) => - setProperty( name, 'color', 'text', value ), + setProperty( name, 'color.text', value ), label: __( 'Text color' ), } ); } @@ -38,10 +38,10 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color', 'background' ), onColorChange: ( value ) => - setProperty( name, 'color', 'background', value ), + setProperty( name, 'color.background', value ), gradientValue: getProperty( name, 'color', 'gradient' ), onGradientChange: ( value ) => - setProperty( name, 'color', 'gradient', value ), + setProperty( name, 'color.gradient', value ), label: __( 'Background color' ), } ); } @@ -50,7 +50,7 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color', 'link' ), onColorChange: ( value ) => - setProperty( name, 'color', 'link', value ), + setProperty( name, 'color.link', value ), label: __( 'Link color' ), } ); } diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 112c6bebc0c7ab..453f4fb209d715 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -35,8 +35,7 @@ export default ( { onChange={ ( value ) => setProperty( name, - 'typography', - 'fontSize', + 'typography.fontSize', toPx( value ) ) } @@ -46,7 +45,7 @@ export default ( { - setProperty( name, 'typography', 'lineHeight', value ) + setProperty( name, 'typography.lineHeight', value ) } /> ) } From c511af2049028b341ef3eb0d0ab4d788e9dbbd2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 2 Sep 2020 10:50:43 +0200 Subject: [PATCH 70/84] Migrate getProperty to use path --- .../src/components/editor/global-styles-provider.js | 8 ++++---- packages/edit-site/src/components/sidebar/color-panel.js | 8 ++++---- .../edit-site/src/components/sidebar/typography-panel.js | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 6afaf68ae2567c..b94a1f045306f1 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { set } from 'lodash'; +import { set, get } from 'lodash'; /** * WordPress dependencies @@ -16,7 +16,7 @@ import { getGlobalStyles } from './global-styles-renderer'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ - getProperty: ( context, family, name ) => {}, + getProperty: ( context, path ) => {}, setProperty: ( context, path, value ) => {}, globalContext: {}, /* eslint-enable no-unused-vars */ @@ -61,8 +61,8 @@ const useGlobalStylesFromEntities = () => { ); const userStyles = content ? JSON.parse( content ) : {}; - const getProperty = ( context, family, name ) => - userStyles?.[ context ]?.styles?.[ family ]?.[ name ]; + const getProperty = ( context, path ) => + get( userStyles?.[ context ]?.styles, path ); const setProperty = ( context, path, value ) => { const newContent = { ...userStyles }; diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 9fb710a8f8b727..3d4b43d2e9165b 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -26,7 +26,7 @@ export default ( { if ( supports.includes( TEXT_COLOR ) ) { settings.push( { - colorValue: getProperty( name, 'color', 'text' ), + colorValue: getProperty( name, 'color.text' ), onColorChange: ( value ) => setProperty( name, 'color.text', value ), label: __( 'Text color' ), @@ -36,10 +36,10 @@ export default ( { // TODO: check for gradient support, etc if ( supports.includes( BACKGROUND_COLOR ) ) { settings.push( { - colorValue: getProperty( name, 'color', 'background' ), + colorValue: getProperty( name, 'color.background' ), onColorChange: ( value ) => setProperty( name, 'color.background', value ), - gradientValue: getProperty( name, 'color', 'gradient' ), + gradientValue: getProperty( name, 'color.gradient' ), onGradientChange: ( value ) => setProperty( name, 'color.gradient', value ), label: __( 'Background color' ), @@ -48,7 +48,7 @@ export default ( { if ( supports.includes( LINK_COLOR ) ) { settings.push( { - colorValue: getProperty( name, 'color', 'link' ), + colorValue: getProperty( name, 'color.link' ), onColorChange: ( value ) => setProperty( name, 'color.link', value ), label: __( 'Link color' ), diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 453f4fb209d715..8760385bc38ca4 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -30,7 +30,7 @@ export default ( { { supports.includes( FONT_SIZE ) && ( setProperty( @@ -43,7 +43,7 @@ export default ( { ) } { supports.includes( LINE_HEIGHT ) && ( setProperty( name, 'typography.lineHeight', value ) } From 30b8bcfe17cfad6a9a6cc4be7a5e0b211d60e1c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 2 Sep 2020 10:56:14 +0200 Subject: [PATCH 71/84] Pass object to setProperty to allow updating multiple entries at once --- .../src/components/editor/global-styles-provider.js | 6 ++++-- .../edit-site/src/components/sidebar/color-panel.js | 8 ++++---- .../src/components/sidebar/typography-panel.js | 10 ++++------ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index b94a1f045306f1..08cfd02ffee231 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -64,9 +64,11 @@ const useGlobalStylesFromEntities = () => { const getProperty = ( context, path ) => get( userStyles?.[ context ]?.styles, path ); - const setProperty = ( context, path, value ) => { + const setProperty = ( context, newValues ) => { const newContent = { ...userStyles }; - set( newContent, `${ context }.styles.${ path }`, value ); + Object.keys( newValues ).forEach( ( key ) => { + set( newContent, `${ context }.styles.${ key }`, newValues[ key ] ); + } ); setContent( JSON.stringify( newContent ) ); }; diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 3d4b43d2e9165b..190330bd2b64c2 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -28,7 +28,7 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color.text' ), onColorChange: ( value ) => - setProperty( name, 'color.text', value ), + setProperty( name, {'color.text': value} ), label: __( 'Text color' ), } ); } @@ -38,10 +38,10 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color.background' ), onColorChange: ( value ) => - setProperty( name, 'color.background', value ), + setProperty( name, {'color.background': value} ), gradientValue: getProperty( name, 'color.gradient' ), onGradientChange: ( value ) => - setProperty( name, 'color.gradient', value ), + setProperty( name, {'color.gradient': value} ), label: __( 'Background color' ), } ); } @@ -50,7 +50,7 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color.link' ), onColorChange: ( value ) => - setProperty( name, 'color.link', value ), + setProperty( name, {'color.link': value} ), label: __( 'Link color' ), } ); } diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 8760385bc38ca4..b2375a87593eb2 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -33,11 +33,9 @@ export default ( { getProperty( name, 'typography.fontSize' ) ) } onChange={ ( value ) => - setProperty( - name, - 'typography.fontSize', - toPx( value ) - ) + setProperty( name, { + 'typography.fontSize': toPx( value ), + } ) } /> ) } @@ -45,7 +43,7 @@ export default ( { - setProperty( name, 'typography.lineHeight', value ) + setProperty( name, { 'typography.lineHeight': value } ) } /> ) } From 027db4d6979dfd2ceadbd4af6198fe8ecd4c5327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 2 Sep 2020 10:56:32 +0200 Subject: [PATCH 72/84] prettify --- packages/edit-site/src/components/sidebar/color-panel.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 190330bd2b64c2..ff09b15d585487 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -28,7 +28,7 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color.text' ), onColorChange: ( value ) => - setProperty( name, {'color.text': value} ), + setProperty( name, { 'color.text': value } ), label: __( 'Text color' ), } ); } @@ -38,10 +38,10 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color.background' ), onColorChange: ( value ) => - setProperty( name, {'color.background': value} ), + setProperty( name, { 'color.background': value } ), gradientValue: getProperty( name, 'color.gradient' ), onGradientChange: ( value ) => - setProperty( name, {'color.gradient': value} ), + setProperty( name, { 'color.gradient': value } ), label: __( 'Background color' ), } ); } @@ -50,7 +50,7 @@ export default ( { settings.push( { colorValue: getProperty( name, 'color.link' ), onColorChange: ( value ) => - setProperty( name, {'color.link': value} ), + setProperty( name, { 'color.link': value } ), label: __( 'Link color' ), } ); } From dae9269ff5a4857987e6d0fef89006fa4f105e2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 2 Sep 2020 11:14:24 +0200 Subject: [PATCH 73/84] Make gradients work --- .../src/components/sidebar/color-panel.js | 43 ++++++++++++++++--- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index ff09b15d585487..af849b1604d47c 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -7,7 +7,12 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { BACKGROUND_COLOR, LINK_COLOR, TEXT_COLOR } from '../editor/utils'; +import { + BACKGROUND_COLOR, + LINK_COLOR, + TEXT_COLOR, + GRADIENT_COLOR, +} from '../editor/utils'; export default ( { context: { supports, name }, @@ -17,6 +22,7 @@ export default ( { if ( ! supports.includes( TEXT_COLOR ) && ! supports.includes( BACKGROUND_COLOR ) && + ! supports.includes( GRADIENT_COLOR ) && ! supports.includes( LINK_COLOR ) ) { return null; @@ -34,14 +40,41 @@ export default ( { } // TODO: check for gradient support, etc - if ( supports.includes( BACKGROUND_COLOR ) ) { - settings.push( { + /* + * We want to send the entities API both colors + * in a single request. This is to avod race conditions + * that override the previous callback. + */ + let setColor; + const colorPromise = new Promise( + ( resolve ) => ( setColor = ( value ) => resolve( value ) ) + ); + let setGradient; + const gradientPromise = new Promise( + ( resolve ) => ( setGradient = ( value ) => resolve( value ) ) + ); + Promise.all( [ colorPromise, gradientPromise ] ).then( ( values ) => { + setProperty( name, { ...values[ 0 ], ...values[ 1 ] } ); + } ); + if ( + supports.includes( BACKGROUND_COLOR ) && + supports.includes( GRADIENT_COLOR ) + ) { + const backgroundSettings = { colorValue: getProperty( name, 'color.background' ), onColorChange: ( value ) => - setProperty( name, { 'color.background': value } ), + setColor( { 'color.background': value } ), + }; + + const gradientSettings = { gradientValue: getProperty( name, 'color.gradient' ), onGradientChange: ( value ) => - setProperty( name, { 'color.gradient': value } ), + setGradient( { 'color.gradient': value } ), + }; + + settings.push( { + ...backgroundSettings, + ...gradientSettings, label: __( 'Background color' ), } ); } From 6dfc7e5c050b1f4498734fee7b795f7526c82714 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 2 Sep 2020 11:43:32 +0200 Subject: [PATCH 74/84] Allow background without gradient --- .../src/components/sidebar/color-panel.js | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index af849b1604d47c..52bcb52061e473 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -45,33 +45,48 @@ export default ( { * in a single request. This is to avod race conditions * that override the previous callback. */ - let setColor; - const colorPromise = new Promise( - ( resolve ) => ( setColor = ( value ) => resolve( value ) ) + let setBackground; + let backgroundSettings; + const backgroundPromise = new Promise( + ( resolve ) => ( setBackground = ( value ) => resolve( value ) ) ); let setGradient; + let gradientSettings; const gradientPromise = new Promise( ( resolve ) => ( setGradient = ( value ) => resolve( value ) ) ); - Promise.all( [ colorPromise, gradientPromise ] ).then( ( values ) => { + Promise.all( [ backgroundPromise, gradientPromise ] ).then( ( values ) => { setProperty( name, { ...values[ 0 ], ...values[ 1 ] } ); } ); - if ( - supports.includes( BACKGROUND_COLOR ) && - supports.includes( GRADIENT_COLOR ) - ) { - const backgroundSettings = { + if ( supports.includes( BACKGROUND_COLOR ) ) { + backgroundSettings = { colorValue: getProperty( name, 'color.background' ), onColorChange: ( value ) => - setColor( { 'color.background': value } ), + setBackground( { 'color.background': value } ), }; - - const gradientSettings = { + } else { + backgroundSettings = {}; + // Resolve the background promise, as to fire the setProperty + // callback when the gradient promise is resolved. + setBackground( undefined ); + } + if ( supports.includes( GRADIENT_COLOR ) ) { + gradientSettings = { gradientValue: getProperty( name, 'color.gradient' ), onGradientChange: ( value ) => setGradient( { 'color.gradient': value } ), }; + } else { + gradientSettings = {}; + // Resolve the gradient promise, as to fire the setProperty + // callback when the background promise is resolved. + setGradient( undefined ); + } + if ( + supports.includes( GRADIENT_COLOR ) || + supports.includes( BACKGROUND_COLOR ) + ) { settings.push( { ...backgroundSettings, ...gradientSettings, From 422a3599b41e68d7a90a1c9f46f3243a8e0a0d3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 3 Sep 2020 17:02:13 +0200 Subject: [PATCH 75/84] Revert adding wrong check Since https://github.com/WordPress/gutenberg/pull/22520 was merged on May we've been enqueuing the presets as CSS variables whether or not the theme had support for theme.json as a way to speed up themes using them and get feedback. There are enough checks in place that this is inocuous. --- lib/global-styles.php | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 1d9f309acb2d5c..2473b6127d19f6 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -579,10 +579,6 @@ function gutenberg_experimental_global_styles_get_merged_origins() { * and enqueues the resulting stylesheet. */ function gutenberg_experimental_global_styles_enqueue_assets() { - if ( ! gutenberg_experimental_global_styles_has_theme_json_support() ) { - return; - } - $merged = gutenberg_experimental_global_styles_get_merged_origins(); $stylesheet = gutenberg_experimental_global_styles_get_stylesheet( $merged ); if ( empty( $stylesheet ) ) { From 43a6f12006ed21a42da61ea2ba431295ccdd36ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 3 Sep 2020 17:22:46 +0200 Subject: [PATCH 76/84] Clarify gutenberg_experimental_global_styles_settings --- lib/global-styles.php | 45 +++++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 2473b6127d19f6..59d7e013b34b5f 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -646,16 +646,27 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) { * @return array New block editor settings */ function gutenberg_experimental_global_styles_settings( $settings ) { - if ( - ! gutenberg_experimental_global_styles_has_theme_json_support() || - ! function_exists( 'get_current_screen' ) ) { - return $settings; - } - - $screen = get_current_screen(); $merged = gutenberg_experimental_global_styles_get_merged_origins(); - if ( ! empty( $screen ) && gutenberg_is_edit_site_page( $screen->id ) ) { + // STEP 1: ADD FEATURES + // These need to be added to settings always. + // We also need to unset the deprecated settings defined by core. + $settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged ); + unset( $settings['disableCustomColors'] ); + unset( $settings['disableCustomGradients'] ); + unset( $settings['disableCustomFontSizes'] ); + unset( $settings['enableCustomLineHeight'] ); + + // STEP 2 - IF EDIT-SITE, ADD DATA REQUIRED FOR GLOBAL STYLES SIDEBAR + // The client needs some information to be able to access/update the user styles. + // We only do this if the theme has support for theme.json, though, + // as an indicator that the theme will know how to combine this with its stylesheet. + $screen = get_current_screen(); + if ( + ! empty( $screen ) && + gutenberg_is_edit_site_page( $screen->id ) && + gutenberg_experimental_global_styles_has_theme_json_support() + ) { $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); $settings['__experimentalGlobalStylesContexts'] = gutenberg_experimental_global_styles_get_block_data(); $settings['__experimentalGlobalStylesBaseStyles'] = gutenberg_experimental_global_styles_merge_trees( @@ -663,23 +674,15 @@ function gutenberg_experimental_global_styles_settings( $settings ) { gutenberg_experimental_global_styles_get_theme() ); } else { - // We are in a block editor context, as this function - // is hooked to the block_editor_settings filter. + // STEP 3 - OTHERWISE, ADD STYLES // - // Add the styles for the editor via the settings - // so they get processed as if they were added via add_editor_styles: - // they will get the editor wrapper class. + // If we are in a block editor context, but not in edit-site, + // we need to add the styles via the settings. This is because + // we want them processed as if they were added via add_editor_styles, + // which adds the editor wrapper class. $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet( $merged ) ); } - $settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged ); - - // Unsetting deprecated settings defined by Core. - unset( $settings['disableCustomColors'] ); - unset( $settings['disableCustomGradients'] ); - unset( $settings['disableCustomFontSizes'] ); - unset( $settings['enableCustomLineHeight'] ); - return $settings; } From 63dc5f1764504e71afb60fc6a9fbb599dd56ac6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 3 Sep 2020 17:56:15 +0200 Subject: [PATCH 77/84] Remove incorrect comment --- packages/edit-site/src/components/sidebar/color-panel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 52bcb52061e473..5882f5009abfda 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -39,7 +39,6 @@ export default ( { } ); } - // TODO: check for gradient support, etc /* * We want to send the entities API both colors * in a single request. This is to avod race conditions From 16ed391fb0db05bfdb811a14b17742a2b6249133 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 3 Sep 2020 20:11:29 +0200 Subject: [PATCH 78/84] Refactor GlobalStylesProvider --- .../editor/global-styles-provider.js | 114 ++++++++---------- .../editor/global-styles-renderer.js | 2 +- 2 files changed, 52 insertions(+), 64 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index 08cfd02ffee231..ecf557bd812c84 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -6,13 +6,18 @@ import { set, get } from 'lodash'; /** * WordPress dependencies */ -import { createContext, useContext, useEffect } from '@wordpress/element'; +import { + createContext, + useContext, + useEffect, + useMemo, +} from '@wordpress/element'; import { useEntityProp } from '@wordpress/core-data'; /** * Internal dependencies */ -import { getGlobalStyles } from './global-styles-renderer'; +import getGlobalStyles from './global-styles-renderer'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ @@ -25,76 +30,42 @@ const GlobalStylesContext = createContext( { export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); export default ( { children, baseStyles, contexts } ) => { - const { - userStyles, - getProperty, - setProperty, - } = useGlobalStylesFromEntities(); - - useGlobalStylesEffectToUpdateStylesheet( contexts, baseStyles, userStyles ); - - return ( - - { children } - - ); -}; - -/** - * Hook that exposes an API to retrieve and update user styles. - * - * @param {number} entityId Entity that stores the user data as CPT. - * - * @return {Object} User data as well as getters and setters. - */ -const useGlobalStylesFromEntities = () => { const [ content, setContent ] = useEntityProp( 'postType', 'wp_global_styles', 'content' ); - const userStyles = content ? JSON.parse( content ) : {}; - - const getProperty = ( context, path ) => - get( userStyles?.[ context ]?.styles, path ); - const setProperty = ( context, newValues ) => { - const newContent = { ...userStyles }; - Object.keys( newValues ).forEach( ( key ) => { - set( newContent, `${ context }.styles.${ key }`, newValues[ key ] ); - } ); - setContent( JSON.stringify( newContent ) ); - }; + const userStyles = useMemo( + () => ( content ? JSON.parse( content ) : {} ), + [ content ] + ); - return { - userStyles, - getProperty, - setProperty, - }; -}; + const nextValue = useMemo( + () => ( { + contexts, + getProperty: ( context, path ) => + get( userStyles?.[ context ]?.styles, path ), + setProperty: ( context, newValues ) => { + const newContent = { ...userStyles }; + Object.keys( newValues ).forEach( ( key ) => { + set( + newContent, + `${ context }.styles.${ key }`, + newValues[ key ] + ); + } ); + setContent( JSON.stringify( newContent ) ); + }, + } ), + [ contexts, content ] + ); -const useGlobalStylesEffectToUpdateStylesheet = ( - contexts, - baseStyles, - userStyles -) => { + // Take the DOM node in an effect that only runs on mount. + let styleNode; useEffect( () => { - if ( - typeof contexts !== 'object' || - typeof baseStyles !== 'object' || - typeof userStyles !== 'object' - ) { - return; - } - const embeddedStylesheetId = 'global-styles-inline-css'; - let styleNode = document.getElementById( embeddedStylesheetId ); + styleNode = document.getElementById( embeddedStylesheetId ); if ( ! styleNode ) { styleNode = document.createElement( 'style' ); @@ -103,11 +74,28 @@ const useGlobalStylesEffectToUpdateStylesheet = ( .getElementsByTagName( 'head' )[ 0 ] .appendChild( styleNode ); } + }, [] ); + + useEffect( () => { + if ( + typeof contexts !== 'object' || + typeof baseStyles !== 'object' || + typeof userStyles !== 'object' || + ! styleNode + ) { + return; + } styleNode.innerText = getGlobalStyles( contexts, baseStyles, userStyles ); - }, [ userStyles ] ); + }, [ contexts, baseStyles, content, styleNode ] ); + + return ( + + { children } + + ); }; diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index e50e28bafcfc4d..3c2dfc236dd743 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -39,7 +39,7 @@ const mergeTrees = ( baseData, userData ) => { return mergedTree; }; -export const getGlobalStyles = ( blockData, baseTree, userTree ) => { +export default ( blockData, baseTree, userTree ) => { const styles = []; // Can this be converted to a context, as the global context? // See comment in the server. From fbbac3726aabe4b3812d2cab4cf33a98c46f4e87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 3 Sep 2020 20:14:25 +0200 Subject: [PATCH 79/84] Fix function arguments --- .../edit-site/src/components/editor/global-styles-provider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index ecf557bd812c84..b70e384e523950 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -22,7 +22,7 @@ import getGlobalStyles from './global-styles-renderer'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ getProperty: ( context, path ) => {}, - setProperty: ( context, path, value ) => {}, + setProperty: ( context, newValues ) => {}, globalContext: {}, /* eslint-enable no-unused-vars */ } ); From 3491e920b6b97df89381078d3dd7a32bbf77bb5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 4 Sep 2020 09:35:46 +0200 Subject: [PATCH 80/84] Fix style effect --- .../editor/global-styles-provider.js | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index b70e384e523950..b5a85074e0c085 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -61,11 +61,17 @@ export default ( { children, baseStyles, contexts } ) => { [ contexts, content ] ); - // Take the DOM node in an effect that only runs on mount. - let styleNode; useEffect( () => { + if ( + typeof contexts !== 'object' || + typeof baseStyles !== 'object' || + typeof userStyles !== 'object' + ) { + return; + } + const embeddedStylesheetId = 'global-styles-inline-css'; - styleNode = document.getElementById( embeddedStylesheetId ); + let styleNode = document.getElementById( embeddedStylesheetId ); if ( ! styleNode ) { styleNode = document.createElement( 'style' ); @@ -74,24 +80,13 @@ export default ( { children, baseStyles, contexts } ) => { .getElementsByTagName( 'head' )[ 0 ] .appendChild( styleNode ); } - }, [] ); - - useEffect( () => { - if ( - typeof contexts !== 'object' || - typeof baseStyles !== 'object' || - typeof userStyles !== 'object' || - ! styleNode - ) { - return; - } styleNode.innerText = getGlobalStyles( contexts, baseStyles, userStyles ); - }, [ contexts, baseStyles, content, styleNode ] ); + }, [ contexts, baseStyles, content ] ); return ( From 024880282aa9e3651e0152b2e57080eef663892b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 7 Sep 2020 17:26:43 +0200 Subject: [PATCH 81/84] Disable custom gradients --- packages/edit-site/src/components/sidebar/color-panel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 5882f5009abfda..754bbc2bc53399 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -74,6 +74,7 @@ export default ( { gradientValue: getProperty( name, 'color.gradient' ), onGradientChange: ( value ) => setGradient( { 'color.gradient': value } ), + disableCustomGradients: true }; } else { gradientSettings = {}; From b90617e5375865778d15052832f2e7c0a584200f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 7 Sep 2020 17:26:56 +0200 Subject: [PATCH 82/84] Prettify --- packages/edit-site/src/components/sidebar/color-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 754bbc2bc53399..4a5348f9e027e1 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -74,7 +74,7 @@ export default ( { gradientValue: getProperty( name, 'color.gradient' ), onGradientChange: ( value ) => setGradient( { 'color.gradient': value } ), - disableCustomGradients: true + disableCustomGradients: true, }; } else { gradientSettings = {}; From 76a68c3279c63253d77cb388548bdc2ed62c992e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 7 Sep 2020 18:44:50 +0200 Subject: [PATCH 83/84] Update close button label --- packages/edit-site/src/components/sidebar/default-sidebar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar/default-sidebar.js index d797d20b676a50..75c4e1401c5e86 100644 --- a/packages/edit-site/src/components/sidebar/default-sidebar.js +++ b/packages/edit-site/src/components/sidebar/default-sidebar.js @@ -5,6 +5,7 @@ import { ComplementaryArea, ComplementaryAreaMoreMenuItem, } from '@wordpress/interface'; +import { __ } from '@wordpress/i18n'; export default ( { identifier, title, icon, children } ) => { return ( @@ -14,6 +15,7 @@ export default ( { identifier, title, icon, children } ) => { identifier={ identifier } title={ title } icon={ icon } + closeLabel={ __( 'Close global styles sidebar' ) } > { children } From 20fcaaa7ed9b344bc2070c426c9266bcb61b65ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 8 Sep 2020 09:23:25 +0200 Subject: [PATCH 84/84] gutenberg_is_edit_site_page is only load when the experiment is active --- lib/global-styles.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index 59d7e013b34b5f..851fadec257f74 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -664,6 +664,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { $screen = get_current_screen(); if ( ! empty( $screen ) && + function_exists( 'gutenberg_is_edit_site_page' ) && gutenberg_is_edit_site_page( $screen->id ) && gutenberg_experimental_global_styles_has_theme_json_support() ) {