From b25057599444640e094629929fbdf1c6db53c021 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 19 Aug 2021 13:48:50 +1000 Subject: [PATCH 1/2] Initial commit --- ...-rest-block-editor-settings-controller.php | 2 +- lib/global-styles.php | 12 ++++++++- packages/block-editor/README.md | 1 + .../use-consolidated-styles/index.js | 26 +++++++++++++++++++ packages/block-editor/src/store/defaults.js | 2 ++ .../provider/use-block-editor-settings.js | 1 + 6 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 packages/block-editor/src/components/use-consolidated-styles/index.js diff --git a/lib/class-wp-rest-block-editor-settings-controller.php b/lib/class-wp-rest-block-editor-settings-controller.php index 1d66d1f903b0e..d9dda7b533806 100644 --- a/lib/class-wp-rest-block-editor-settings-controller.php +++ b/lib/class-wp-rest-block-editor-settings-controller.php @@ -149,7 +149,7 @@ public function get_item_schema() { '__experimentalStyles' => array( 'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ), 'type' => 'object', - 'context' => array( 'mobile' ), + 'context' => array( 'mobile', 'post-editor' ), ), 'alignWide' => array( diff --git a/lib/global-styles.php b/lib/global-styles.php index a749a66c40cf0..37eb5903bdc1d 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -91,6 +91,16 @@ function_exists( 'gutenberg_is_edit_site_page' ) && $context = 'site-editor'; } + // Is it a block editor on site that supports block templates? + if ( + is_callable( 'get_current_screen' ) && + get_current_screen()->is_block_editor() && + WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() && + gutenberg_supports_block_templates() + ) { + $context = 'post-editor'; + } + if ( defined( 'REST_REQUEST' ) && REST_REQUEST && @@ -111,7 +121,7 @@ function_exists( 'gutenberg_is_edit_site_page' ) && } $consolidated = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings, $origin ); - if ( 'mobile' === $context ) { + if ( 'mobile' === $context || 'post-editor' === $context ) { $settings['__experimentalStyles'] = $consolidated->get_raw_data()['styles']; } diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 4dc58c5480754..7a93286df11f9 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -554,6 +554,7 @@ _Properties_ - _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory - _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns - _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories +- _\_\_experimentalStyles_ `Array`: Array of objects consolidated styles from core, theme, and user origins. ### SkipToSelectedBlock diff --git a/packages/block-editor/src/components/use-consolidated-styles/index.js b/packages/block-editor/src/components/use-consolidated-styles/index.js new file mode 100644 index 0000000000000..435bfc003437d --- /dev/null +++ b/packages/block-editor/src/components/use-consolidated-styles/index.js @@ -0,0 +1,26 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { useBlockEditContext } from '../block-edit'; +import { store as blockEditorStore } from '../../store'; + +export default function useConsolidatedStyles() { + const { name: blockName } = useBlockEditContext(); + const consolidatedStyles = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + const consolidatedBlockStyles = + getSettings().__experimentalStyles?.blocks || {}; + + + return consolidatedBlockStyles && consolidatedBlockStyles[ blockName ] + ? consolidatedBlockStyles[ blockName ] + : null; + }, [] ); + + return consolidatedStyles; +} diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 49035943cb4a5..9e7646a88fef9 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -28,6 +28,7 @@ export const PREFERENCES_DEFAULTS = { * @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory * @property {Array} __experimentalBlockPatterns Array of objects representing the block patterns * @property {Array} __experimentalBlockPatternCategories Array of objects representing the block pattern categories + * @property {Array} __experimentalStyles Array of objects consolidated styles from core, theme, and user origins. */ export const SETTINGS_DEFAULTS = { alignWide: false, @@ -155,6 +156,7 @@ export const SETTINGS_DEFAULTS = { __experimentalBlockPatterns: [], __experimentalBlockPatternCategories: [], __experimentalSpotlightEntityBlocks: [], + __experimentalStyles: [], // gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults. // The setting is only kept for backward compatibility purposes. diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 21592e506b7bf..f8e011b01f5f3 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -77,6 +77,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { '__experimentalGlobalStylesUserEntityId', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', + '__experimentalStyles', 'alignWide', 'allowedBlockTypes', 'bodyPlaceholder', From 662b09096c5b60998116be19a96f606b84da3a9d Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 19 Aug 2021 15:15:21 +1000 Subject: [PATCH 2/2] Testing with border properties for now --- lib/global-styles.php | 13 +++-- .../use-consolidated-styles/index.js | 53 +++++++++++++++---- packages/block-editor/src/hooks/border.js | 36 +++++++++++-- 3 files changed, 83 insertions(+), 19 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 37eb5903bdc1d..8396ce668f578 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -81,24 +81,27 @@ function gutenberg_experimental_global_styles_enqueue_assets() { function gutenberg_experimental_global_styles_settings( $settings ) { // Set what is the context for this data request. $context = 'all'; + + // Is it a block editor on site that supports block templates? if ( is_callable( 'get_current_screen' ) && + get_current_screen()->is_block_editor() && function_exists( 'gutenberg_is_edit_site_page' ) && - gutenberg_is_edit_site_page( get_current_screen()->id ) && + ! gutenberg_is_edit_site_page( get_current_screen()->id ) && WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() && gutenberg_supports_block_templates() ) { - $context = 'site-editor'; + $context = 'post-editor'; } - // Is it a block editor on site that supports block templates? if ( is_callable( 'get_current_screen' ) && - get_current_screen()->is_block_editor() && + function_exists( 'gutenberg_is_edit_site_page' ) && + gutenberg_is_edit_site_page( get_current_screen()->id ) && WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() && gutenberg_supports_block_templates() ) { - $context = 'post-editor'; + $context = 'site-editor'; } if ( diff --git a/packages/block-editor/src/components/use-consolidated-styles/index.js b/packages/block-editor/src/components/use-consolidated-styles/index.js index 435bfc003437d..e07b4778b8c81 100644 --- a/packages/block-editor/src/components/use-consolidated-styles/index.js +++ b/packages/block-editor/src/components/use-consolidated-styles/index.js @@ -9,18 +9,51 @@ import { useSelect } from '@wordpress/data'; import { useBlockEditContext } from '../block-edit'; import { store as blockEditorStore } from '../../store'; -export default function useConsolidatedStyles() { +/** + * // TODO This is an example targeted at specific style properties. We could consolidate at the highest level, e.g., return a merged styles object for all in packages/block-editor/src/hooks/style.js + * Hook that retrieves consolidated styles from the block editor store, + * and merges them with incoming user styles for a particular property. + * + * @param {Object} userStyles User-selected styles from the editor. + * @param {string} styleProperty Targets a specific property. If not passed then we return the entire merged object. + * + * @return {Object} The merged user styles, or original user styles if no consolidated styles. + * + * @example + * ```js + * const consolidatedStyles = useConsolidatedStyles( props.attributes?.style, 'border' ); + * ``` + */ +export default function useConsolidatedStyles( userStyles, styleProperty ) { const { name: blockName } = useBlockEditContext(); - const consolidatedStyles = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - const consolidatedBlockStyles = - getSettings().__experimentalStyles?.blocks || {}; + const consolidatedStyles = useSelect( + ( select ) => { + const { getSettings } = select( blockEditorStore ); + const consolidatedBlockStyles = + getSettings().__experimentalStyles?.blocks || {}; + + return consolidatedBlockStyles && + consolidatedBlockStyles[ blockName ] + ? consolidatedBlockStyles[ blockName ] + : undefined; + }, + [ blockName, styleProperty ] + ); + + if ( ! userStyles || ! styleProperty ) { + return userStyles; + } - return consolidatedBlockStyles && consolidatedBlockStyles[ blockName ] - ? consolidatedBlockStyles[ blockName ] - : null; - }, [] ); + if ( consolidatedStyles ) { + return { + ...userStyles, + [ styleProperty ]: { + ...consolidatedStyles[ styleProperty ], + ...userStyles[ styleProperty ], + }, + }; + } - return consolidatedStyles; + return userStyles; } diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 64872c5c470f0..086735fcd9cf5 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n'; */ import InspectorControls from '../components/inspector-controls'; import useSetting from '../components/use-setting'; +import useConsolidatedStyles from '../components/use-consolidated-styles'; import { BorderColorEdit } from './border-color'; import { BorderRadiusEdit } from './border-radius'; import { BorderStyleEdit } from './border-style'; @@ -38,6 +39,29 @@ export function BorderPanel( props ) { useSetting( 'border.customWidth' ) && hasBorderSupport( props.name, 'width' ); + // TODO + // This is an example targeted at border for now while testing. + // We could consolidate at the highest level: packages/block-editor/src/hooks/style.js + const consolidatedStyles = useConsolidatedStyles( + props.attributes?.style, + 'border' + ); + + // TODO abstract this to the hook? + // TODO We'll have to revisit defaults here. + // E.g., if the user removes a value from the post editor, what does that mean? + // Do we automatically default to the global style value, or do we interpret empty as `0` for border width for example? + // At which point do we reinstate the global style value? + const mergedProps = { + ...props, + attributes: { + ...props.attributes, + style: { + ...consolidatedStyles, + }, + }, + }; + if ( isDisabled || ! isSupported ) { return null; } @@ -51,12 +75,16 @@ export function BorderPanel( props ) { > { ( isWidthSupported || isStyleSupported ) && (
- { isWidthSupported && } - { isStyleSupported && } + { isWidthSupported && ( + + ) } + { isStyleSupported && ( + + ) }
) } - { isColorSupported && } - { isRadiusSupported && } + { isColorSupported && } + { isRadiusSupported && } );