diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index b51fec1c5c99f..1884283c3b150 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -449,3 +449,4 @@ function gutenberg_render_duotone_support( $block_content, $block ) { add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 ); add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 ); add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 ); +add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 ); diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 090696fca0a14..fca2a657ed459 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -201,6 +201,45 @@ public static function output_footer_assets() { } } + /** + * Adds the duotone SVGs and CSS custom properties to the editor settings so + * they can be pulled in by the EditorStyles component in JS and rendered in + * the post editor. + * + * @param array $settings The block editor settings from the `block_editor_settings_all` filter. + * @return array The editor settings with duotone SVGs and CSS custom properties. + */ + public static function add_editor_settings( $settings ) { + $duotone_svgs = ''; + $duotone_css = 'body{'; + foreach ( self::$global_styles_presets as $filter_data ) { + $duotone_svgs .= gutenberg_get_duotone_filter_svg( $filter_data ); + $duotone_css .= self::get_css_custom_property_declaration( $filter_data ); + } + $duotone_css .= '}'; + + if ( ! isset( $settings['styles'] ) ) { + $settings['styles'] = array(); + } + + $settings['styles'][] = array( + 'assets' => $duotone_svgs, + // The 'svgs' type is new in 6.3 and requires the corresponding JS changes in the EditorStyles component to work. + '__unstableType' => 'svgs', + 'isGlobalStyles' => false, + ); + + $settings['styles'][] = array( + 'css' => $duotone_css, + // This must be set and must be something other than 'theme' or they will be stripped out in the post editor component. + '__unstableType' => 'presets', + // These styles are no longer generated by global styles, so this must be false or they will be stripped out in gutenberg_get_block_editor_settings. + 'isGlobalStyles' => false, + ); + + return $settings; + } + /** * Appends the used global style duotone filter CSS Vars to the inline global styles CSS */ diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index 287bcd5b18566..ef7aa76e5af02 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -12,7 +12,6 @@ import { Disabled } from '@wordpress/components'; import BlockList from '../block-list'; import Iframe from '../iframe'; import EditorStyles from '../editor-styles'; -import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone'; import { store } from '../../store'; // This is used to avoid rendering the block list if the sizes change. @@ -32,11 +31,10 @@ function ScaledBlockPreview( { const [ contentResizeListener, { height: contentHeight } ] = useResizeObserver(); - const { styles, duotone } = useSelect( ( select ) => { + const { styles } = useSelect( ( select ) => { const settings = select( store ).getSettings(); return { styles: settings.styles, - duotone: settings.__experimentalFeatures?.color?.duotone, }; }, [] ); @@ -56,10 +54,6 @@ function ScaledBlockPreview( { return styles; }, [ styles, additionalStyles ] ); - const svgFilters = useMemo( () => { - return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ]; - }, [ duotone ] ); - // Initialize on render instead of module top level, to avoid circular dependency issues. MemoizedBlockList = MemoizedBlockList || pure( BlockList ); @@ -76,7 +70,6 @@ function ScaledBlockPreview( { } } > diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js index b6288f1afb452..819efe5721127 100644 --- a/packages/block-editor/src/components/editor-styles/index.js +++ b/packages/block-editor/src/components/editor-styles/index.js @@ -8,6 +8,7 @@ import a11yPlugin from 'colord/plugins/a11y'; /** * WordPress dependencies */ +import { SVG } from '@wordpress/components'; import { useCallback, useMemo } from '@wordpress/element'; /** @@ -68,7 +69,20 @@ function useDarkThemeBodyClassName( styles ) { export default function EditorStyles( { styles } ) { const transformedStyles = useMemo( - () => transformStyles( styles, EDITOR_STYLES_SELECTOR ), + () => + transformStyles( + styles.filter( ( style ) => style?.css ), + EDITOR_STYLES_SELECTOR + ), + [ styles ] + ); + + const transformedSvgs = useMemo( + () => + styles + .filter( ( style ) => style.__unstableType === 'svgs' ) + .map( ( style ) => style.assets ) + .join( '' ), [ styles ] ); @@ -80,6 +94,20 @@ export default function EditorStyles( { styles } ) { { transformedStyles.map( ( css, index ) => ( ) ) } + ); } 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 cce2b61f0786e..fd03a9fcc446a 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 @@ -13,7 +13,7 @@ import { store as blocksStore, } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { useContext, useMemo } from '@wordpress/element'; +import { renderToString, useContext, useMemo } from '@wordpress/element'; import { getCSSRules } from '@wordpress/style-engine'; /** @@ -144,13 +144,16 @@ function getPresetsSvgFilters( blockPresets = {} ) { return [ 'default', 'theme' ] .filter( ( origin ) => presetByOrigin[ origin ] ) .flatMap( ( origin ) => - presetByOrigin[ origin ].map( ( preset ) => ( - - ) ) - ); + presetByOrigin[ origin ].map( ( preset ) => + renderToString( + + ) + ) + ) + .join( '' ); } ); } @@ -1049,9 +1052,9 @@ export function useGlobalStylesOutput() { hasFallbackGapSupport, disableLayoutStyles ); + const svgs = toSvgFilters( mergedConfig, blockSelectors ); - const filters = toSvgFilters( mergedConfig, blockSelectors ); - const stylesheets = [ + const styles = [ { css: customProperties, isGlobalStyles: true, @@ -1065,6 +1068,11 @@ export function useGlobalStylesOutput() { css: mergedConfig.styles.css ?? '', isGlobalStyles: true, }, + { + assets: svgs, + __unstableType: 'svg', + isGlobalStyles: true, + }, ]; // Loop through the blocks to check if there are custom CSS values. @@ -1073,7 +1081,7 @@ export function useGlobalStylesOutput() { getBlockTypes().forEach( ( blockType ) => { if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) { const selector = blockSelectors[ blockType.name ].selector; - stylesheets.push( { + styles.push( { css: processCSSNesting( mergedConfig.styles.blocks[ blockType.name ]?.css, selector @@ -1083,7 +1091,7 @@ export function useGlobalStylesOutput() { } } ); - return [ stylesheets, mergedConfig.settings, filters ]; + return [ styles, mergedConfig.settings ]; }, [ hasBlockGapSupport, hasFallbackGapSupport, diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index ec53dc380aace..fd7614ea9b2c6 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -67,12 +67,12 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) { return ( ); diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index 4489b78ef520f..1f64c8c4c4f9c 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -31,33 +31,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) { const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); const deviceStyles = useResizeCanvas( deviceType ); const mouseMoveTypingRef = useMouseMoveTypingReset(); + return ( ); diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js index 3d0df911685cb..14fc4adf25f7e 100644 --- a/packages/edit-site/src/components/global-styles-renderer/index.js +++ b/packages/edit-site/src/components/global-styles-renderer/index.js @@ -14,7 +14,7 @@ import { unlock } from '../../private-apis'; const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis ); function useGlobalStylesRenderer() { - const [ styles, settings, svgFilters ] = useGlobalStylesOutput(); + const [ styles, settings ] = useGlobalStylesOutput(); const { getSettings } = useSelect( editSiteStore ); const { updateSettings } = useDispatch( editSiteStore ); @@ -30,7 +30,6 @@ function useGlobalStylesRenderer() { updateSettings( { ...currentStoreSettings, styles: [ ...nonGlobalStyles, ...styles ], - svgFilters, __experimentalFeatures: settings, } ); }, [ styles, settings ] ); diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index fa27af246448f..395ecd33fbc3b 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -117,7 +117,6 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => { { isReady && (