From 935f69a1915d4744888d5b041366802fad4ee348 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 10 Aug 2023 14:18:21 +0300
Subject: [PATCH] Use context instead to filter

---
 .../src/components/block-preview/auto.js      |   7 +-
 .../src/components/editor-styles/index.js     |  64 +++--
 packages/block-editor/src/hooks/duotone.js    |  47 +---
 .../components/sidebar-block-editor/index.js  |  21 +-
 .../src/components/visual-editor/index.js     |  29 +-
 .../components/block-editor/editor-canvas.js  |  31 ++-
 .../src/components/global-styles/preview.js   | 260 +++++++++---------
 .../src/components/revisions/index.js         |  33 +--
 .../src/components/style-book/index.js        |  59 ++--
 .../index.js                                  |  17 +-
 10 files changed, 295 insertions(+), 273 deletions(-)

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,
 				} }
 			>
-				<EditorStyles styles={ editorStyles } />
-				{ contentResizeListener }
-				<MemoizedBlockList renderAppender={ false } />
+				<EditorStyles styles={ editorStyles }>
+					{ contentResizeListener }
+					<MemoizedBlockList renderAppender={ false } />
+				</EditorStyles>
 			</Iframe>
 		</Disabled>
 	);
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 (
-		<>
+		<updateStyleContext.Provider value={ updateStyle }>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
 			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
@@ -121,6 +150,7 @@ export default function EditorStyles( { styles } ) {
 				} }
 				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
 			/>
-		</>
+			{ children }
+		</updateStyleContext.Provider>
 	);
 }
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( {
 
 				<CopyHandler>
 					<BlockTools>
-						<EditorStyles styles={ settings.defaultEditorStyles } />
-						<BlockSelectionClearer>
-							<WritingFlow className="editor-styles-wrapper">
-								<ObserveTyping>
-									<BlockList
-										renderAppender={ BlockAppender }
-									/>
-								</ObserveTyping>
-							</WritingFlow>
-						</BlockSelectionClearer>
+						<EditorStyles styles={ settings.defaultEditorStyles }>
+							<BlockSelectionClearer>
+								<WritingFlow className="editor-styles-wrapper">
+									<ObserveTyping>
+										<BlockList
+											renderAppender={ BlockAppender }
+										/>
+									</ObserveTyping>
+								</WritingFlow>
+							</BlockSelectionClearer>
+						</EditorStyles>
 					</BlockTools>
 				</CopyHandler>
 
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 (
 			<>
-				<EditorStyles styles={ styles } />
-				<WritingFlow
-					ref={ contentRef }
-					className="editor-styles-wrapper"
-					style={ { flex: '1', ...style } }
-					tabIndex={ -1 }
-				>
-					{ children }
-				</WritingFlow>
+				<EditorStyles styles={ styles }>
+					<WritingFlow
+						ref={ contentRef }
+						className="editor-styles-wrapper"
+						style={ { flex: '1', ...style } }
+						tabIndex={ -1 }
+					>
+						{ children }
+					</WritingFlow>
+				</EditorStyles>
 			</>
 		);
 	}
@@ -69,8 +70,7 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 			style={ { width: '100%', height: '100%', display: 'block' } }
 			name="editor-canvas"
 		>
-			<EditorStyles styles={ styles } />
-			{ children }
+			<EditorStyles styles={ styles }>{ children }</EditorStyles>
 		</Iframe>
 	);
 }
@@ -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 : {} ) }
 		>
-			<EditorStyles styles={ settings.styles } />
-			<style>{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-				`.is-root-container{display:flow-root;${
-					// Some themes will have `min-height: 100vh` for the root container,
-					// which isn't a requirement in auto resize mode.
-					enableResizing ? 'min-height:0!important;' : ''
-				}}body{position:relative; ${
-					canvasMode === 'view'
-						? 'cursor: pointer; min-height: 100vh;'
-						: ''
-				}}}`
-			}</style>
-			{ children }
+			<EditorStyles styles={ settings.styles }>
+				<style>{
+					// Forming a "block formatting context" to prevent margin collapsing.
+					// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+					`.is-root-container{display:flow-root;${
+						// Some themes will have `min-height: 100vh` for the root container,
+						// which isn't a requirement in auto resize mode.
+						enableResizing ? 'min-height:0!important;' : ''
+					}}body{position:relative; ${
+						canvasMode === 'view'
+							? 'cursor: pointer; min-height: 100vh;'
+							: ''
+					}}}`
+				}</style>
+				{ children }
+			</EditorStyles>
 		</Iframe>
 	);
 }
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 }
 				>
-					<EditorStyles styles={ editorStyles } />
-					<motion.div
-						style={ {
-							height: normalizedHeight * ratio,
-							width: '100%',
-							background: gradientValue ?? backgroundColor,
-							cursor: withHoverView ? 'pointer' : undefined,
-						} }
-						initial="start"
-						animate={
-							( isHovered || isFocused ) &&
-							! disableMotion &&
-							label
-								? 'hover'
-								: 'start'
-						}
-					>
+					<EditorStyles styles={ editorStyles }>
 						<motion.div
-							variants={ firstFrame }
 							style={ {
-								height: '100%',
-								overflow: 'hidden',
+								height: normalizedHeight * ratio,
+								width: '100%',
+								background: gradientValue ?? backgroundColor,
+								cursor: withHoverView ? 'pointer' : undefined,
 							} }
+							initial="start"
+							animate={
+								( isHovered || isFocused ) &&
+								! disableMotion &&
+								label
+									? 'hover'
+									: 'start'
+							}
 						>
-							<HStack
-								spacing={ 10 * ratio }
-								justify="center"
+							<motion.div
+								variants={ firstFrame }
 								style={ {
 									height: '100%',
 									overflow: 'hidden',
 								} }
 							>
-								<motion.div
+								<HStack
+									spacing={ 10 * ratio }
+									justify="center"
 									style={ {
-										fontFamily: headingFontFamily,
-										fontSize: 65 * ratio,
-										color: headingColor,
-										fontWeight: headingFontWeight,
+										height: '100%',
+										overflow: 'hidden',
 									} }
-									animate={ { scale: 1, opacity: 1 } }
-									initial={ { scale: 0.1, opacity: 0 } }
-									transition={ { delay: 0.3, type: 'tween' } }
 								>
-									Aa
-								</motion.div>
-								<VStack spacing={ 4 * ratio }>
-									{ highlightedColors.map(
-										( { slug, color }, index ) => (
-											<motion.div
-												key={ slug }
+									<motion.div
+										style={ {
+											fontFamily: headingFontFamily,
+											fontSize: 65 * ratio,
+											color: headingColor,
+											fontWeight: headingFontWeight,
+										} }
+										animate={ { scale: 1, opacity: 1 } }
+										initial={ { scale: 0.1, opacity: 0 } }
+										transition={ {
+											delay: 0.3,
+											type: 'tween',
+										} }
+									>
+										Aa
+									</motion.div>
+									<VStack spacing={ 4 * ratio }>
+										{ highlightedColors.map(
+											( { slug, color }, index ) => (
+												<motion.div
+													key={ slug }
+													style={ {
+														height:
+															normalizedColorSwatchSize *
+															ratio,
+														width:
+															normalizedColorSwatchSize *
+															ratio,
+														background: color,
+														borderRadius:
+															( normalizedColorSwatchSize *
+																ratio ) /
+															2,
+													} }
+													animate={ {
+														scale: 1,
+														opacity: 1,
+													} }
+													initial={ {
+														scale: 0.1,
+														opacity: 0,
+													} }
+													transition={ {
+														delay:
+															index === 1
+																? 0.2
+																: 0.1,
+													} }
+												/>
+											)
+										) }
+									</VStack>
+								</HStack>
+							</motion.div>
+							<motion.div
+								variants={ withHoverView && midFrame }
+								style={ {
+									height: '100%',
+									width: '100%',
+									position: 'absolute',
+									top: 0,
+									overflow: 'hidden',
+									filter: 'blur(60px)',
+									opacity: 0.1,
+								} }
+							>
+								<HStack
+									spacing={ 0 }
+									justify="flex-start"
+									style={ {
+										height: '100%',
+										overflow: 'hidden',
+									} }
+								>
+									{ paletteColors
+										.slice( 0, 4 )
+										.map( ( { color }, index ) => (
+											<div
+												key={ index }
 												style={ {
-													height:
-														normalizedColorSwatchSize *
-														ratio,
-													width:
-														normalizedColorSwatchSize *
-														ratio,
+													height: '100%',
 													background: color,
-													borderRadius:
-														( normalizedColorSwatchSize *
-															ratio ) /
-														2,
-												} }
-												animate={ {
-													scale: 1,
-													opacity: 1,
-												} }
-												initial={ {
-													scale: 0.1,
-													opacity: 0,
-												} }
-												transition={ {
-													delay:
-														index === 1 ? 0.2 : 0.1,
+													flexGrow: 1,
 												} }
 											/>
-										)
-									) }
-								</VStack>
-							</HStack>
-						</motion.div>
-						<motion.div
-							variants={ withHoverView && midFrame }
-							style={ {
-								height: '100%',
-								width: '100%',
-								position: 'absolute',
-								top: 0,
-								overflow: 'hidden',
-								filter: 'blur(60px)',
-								opacity: 0.1,
-							} }
-						>
-							<HStack
-								spacing={ 0 }
-								justify="flex-start"
+										) ) }
+								</HStack>
+							</motion.div>
+							<motion.div
+								variants={ secondFrame }
 								style={ {
 									height: '100%',
+									width: '100%',
 									overflow: 'hidden',
+									position: 'absolute',
+									top: 0,
 								} }
 							>
-								{ paletteColors
-									.slice( 0, 4 )
-									.map( ( { color }, index ) => (
+								<VStack
+									spacing={ 3 * ratio }
+									justify="center"
+									style={ {
+										height: '100%',
+										overflow: 'hidden',
+										padding: 10 * ratio,
+										boxSizing: 'border-box',
+									} }
+								>
+									{ label && (
 										<div
-											key={ index }
 											style={ {
-												height: '100%',
-												background: color,
-												flexGrow: 1,
+												fontSize: 40 * ratio,
+												fontFamily: headingFontFamily,
+												color: headingColor,
+												fontWeight: headingFontWeight,
+												lineHeight: '1em',
+												textAlign: 'center',
 											} }
-										/>
-									) ) }
-							</HStack>
-						</motion.div>
-						<motion.div
-							variants={ secondFrame }
-							style={ {
-								height: '100%',
-								width: '100%',
-								overflow: 'hidden',
-								position: 'absolute',
-								top: 0,
-							} }
-						>
-							<VStack
-								spacing={ 3 * ratio }
-								justify="center"
-								style={ {
-									height: '100%',
-									overflow: 'hidden',
-									padding: 10 * ratio,
-									boxSizing: 'border-box',
-								} }
-							>
-								{ label && (
-									<div
-										style={ {
-											fontSize: 40 * ratio,
-											fontFamily: headingFontFamily,
-											color: headingColor,
-											fontWeight: headingFontWeight,
-											lineHeight: '1em',
-											textAlign: 'center',
-										} }
-									>
-										{ label }
-									</div>
-								) }
-							</VStack>
+										>
+											{ label }
+										</div>
+									) }
+								</VStack>
+							</motion.div>
 						</motion.div>
-					</motion.div>
+					</EditorStyles>
 				</Iframe>
 			) }
 		</>
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 }
 			>
-				<EditorStyles styles={ editorStyles } />
-				<style>
-					{
-						// Forming a "block formatting context" to prevent margin collapsing.
-						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-						`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`
-					}
-				</style>
-				<Disabled className="edit-site-revisions__example-preview__content">
-					<ExperimentalBlockEditorProvider
-						value={ renderedBlocksArray }
-						settings={ settings }
-					>
-						<BlockList renderAppender={ false } />
-					</ExperimentalBlockEditorProvider>
-				</Disabled>
+				<EditorStyles styles={ editorStyles }>
+					<style>
+						{
+							// Forming a "block formatting context" to prevent margin collapsing.
+							// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+							`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`
+						}
+					</style>
+					<Disabled className="edit-site-revisions__example-preview__content">
+						<ExperimentalBlockEditorProvider
+							value={ renderedBlocksArray }
+							settings={ settings }
+						>
+							<BlockList renderAppender={ false } />
+						</ExperimentalBlockEditorProvider>
+					</Disabled>
+				</EditorStyles>
 			</Iframe>
 		</EditorCanvasContainer>
 	);
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 : {} ) }
 		>
-			<EditorStyles styles={ settings.styles } />
-			<style>
-				{
-					// Forming a "block formatting context" to prevent margin collapsing.
-					// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-					`.is-root-container { display: flow-root; }
+			<EditorStyles styles={ settings.styles }>
+				<style>
+					{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; }
 						body { position: relative; padding: 32px !important; }` +
-						STYLE_BOOK_IFRAME_STYLES +
-						buttonModeStyles
-				}
-			</style>
-			<Examples
-				className={ classnames( 'edit-site-style-book__examples', {
-					'is-wide': sizes.width > 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
+					}
+				</style>
+				<Examples
+					className={ classnames( 'edit-site-style-book__examples', {
+						'is-wide': sizes.width > 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 }
+				/>
+			</EditorStyles>
 		</Iframe>
 	);
 };
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( {
 			<Notices />
 			<BlockTools>
 				<KeyboardShortcuts />
-				<EditorStyles styles={ styles } />
-				<BlockSelectionClearer>
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList className="edit-widgets-main-block-list" />
-						</ObserveTyping>
-					</WritingFlow>
-				</BlockSelectionClearer>
+				<EditorStyles styles={ styles }>
+					<BlockSelectionClearer>
+						<WritingFlow>
+							<ObserveTyping>
+								<BlockList className="edit-widgets-main-block-list" />
+							</ObserveTyping>
+						</WritingFlow>
+					</BlockSelectionClearer>
+				</EditorStyles>
 			</BlockTools>
 		</div>
 	);