From 097b351862165379bdf0795f0d18bcabf84992d1 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 24 Jul 2023 13:41:52 +0100 Subject: [PATCH] Block editor: remove element context and use block editor settings instead --- .../src/components/duotone/components.js | 133 ------------------ .../src/components/duotone/index.js | 7 - .../src/components/duotone/utils.js | 65 +++++++++ .../src/components/editor-styles/index.js | 13 +- .../global-styles/use-global-styles-output.js | 12 +- packages/block-editor/src/components/index.js | 1 - packages/block-editor/src/hooks/duotone.js | 99 +++++++------ .../src/components/visual-editor/index.js | 7 +- 8 files changed, 140 insertions(+), 197 deletions(-) delete mode 100644 packages/block-editor/src/components/duotone/components.js delete mode 100644 packages/block-editor/src/components/duotone/index.js diff --git a/packages/block-editor/src/components/duotone/components.js b/packages/block-editor/src/components/duotone/components.js deleted file mode 100644 index 471c03502c588c..00000000000000 --- a/packages/block-editor/src/components/duotone/components.js +++ /dev/null @@ -1,133 +0,0 @@ -/** - * WordPress dependencies - */ -import { SVG } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { __unstableGetValuesFromColors as getValuesFromColors } from './index'; - -/** - * SVG and stylesheet needed for rendering the duotone filter. - * - * @param {Object} props Duotone props. - * @param {string} props.selector Selector to apply the filter to. - * @param {string} props.id Unique id for this duotone filter. - * - * @return {WPElement} Duotone element. - */ -export function DuotoneStylesheet( { selector, id } ) { - const css = ` -${ selector } { - filter: url( #${ id } ); -} -`; - return ; -} - -/** - * Stylesheet for disabling a global styles duotone filter. - * - * @param {Object} props Duotone props. - * @param {string} props.selector Selector to disable the filter for. - * - * @return {WPElement} Filter none style element. - */ -export function DuotoneUnsetStylesheet( { selector } ) { - const css = ` -${ selector } { - filter: none; -} -`; - return ; -} - -/** - * The SVG part of the duotone filter. - * - * @param {Object} props Duotone props. - * @param {string} props.id Unique id for this duotone filter. - * @param {string[]} props.colors Color strings from dark to light. - * - * @return {WPElement} Duotone SVG. - */ -export function DuotoneFilter( { id, colors } ) { - const values = getValuesFromColors( colors ); - return ( - - - - - - - - - - - - - - - ); -} - -/** - * SVG from a duotone preset - * - * @param {Object} props Duotone props. - * @param {Object} props.preset Duotone preset settings. - * - * @return {WPElement} Duotone element. - */ -export function PresetDuotoneFilter( { preset } ) { - return ( - - ); -} diff --git a/packages/block-editor/src/components/duotone/index.js b/packages/block-editor/src/components/duotone/index.js deleted file mode 100644 index 919d67780d7c7d..00000000000000 --- a/packages/block-editor/src/components/duotone/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export { getValuesFromColors as __unstableGetValuesFromColors } from './utils'; -export { - DuotoneFilter as __unstableDuotoneFilter, - PresetDuotoneFilter as __unstablePresetDuotoneFilter, - DuotoneStylesheet as __unstableDuotoneStylesheet, - DuotoneUnsetStylesheet as __unstableDuotoneUnsetStylesheet, -} from './components'; diff --git a/packages/block-editor/src/components/duotone/utils.js b/packages/block-editor/src/components/duotone/utils.js index d7cbd0ccba26e9..ac58eca18bb9f8 100644 --- a/packages/block-editor/src/components/duotone/utils.js +++ b/packages/block-editor/src/components/duotone/utils.js @@ -23,3 +23,68 @@ export function getValuesFromColors( colors = [] ) { return values; } + +/** + * Stylesheet for disabling a global styles duotone filter. + * + * @param {string} selector Selector to disable the filter for. + * + * @return {string} Filter none style. + */ +export function getDuotoneUnsetStylesheet( selector ) { + return `${ selector }{filter:none}`; +} + +/** + * SVG and stylesheet needed for rendering the duotone filter. + * + * @param {string} selector Selector to apply the filter to. + * @param {string} id Unique id for this duotone filter. + * + * @return {string} Duotone filter style. + */ +export function getDuotoneStylesheet( selector, id ) { + return `${ selector }{filter:url(#${ id })}`; +} + +/** + * The SVG part of the duotone filter. + * + * @param {string} id Unique id for this duotone filter. + * @param {string[]} colors Color strings from dark to light. + * + * @return {string} Duotone SVG. + */ +export function getDuotoneFilter( id, colors ) { + const values = getValuesFromColors( colors ); + return ` +`; +} diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js index 66f2a08f115a4a..a7cf73db4d53ec 100644 --- a/packages/block-editor/src/components/editor-styles/index.js +++ b/packages/block-editor/src/components/editor-styles/index.js @@ -10,11 +10,13 @@ import a11yPlugin from 'colord/plugins/a11y'; */ import { SVG } from '@wordpress/components'; import { useCallback, useMemo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import transformStyles from '../../utils/transform-styles'; +import { store as blockEditorStore } from '../../store'; const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper'; extend( [ namesPlugin, a11yPlugin ] ); @@ -68,9 +70,16 @@ function useDarkThemeBodyClassName( styles ) { } export default function EditorStyles( { styles } ) { + const settings = useSelect( + ( select ) => select( blockEditorStore ).getSettings().styles, + [] + ); const stylesArray = useMemo( - () => Object.values( styles ?? [] ), - [ styles ] + () => [ + ...Object.values( settings ?? [] ), + ...Object.values( styles ?? [] ), + ], + [ styles, settings ] ); const transformedStyles = useMemo( () => diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index ec1a6270917f0a..b394c8a9f921e4 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -9,7 +9,7 @@ import { store as blocksStore, } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { renderToString, useContext, useMemo } from '@wordpress/element'; +import { useContext, useMemo } from '@wordpress/element'; import { getCSSRules } from '@wordpress/style-engine'; /** @@ -23,7 +23,7 @@ import { } from './typography-utils'; import { GlobalStylesContext } from './context'; import { useGlobalSetting } from './hooks'; -import { PresetDuotoneFilter } from '../duotone/components'; +import { getDuotoneFilter } from '../duotone/utils'; import { getGapCSSValue } from '../../hooks/gap'; import { store as blockEditorStore } from '../../store'; import { LAYOUT_DEFINITIONS } from '../../layouts/definitions'; @@ -163,11 +163,9 @@ function getPresetsSvgFilters( blockPresets = {} ) { .filter( ( origin ) => presetByOrigin[ origin ] ) .flatMap( ( origin ) => presetByOrigin[ origin ].map( ( preset ) => - renderToString( - + getDuotoneFilter( + `wp-duotone-${ preset.slug }`, + preset.colors ) ) ) diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 5876eb4ec01e9e..bfd696154cb214 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -5,7 +5,6 @@ export * from './colors'; export * from './gradients'; export * from './font-sizes'; -export * from './duotone'; export { AlignmentControl, AlignmentToolbar } from './alignment-control'; export { default as Autocomplete } from './autocomplete'; export { diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 2ecd35c99ee8c4..db9edaee48e54b 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -15,7 +15,8 @@ import { } from '@wordpress/blocks'; import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; import { addFilter } from '@wordpress/hooks'; -import { useMemo, useContext, createPortal } from '@wordpress/element'; +import { useMemo, useEffect } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -26,45 +27,22 @@ import { __experimentalDuotoneControl as DuotoneControl, useSetting, } from '../components'; -import BlockList from '../components/block-list'; import { - __unstableDuotoneFilter as DuotoneFilter, - __unstableDuotoneStylesheet as DuotoneStylesheet, - __unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet, -} from '../components/duotone'; + getDuotoneFilter, + getDuotoneStylesheet, + getDuotoneUnsetStylesheet, +} from '../components/duotone/utils'; import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector'; import { scopeSelector } from '../components/global-styles/utils'; import { useBlockSettings } from './utils'; import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel'; import { useBlockEditingMode } from '../components/block-editing-mode'; +import { store as blockEditorStore } from '../store'; const EMPTY_ARRAY = []; extend( [ namesPlugin ] ); -/** - * SVG and stylesheet needed for rendering the duotone filter. - * - * @param {Object} props Duotone props. - * @param {string} props.selector Selector to apply the filter to. - * @param {string} props.id Unique id for this duotone filter. - * @param {string[]|"unset"} props.colors Array of RGB color strings ordered from dark to light. - * - * @return {WPElement} Duotone element. - */ -function InlineDuotone( { selector, id, colors } ) { - if ( colors === 'unset' ) { - return ; - } - - return ( - <> - - - - ); -} - function useMultiOriginPresets( { presetSetting, defaultSetting } ) { const disableDefault = ! useSetting( defaultSetting ); const userPresets = @@ -243,12 +221,26 @@ const withDuotoneControls = createHigherOrderComponent( 'withDuotoneControls' ); +function addStyle( styles, style ) { + let i = styles.length; + while ( i-- ) { + if ( styles[ i ].id === style.id ) { + styles[ i ] = style; + return styles; + } + } + + styles.push( style ); + return styles; +} + function DuotoneStyles( { id: filterId, selector: duotoneSelector, attribute: duotoneAttr, } ) { - const element = useContext( BlockList.__unstableElementContext ); + const { getSettings } = useSelect( blockEditorStore ); + const { updateSettings } = useDispatch( blockEditorStore ); const duotonePalette = useMultiOriginPresets( { presetSetting: 'color.duotone', @@ -290,25 +282,46 @@ function DuotoneStyles( { // Assuming the selector part is a subclass selector (not a tag name) // so we can prepend the filter id class. If we want to support elements // such as `img` or namespaces, we'll need to add a case for that here. - return `.editor-styles-wrapper .${ filterId }${ selectorPart.trim() }`; + return `.${ filterId }${ selectorPart.trim() }`; } ); const selector = selectorsScoped.join( ', ' ); const isValidFilter = Array.isArray( colors ) || colors === 'unset'; - return ( - element && - isValidFilter && - createPortal( - , - element - ) - ); + useEffect( () => { + const settings = getSettings(); + const styles = [ ...settings.styles ]; + + addStyle( styles, { + id: filterId, + css: + colors !== 'unset' + ? getDuotoneStylesheet( selector, filterId ) + : getDuotoneUnsetStylesheet( selector ), + __unstableType: 'presets', + } ); + addStyle( styles, { + id: `duotone-${ filterId }`, + assets: + colors !== 'unset' ? getDuotoneFilter( filterId, colors ) : '', + __unstableType: 'svgs', + } ); + + updateSettings( { + ...settings, + styles, + } ); + }, [ + getSettings, + updateSettings, + isValidFilter, + selector, + filterId, + colors, + ] ); + + return null; } /** diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index fe14ef05561134..387637159cdf28 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -101,7 +101,7 @@ function getPostContentAttributes( blocks ) { } } -export default function VisualEditor( { styles } ) { +export default function VisualEditor() { const { deviceType, isWelcomeGuideVisible, @@ -313,9 +313,8 @@ export default function VisualEditor( { styles } ) { titleRef?.current?.focus(); }, [ isWelcomeGuideVisible, isCleanNewPost ] ); - styles = useMemo( + const styles = useMemo( () => [ - ...styles, { // We should move this in to future to the body. css: @@ -325,7 +324,7 @@ export default function VisualEditor( { styles } ) { : '' ), }, ], - [ styles ] + [ paddingBottom ] ); // Add some styles for alignwide/alignfull Post Content and its children.