@wordpress/edit-site 4.3.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.3.0",
+	"version": "4.4.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.0",
-		"@wordpress/api-fetch": "^6.3.0",
-		"@wordpress/block-editor": "^8.5.0",
-		"@wordpress/block-library": "^7.3.0",
-		"@wordpress/blocks": "^11.5.0",
-		"@wordpress/components": "^19.8.0",
-		"@wordpress/compose": "^5.4.0",
-		"@wordpress/core-data": "^4.4.0",
-		"@wordpress/data": "^6.6.0",
-		"@wordpress/deprecated": "^3.6.0",
-		"@wordpress/editor": "^12.5.0",
-		"@wordpress/element": "^4.4.0",
-		"@wordpress/hooks": "^3.6.0",
-		"@wordpress/html-entities": "^3.6.0",
-		"@wordpress/i18n": "^4.6.0",
-		"@wordpress/icons": "^8.2.0",
-		"@wordpress/interface": "^4.5.0",
-		"@wordpress/keyboard-shortcuts": "^3.4.0",
-		"@wordpress/keycodes": "^3.6.0",
-		"@wordpress/media-utils": "^3.4.0",
-		"@wordpress/notices": "^3.6.0",
-		"@wordpress/plugins": "^4.4.0",
-		"@wordpress/preferences": "^1.2.0",
-		"@wordpress/reusable-blocks": "^3.4.0",
-		"@wordpress/style-engine": "^0.5.0",
-		"@wordpress/url": "^3.7.0",
-		"@wordpress/viewport": "^4.4.0",
+		"@wordpress/a11y": "^3.7.0",
+		"@wordpress/api-fetch": "^6.4.0",
+		"@wordpress/block-editor": "^8.6.0",
+		"@wordpress/block-library": "^7.4.0",
+		"@wordpress/blocks": "^11.6.0",
+		"@wordpress/components": "^19.9.0",
+		"@wordpress/compose": "^5.5.0",
+		"@wordpress/core-data": "^4.5.0",
+		"@wordpress/data": "^6.7.0",
+		"@wordpress/deprecated": "^3.7.0",
+		"@wordpress/editor": "^12.6.0",
+		"@wordpress/element": "^4.5.0",
+		"@wordpress/hooks": "^3.7.0",
+		"@wordpress/html-entities": "^3.7.0",
+		"@wordpress/i18n": "^4.7.0",
+		"@wordpress/icons": "^8.3.0",
+		"@wordpress/interface": "^4.6.0",
+		"@wordpress/keyboard-shortcuts": "^3.5.0",
+		"@wordpress/keycodes": "^3.7.0",
+		"@wordpress/media-utils": "^3.5.0",
+		"@wordpress/notices": "^3.7.0",
+		"@wordpress/plugins": "^4.5.0",
+		"@wordpress/preferences": "^1.3.0",
+		"@wordpress/reusable-blocks": "^3.5.0",
+		"@wordpress/style-engine": "^0.6.0",
+		"@wordpress/url": "^3.8.0",
+		"@wordpress/viewport": "^4.5.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
+	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
 }

package/src/components/block-editor/resizable-editor.js

@@ -36,7 +36,7 @@ const HANDLE_STYLES_OVERRIDE = {
 	left: undefined,
 };
 
-function ResizableEditor( { enableResizing, settings, ...props } ) {
+function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 	const deviceType = useSelect(
 		( select ) =>
 			select( editSiteStore ).__experimentalGetPreviewDeviceType(),
@@ -182,7 +182,11 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"
 				{ ...props }
-			/>
+			>
+				{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+				{ settings.svgFilters }
+				{ children }
+			</Iframe>
 		</ResizableBox>
 	);
 }

package/src/components/editor/global-styles-renderer.js

@@ -20,7 +20,7 @@ import { store as editSiteStore } from '../../store';
 import { useGlobalStylesOutput } from '../global-styles/use-global-styles-output';
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings ] = useGlobalStylesOutput();
+	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -37,6 +37,7 @@ function useGlobalStylesRenderer() {
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],
+			svgFilters,
 			__experimentalFeatures: settings,
 		} );
 	}, [ styles, settings ] );

package/src/components/editor/index.js

@@ -5,7 +5,11 @@ import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
-import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+	BlockContextProvider,
+	BlockBreadcrumb,
+	BlockStyles,
+} from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
 	ComplementaryArea,
@@ -43,7 +47,6 @@ import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 
 const interfaceLabels = {
-	secondarySidebar: __( 'Block Library' ),
 	drawer: __( 'Navigation Sidebar' ),
 };
 
@@ -176,11 +179,15 @@ function Editor( { onError } ) {
 		templateType !== undefined &&
 		entityId !== undefined;
 
+	const secondarySidebarLabel = isListViewOpen
+		? __( 'List View' )
+		: __( 'Block Library' );
+
 	const secondarySidebar = () => {
-		if ( isInserterOpen ) {
+		if ( editorMode === 'visual' && isInserterOpen ) {
 			return <InserterSidebar />;
 		}
-		if ( isListViewOpen ) {
+		if ( editorMode === 'visual' && isListViewOpen ) {
 			return <ListViewSidebar />;
 		}
 		return null;
@@ -208,7 +215,10 @@ function Editor( { onError } ) {
 										<KeyboardShortcuts.Register />
 										<SidebarComplementaryAreaFills />
 										<InterfaceSkeleton
-											labels={ interfaceLabels }
+											labels={ {
+												...interfaceLabels,
+												secondarySidebar: secondarySidebarLabel,
+											} }
 											className={
 												showIconLabels &&
 												'show-icon-labels'
@@ -236,6 +246,7 @@ function Editor( { onError } ) {
 											content={
 												<>
 													<EditorNotices />
+													<BlockStyles.Slot scope="core/block-inspector" />
 													{ editorMode === 'visual' &&
 														template && (
 															<BlockEditor

package/src/components/global-styles/border-panel.js

@@ -1,17 +1,15 @@
 /**
  * WordPress dependencies
  */
+import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
 import {
-	__experimentalBorderRadiusControl as BorderRadiusControl,
-	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-} from '@wordpress/block-editor';
-import {
+	__experimentalBorderBoxControl as BorderBoxControl,
+	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalUnitControl as UnitControl,
-	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -24,8 +22,6 @@ import {
 	useStyle,
 } from './hooks';
 
-const MIN_BORDER_WIDTH = 0;
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -69,63 +65,45 @@ function useHasBorderWidthControl( name ) {
 	);
 }
 
-export default function BorderPanel( { name } ) {
-	// To better reflect if the user has customized a value we need to
-	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const createHasValueCallback = ( feature ) => () =>
-		!! userBorderStyles?.[ feature ];
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
 
-	const createResetCallback = ( setStyle ) => () => setStyle( undefined );
-
-	const handleOnChange = ( setStyle ) => ( value ) => {
-		setStyle( value || undefined );
-	};
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
-			'px',
-			'em',
-			'rem',
-		],
-	} );
-
-	// Border width.
-	const showBorderWidth = useHasBorderWidthControl( name );
-	const [ borderWidthValue, setBorderWidth ] = useStyle(
-		'border.width',
-		name
-	);
+	if ( ! border.style && ( border.color || border.width ) ) {
+		return { ...border, style: 'solid' };
+	}
 
-	// Border style.
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
+	return border;
+}
 
-	// When we set a border color or width ensure we have a style so the user
-	// can see a visible border.
-	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
-		if ( !! value && ! borderStyle ) {
-			setBorderStyle( 'solid' );
-		}
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
 
-		setStyle( value || undefined );
-	};
+export default function BorderPanel( { name } ) {
+	// To better reflect if the user has customized a value we need to
+	// ensure the style value being checked is from the `user` origin.
+	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
+	const [ border, setBorder ] = useStyle( 'border', name );
+	const colors = useColorsPerOrigin( name );
 
-	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
-	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
-
-	const borderColorSettings = [
-		{
-			label: __( 'Color' ),
-			colors: useColorsPerOrigin( name ),
-			colorValue: borderColor,
-			onColorChange: handleOnChangeWithStyle( setBorderColor ),
-			clearable: false,
-		},
-	];
+	const showBorderStyle = useHasBorderStyleControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
@@ -141,60 +119,83 @@ export default function BorderPanel( { name } ) {
 		return !! borderValues;
 	};
 
-	const resetAll = () => {
-		setBorderColor( undefined );
-		setBorderRadius( undefined );
-		setBorderStyle( undefined );
-		setBorderWidth( undefined );
+	const resetBorder = () => {
+		if ( hasBorderRadius() ) {
+			return setBorder( { radius: userBorderStyles.radius } );
+		}
+
+		setBorder( undefined );
 	};
 
+	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
+	const onBorderChange = useCallback(
+		( newBorder ) => {
+			// Ensure we have a visible border style when a border width or
+			// color is being selected.
+			const newBorderWithStyle = applyAllFallbackStyles( newBorder );
+
+			// As we can't conditionally generate styles based on if other
+			// style properties have been set we need to force split border
+			// definitions for user set border styles. Border radius is derived
+			// from the same property i.e. `border.radius` if it is a string
+			// that is used. The longhand border radii styles are only generated
+			// if that property is an object.
+			//
+			// For borders (color, style, and width) those are all properties on
+			// the `border` style property. This means if the theme.json defined
+			// split borders and the user condenses them into a flat border or
+			// vice-versa we'd get both sets of styles which would conflict.
+			const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
+				? {
+						top: newBorderWithStyle,
+						right: newBorderWithStyle,
+						bottom: newBorderWithStyle,
+						left: newBorderWithStyle,
+				  }
+				: {
+						color: null,
+						style: null,
+						width: null,
+						...newBorderWithStyle,
+				  };
+
+			// As radius is maintained separately to color, style, and width
+			// maintain its value. Undefined values here will be cleaned when
+			// global styles are saved.
+			setBorder( { radius: border?.radius, ...updatedBorder } );
+		},
+		[ setBorder ]
+	);
+
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
-			{ showBorderWidth && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ createHasValueCallback( 'width' ) }
-					label={ __( 'Width' ) }
-					onDeselect={ createResetCallback( setBorderWidth ) }
-					isShownByDefault={ true }
-				>
-					<UnitControl
-						value={ borderWidthValue }
-						label={ __( 'Width' ) }
-						min={ MIN_BORDER_WIDTH }
-						onChange={ handleOnChangeWithStyle( setBorderWidth ) }
-						units={ units }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderStyle && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ createHasValueCallback( 'style' ) }
-					label={ __( 'Style' ) }
-					onDeselect={ createResetCallback( setBorderStyle ) }
-					isShownByDefault={ true }
-				>
-					<BorderStyleControl
-						value={ borderStyle }
-						onChange={ handleOnChange( setBorderStyle ) }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderColor && (
+			{ ( showBorderWidth || showBorderColor ) && (
 				<ToolsPanelItem
-					hasValue={ createHasValueCallback( 'color' ) }
-					label={ __( 'Color' ) }
-					onDeselect={ createResetCallback( setBorderColor ) }
+					hasValue={ () => isDefinedBorder( userBorderStyles ) }
+					label={ __( 'Border' ) }
+					onDeselect={ () => resetBorder() }
 					isShownByDefault={ true }
 				>
-					<ColorGradientSettingsDropdown
-						__experimentalHasMultipleOrigins
-						__experimentalIsRenderedInSidebar
-						disableCustomColors={ disableCustomColors }
-						disableCustomGradients={ disableCustomGradients }
-						enableAlpha
-						settings={ borderColorSettings }
+					<BorderBoxControl
+						colors={ colors }
+						enableAlpha={ true }
+						onChange={ onBorderChange }
+						showStyle={ showBorderStyle }
+						value={ border }
+						popoverClassNames={ {
+							linked:
+								'edit-site-global-styles-sidebar__border-box-control__popover',
+							top:
+								'edit-site-global-styles-sidebar__border-box-control__popover-top',
+							right:
+								'edit-site-global-styles-sidebar__border-box-control__popover-right',
+							bottom:
+								'edit-site-global-styles-sidebar__border-box-control__popover-bottom',
+							left:
+								'edit-site-global-styles-sidebar__border-box-control__popover-left',
+						} }
+						__experimentalHasMultipleOrigins={ true }
+						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>
 			) }
@@ -202,12 +203,14 @@ export default function BorderPanel( { name } ) {
 				<ToolsPanelItem
 					hasValue={ hasBorderRadius }
 					label={ __( 'Radius' ) }
-					onDeselect={ createResetCallback( setBorderRadius ) }
+					onDeselect={ () => setBorderRadius( undefined ) }
 					isShownByDefault={ true }
 				>
 					<BorderRadiusControl
 						values={ borderRadiusValues }
-						onChange={ handleOnChange( setBorderRadius ) }
+						onChange={ ( value ) => {
+							setBorderRadius( value || undefined );
+						} }
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/screen-block-list.js

@@ -2,13 +2,17 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import {
 	FlexItem,
+	SearchControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 import { BlockIcon } from '@wordpress/block-editor';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -68,6 +72,45 @@ function BlockMenuItem( { block } ) {
 
 function ScreenBlockList() {
 	const sortedBlockTypes = useSortedBlockTypes();
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const isMatchingSearchTerm = useSelect(
+		( select ) => select( blocksStore ).isMatchingSearchTerm,
+		[]
+	);
+	const filteredBlockTypes = useMemo( () => {
+		if ( ! filterValue ) {
+			return sortedBlockTypes;
+		}
+		return sortedBlockTypes.filter( ( blockType ) =>
+			isMatchingSearchTerm( blockType, filterValue )
+		);
+	}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );
+
+	const blockTypesListRef = useRef();
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! filterValue ) {
+			return;
+		}
+		// We extract the results from the wrapper div's `ref` because
+		// filtered items can contain items that will eventually not
+		// render and there is no reliable way to detect when a child
+		// will return `null`.
+		// TODO: We should find a better way of handling this as it's
+		// fragile and depends on the number of rendered elements of `BlockMenuItem`,
+		// which is now one.
+		// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116
+		const count = blockTypesListRef.current.childElementCount;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage, count );
+	}, [ filterValue, debouncedSpeak ] );
+
 	return (
 		<>
 			<ScreenHeader
@@ -76,12 +119,24 @@ function ScreenBlockList() {
 					'Customize the appearance of specific blocks and for the whole site.'
 				) }
 			/>
-			{ sortedBlockTypes.map( ( block ) => (
-				<BlockMenuItem
-					block={ block }
-					key={ 'menu-itemblock-' + block.name }
-				/>
-			) ) }
+			<SearchControl
+				className="edit-site-block-types-search"
+				onChange={ setFilterValue }
+				value={ filterValue }
+				label={ __( 'Search for blocks' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+			<div
+				ref={ blockTypesListRef }
+				className="edit-site-block-types-item-list"
+			>
+				{ filteredBlockTypes.map( ( block ) => (
+					<BlockMenuItem
+						block={ block }
+						key={ 'menu-itemblock-' + block.name }
+					/>
+				) ) }
+			</div>
 		</>
 	);
 }

package/src/components/global-styles/style.scss

@@ -44,7 +44,8 @@
 	}
 }
 
-.edit-site-global-styles-header__description {
+.edit-site-global-styles-header__description,
+.edit-site-block-types-search {
 	padding: 0 $grid-unit-20;
 }
 

package/src/components/global-styles/test/use-global-styles-output.js

@@ -377,7 +377,10 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				'body {margin: 0;}' +
+					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
+					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 	} );