diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 8972370cac6897..5fe3b16043890a 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -108,9 +108,10 @@ function ScaledBlockPreview( {
: minHeight,
} }
>
-
- { contentResizeListener }
-
+
+ { contentResizeListener }
+
+
);
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index cfbe8bfebc3e24..980bea98b149f1 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -9,18 +9,23 @@ import a11yPlugin from 'colord/plugins/a11y';
* WordPress dependencies
*/
import { SVG } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import {
+ useCallback,
+ useMemo,
+ createContext,
+ useState,
+} from '@wordpress/element';
/**
* Internal dependencies
*/
import transformStyles from '../../utils/transform-styles';
-import { store as blockEditorStore } from '../../store';
const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
extend( [ namesPlugin, a11yPlugin ] );
+export const updateStyleContext = createContext();
+
function useDarkThemeBodyClassName( styles ) {
return useCallback(
( node ) => {
@@ -69,18 +74,42 @@ function useDarkThemeBodyClassName( styles ) {
);
}
-export default function EditorStyles( { styles } ) {
- const settings = useSelect(
- ( select ) => select( blockEditorStore ).getSettings().styles,
- []
- );
- const stylesArray = useMemo(
- () => [
- ...Object.values( settings ?? [] ),
- ...Object.values( styles ?? [] ),
- ],
- [ styles, settings ]
- );
+export default function EditorStyles( { styles, children } ) {
+ const [ overrides, setOverrides ] = useState( [] );
+ const updateStyle = useCallback( ( style ) => {
+ setOverrides( ( _overrides ) => {
+ const index = _overrides.findIndex(
+ ( override ) => override.id === style.id
+ );
+ if ( index === -1 ) {
+ return [ ..._overrides, style ];
+ }
+ return [
+ ..._overrides.slice( 0, index ),
+ style,
+ ..._overrides.slice( index + 1 ),
+ ];
+ } );
+ return () => {
+ setOverrides( ( _overrides ) =>
+ _overrides.filter( ( override ) => override.id !== style.id )
+ );
+ };
+ }, [] );
+ const stylesArray = useMemo( () => {
+ const _styles = Object.values( styles ?? [] );
+
+ for ( const override of overrides ) {
+ const index = _styles.findIndex( ( { id } ) => id === override.id );
+ if ( index === -1 ) {
+ _styles.push( override );
+ } else {
+ _styles[ index ] = override;
+ }
+ }
+
+ return _styles;
+ }, [ styles, overrides ] );
const transformedStyles = useMemo(
() =>
transformStyles(
@@ -100,7 +129,7 @@ export default function EditorStyles( { styles } ) {
);
return (
- <>
+
{ /* Use an empty style element to have a document reference,
but this could be any element. */ }
@@ -121,6 +150,7 @@ export default function EditorStyles( { styles } ) {
} }
dangerouslySetInnerHTML={ { __html: transformedSvgs } }
/>
- >
+ { children }
+
);
}
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index db9edaee48e54b..147b3bfdcc5665 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -15,8 +15,7 @@ import {
} from '@wordpress/blocks';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
-import { useMemo, useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useEffect, useContext } from '@wordpress/element';
/**
* Internal dependencies
@@ -37,7 +36,7 @@ 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';
+import { updateStyleContext } from '../components/editor-styles';
const EMPTY_ARRAY = [];
@@ -221,27 +220,11 @@ 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 { getSettings } = useSelect( blockEditorStore );
- const { updateSettings } = useDispatch( blockEditorStore );
-
const duotonePalette = useMultiOriginPresets( {
presetSetting: 'color.duotone',
defaultSetting: 'color.defaultDuotone',
@@ -289,11 +272,12 @@ function DuotoneStyles( {
const isValidFilter = Array.isArray( colors ) || colors === 'unset';
+ const updateStyle = useContext( updateStyleContext );
+
useEffect( () => {
- const settings = getSettings();
- const styles = [ ...settings.styles ];
+ if ( ! isValidFilter ) return;
- addStyle( styles, {
+ const clearStyle = updateStyle( {
id: filterId,
css:
colors !== 'unset'
@@ -301,25 +285,18 @@ function DuotoneStyles( {
: getDuotoneUnsetStylesheet( selector ),
__unstableType: 'presets',
} );
- addStyle( styles, {
+ const clearFilter = updateStyle( {
id: `duotone-${ filterId }`,
assets:
colors !== 'unset' ? getDuotoneFilter( filterId, colors ) : '',
__unstableType: 'svgs',
} );
- updateSettings( {
- ...settings,
- styles,
- } );
- }, [
- getSettings,
- updateSettings,
- isValidFilter,
- selector,
- filterId,
- colors,
- ] );
+ return () => {
+ clearStyle();
+ clearFilter();
+ };
+ }, [ isValidFilter, colors, selector, filterId, updateStyle ] );
return null;
}
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index 6a5a734bef9db1..0a0e23807a85a1 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -115,16 +115,17 @@ export default function SidebarBlockEditor( {
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 387637159cdf28..186eff28ed8ef8 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -49,15 +49,16 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
if ( ! shouldIframe ) {
return (
<>
-
-
- { children }
-
+
+
+ { children }
+
+
>
);
}
@@ -69,8 +70,7 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
style={ { width: '100%', height: '100%', display: 'block' } }
name="editor-canvas"
>
-
- { children }
+ { children }
);
}
@@ -101,7 +101,7 @@ function getPostContentAttributes( blocks ) {
}
}
-export default function VisualEditor() {
+export default function VisualEditor( { styles } ) {
const {
deviceType,
isWelcomeGuideVisible,
@@ -313,8 +313,9 @@ export default function VisualEditor() {
titleRef?.current?.focus();
}, [ isWelcomeGuideVisible, isCleanNewPost ] );
- const styles = useMemo(
+ styles = useMemo(
() => [
+ ...styles,
{
// We should move this in to future to the body.
css:
@@ -324,7 +325,7 @@ export default function VisualEditor() {
: '' ),
},
],
- [ paddingBottom ]
+ [ styles, paddingBottom ]
);
// Add some styles for alignwide/alignfull Post Content and its children.
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 a8bbe75e0261b5..de23c79425aade 100644
--- a/packages/edit-site/src/components/block-editor/editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -78,21 +78,22 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
{ ...props }
{ ...( canvasMode === 'view' ? viewModeProps : {} ) }
>
-
-
- { children }
+
+
+ { children }
+
);
}
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index 1bbc2b2f4d59e8..9fe42d2b2b4e32 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -124,158 +124,164 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
onMouseLeave={ () => setIsHovered( false ) }
tabIndex={ -1 }
>
-
-
+
-
-
- Aa
-
-
- { highlightedColors.map(
- ( { slug, color }, index ) => (
-
+ Aa
+
+
+ { highlightedColors.map(
+ ( { slug, color }, index ) => (
+
+ )
+ ) }
+
+
+
+
+
+ { paletteColors
+ .slice( 0, 4 )
+ .map( ( { color }, index ) => (
+
- )
- ) }
-
-
-
-
-
+
+
- { paletteColors
- .slice( 0, 4 )
- .map( ( { color }, index ) => (
+
+ { label && (
- ) ) }
-
-
-
-
- { label && (
-
- { label }
-
- ) }
-
+ >
+ { label }
+
+ ) }
+
+
-
+
) }
>
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index 4757c9b27213ea..7fb70c1e3f2a2b 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -80,22 +80,23 @@ function Revisions( { onClose, userConfig, blocks } ) {
name="revisions"
tabIndex={ 0 }
>
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index b6931b8e656653..6053517171d24b 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -304,35 +304,38 @@ const StyleBookBody = ( {
tabIndex={ 0 }
{ ...( onClick ? buttonModeProps : {} ) }
>
-
-
- 600,
- } ) }
- examples={ examples }
- category={ category }
- label={
- title
- ? sprintf(
- // translators: %s: Category of blocks, e.g. Text.
- __( 'Examples of blocks in the %s category' ),
- title
- )
- : __( 'Examples of blocks' )
- }
- isSelected={ isSelected }
- onSelect={ onSelect }
- />
+ STYLE_BOOK_IFRAME_STYLES +
+ buttonModeStyles
+ }
+
+ 600,
+ } ) }
+ examples={ examples }
+ category={ category }
+ label={
+ title
+ ? sprintf(
+ // translators: %s: Category of blocks, e.g. Text.
+ __(
+ 'Examples of blocks in the %s category'
+ ),
+ title
+ )
+ : __( 'Examples of blocks' )
+ }
+ isSelected={ isSelected }
+ onSelect={ onSelect }
+ />
+
);
};
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
index 386d4730e4dab4..fdf49226fb7925 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -40,14 +40,15 @@ export default function WidgetAreasBlockEditorContent( {
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);