@wordpress/block-library 7.6.0 → 7.9.0

package/src/post-featured-image/edit.js

@@ -20,7 +20,6 @@ import {
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -28,24 +27,18 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import DimensionControls from './dimension-controls';
 
-const placeholderIllustration = (
-	<SVG
-		className="components-placeholder__illustration"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 60 60"
-		preserveAspectRatio="none"
-	>
-		<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
-	</SVG>
-);
-
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const placeholderChip = (
-	<div className="wp-block-post-featured-image__placeholder">
-		{ placeholderIllustration }
-	</div>
-);
+
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
 
 function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
@@ -101,15 +94,6 @@ function PostFeaturedImageDisplay( {
 		style: { width, height },
 	} );
 
-	const placeholder = ( content ) => {
-		return (
-			<Placeholder className="block-editor-media-placeholder">
-				{ placeholderIllustration }
-				{ content }
-			</Placeholder>
-		);
-	};
-
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
@@ -153,7 +137,7 @@ function PostFeaturedImageDisplay( {
 		return (
 			<>
 				{ controls }
-				<div { ...blockProps }>{ placeholderChip }</div>
+				<div { ...blockProps }>{ placeholder() }</div>
 			</>
 		);
 	}
@@ -187,7 +171,7 @@ function PostFeaturedImageDisplay( {
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
 		image = ! media ? (
-			placeholderChip
+			placeholder()
 		) : (
 			<img
 				src={ mediaUrl }
@@ -232,7 +216,7 @@ function PostFeaturedImageDisplay( {
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
 	if ( ! props.context?.postId ) {
-		return <div { ...blockProps }>{ placeholderChip }</div>;
+		return <div { ...blockProps }>{ placeholder() }</div>;
 	}
 	return <PostFeaturedImageDisplay { ...props } />;
 }

package/src/post-featured-image/editor.scss

@@ -39,21 +39,6 @@
 		// against any background color.
 		color: currentColor;
 		background: transparent;
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			pointer-events: none;
-
-			// Inherit border radius from style variations.
-			border-radius: inherit;
-		}
 
 		// Style the upload button.
 		.components-placeholder__fieldset {
@@ -82,20 +67,6 @@
 			color: $white;
 		}
 
-		// Style the placeholder illustration.
-		.components-placeholder__illustration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			stroke: currentColor;
-			stroke-dasharray: 3;
-			opacity: 0.4;
-		}
-
 		// Show default placeholder height when not resized.
 		min-height: 200px;
 	}

package/src/post-featured-image/index.php

@@ -19,14 +19,16 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
+	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
 	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, array( 'alt' => $post_title ) );
+	$attr           = $is_link ? array( 'alt' => $post_title ) : array();
+	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
 	if ( ! $featured_image ) {
 		return '';
 	}
 	$wrapper_attributes = get_block_wrapper_attributes();
-	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+	if ( $is_link ) {
 		$featured_image = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $featured_image );
 	}
 

package/src/post-navigation-link/block.json

@@ -29,9 +29,13 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"color": {
+			"link": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

package/src/post-template/index.php

@@ -82,17 +82,29 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	$content = '';
 	while ( $query->have_posts() ) {
 		$query->the_post();
+
+		// Get an instance of the current Post Template block.
+		$block_instance = $block->parsed_block;
+
+		// Set the block name to one that does not correspond to an existing registered block.
+		// This ensures that for the inner instances of the Post Template block, we do not render any block supports.
+		$block_instance['blockName'] = 'core/null';
+
+		// Render the inner blocks of the Post Template block with `dynamic` set to `false` to prevent calling
+		// `render_callback` and ensure that no wrapper markup is included.
 		$block_content = (
 			new WP_Block(
-				$block->parsed_block,
+				$block_instance,
 				array(
 					'postType' => get_post_type(),
 					'postId'   => get_the_ID(),
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
-		$post_classes  = implode( ' ', get_post_class( 'wp-block-post' ) );
-		$content      .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
+
+		// Wrap the render inner blocks in a `li` element with the appropriate post classes.
+		$post_classes = implode( ' ', get_post_class( 'wp-block-post' ) );
+		$content     .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
 	}
 
 	wp_reset_postdata();

package/src/post-template/style.scss

@@ -1,10 +1,4 @@
-.wp-block-post-template,
-// We have kept `wp-block-query-loop` class as well for backwards
-// compatibility with existing `QueryLoop` blocks that haven't been
-// updated, after the renaming of the block to `Post Template`.
-// See: https://github.com/WordPress/gutenberg/pull/32514.
-// TODO: Remove this class when WordPress 5.9 is released.
-.wp-block-query-loop {
+.wp-block-post-template {
 	margin-top: 0;
 	margin-bottom: 0;
 	max-width: 100%;

package/src/pullquote/deprecated.js

@@ -397,7 +397,8 @@ const deprecated = [
 			const blockquoteClasses =
 				textColor || customTextColor
 					? classnames( 'has-text-color', {
-							[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+							[ blockquoteTextColorClass ]:
+								blockquoteTextColorClass,
 					  } )
 					: undefined;
 			const blockquoteStyle = blockquoteTextColorClass

package/src/query/edit/index.js

@@ -37,6 +37,8 @@ export function QueryContent( {
 	attributes,
 	setAttributes,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
 	const {
 		queryId,
@@ -45,9 +47,8 @@ export function QueryContent( {
 		tagName: TagName = 'div',
 		layout = {},
 	} = attributes;
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -109,6 +110,8 @@ export function QueryContent( {
 			/>
 			<BlockControls>
 				<QueryToolbar
+					name={ name }
+					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
@@ -213,10 +216,8 @@ function QueryPatternSetup( {
 
 const QueryEdit = ( props ) => {
 	const { clientId, name } = props;
-	const [
-		isPatternSelectionModalOpen,
-		setIsPatternSelectionModalOpen,
-	] = useState( false );
+	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
+		useState( false );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const hasInnerBlocks = useSelect(
 		( select ) =>
@@ -226,9 +227,8 @@ const QueryEdit = ( props ) => {
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
 	const onBlockPatternSelect = ( blocks ) => {
 		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
-			clonedBlocks
-		);
+		const firstQueryClientId =
+			getFirstQueryClientIdFromBlocks( clonedBlocks );
 		replaceBlock( clientId, clonedBlocks );
 		if ( firstQueryClientId ) {
 			selectBlock( firstQueryClientId );

package/src/query/edit/inspector-controls/parent-control.js

@@ -30,9 +30,8 @@ function ParentControl( { parents, postType, onChange } ) {
 			if ( ! search ) {
 				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
 			}
-			const { getEntityRecords, hasFinishedResolution } = select(
-				coreStore
-			);
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
 			const selectorArgs = [
 				'postType',
 				postType,

package/src/query/edit/query-toolbar.js

@@ -11,13 +11,31 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { settings, list, grid } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 export default function QueryToolbar( {
 	attributes: { query, displayLayout },
 	setQuery,
 	setDisplayLayout,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
+	const hasPatterns = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			return !! __experimentalGetPatternsByBlockTypes(
+				name,
+				rootClientId
+			).length;
+		},
+		[ name, clientId ]
+	);
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
@@ -129,11 +147,13 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
-			<ToolbarGroup className="wp-block-template-part__block-control-group">
-				<ToolbarButton onClick={ openPatternSelectionModal }>
-					{ __( 'Replace' ) }
-				</ToolbarButton>
-			</ToolbarGroup>
+			{ hasPatterns && (
+				<ToolbarGroup className="wp-block-template-part__block-control-group">
+					<ToolbarButton onClick={ openPatternSelectionModal }>
+						{ __( 'Replace' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
 			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);

package/src/query-pagination/index.php

@@ -20,7 +20,6 @@ function render_block_core_query_pagination( $attributes, $content ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'role'       => 'navigation',
 			'aria-label' => __( 'Pagination' ),
 		)
 	);

package/src/quote/v2/edit.js

@@ -39,9 +39,8 @@ const TEMPLATE = [ [ 'core/paragraph', {} ] ];
  */
 const useMigrateOnLoad = ( attributes, clientId ) => {
 	const registry = useRegistry();
-	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { updateBlockAttributes, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		// As soon as the block is loaded, migrate it to the new version.
 
@@ -50,9 +49,8 @@ const useMigrateOnLoad = ( attributes, clientId ) => {
 			return;
 		}
 
-		const [ newAttributes, newInnerBlocks ] = migrateToQuoteV2(
-			attributes
-		);
+		const [ newAttributes, newInnerBlocks ] =
+			migrateToQuoteV2( attributes );
 
 		deprecated( 'Value attribute on the quote block', {
 			since: '6.0',

package/src/quote/v2/test/migrate.js

@@ -68,8 +68,7 @@ describe( 'Migrate quote block', () => {
 
 	it( 'should keep the formats of the value', () => {
 		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
-			value:
-				'<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
+			value: '<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
 			citation: 'Author',
 		} );
 		expect( attributes ).toEqual( {

package/src/search/block.json

@@ -38,6 +38,10 @@
 		"buttonUseIcon": {
 			"type": "boolean",
 			"default": false
+		},
+		"query": {
+			"type": "object",
+			"default": {}
 		}
 	},
 	"supports": {

package/src/search/edit.js

@@ -14,6 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -79,9 +80,8 @@ export default function SearchEdit( {
 
 	const insertedInNavigationBlock = useSelect(
 		( select ) => {
-			const { getBlockParentsByBlockName, wasBlockJustInserted } = select(
-				blockEditorStore
-			);
+			const { getBlockParentsByBlockName, wasBlockJustInserted } =
+				select( blockEditorStore );
 			return (
 				!! getBlockParentsByBlockName( clientId, 'core/navigation' )
 					?.length && wasBlockJustInserted( clientId )
@@ -89,9 +89,8 @@ export default function SearchEdit( {
 		},
 		[ clientId ]
 	);
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		if ( ! insertedInNavigationBlock ) return;
 		// This side-effect should not create an undo level.
@@ -241,7 +240,8 @@ export default function SearchEdit( {
 			'wp-block-search__button',
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
-			buttonUseIcon ? 'has-icon' : undefined
+			buttonUseIcon ? 'has-icon' : undefined,
+			__experimentalGetElementClassName( 'button' )
 		);
 		const buttonStyles = {
 			...colorProps.style,
@@ -416,12 +416,8 @@ export default function SearchEdit( {
 
 			if ( typeof borderRadius === 'object' ) {
 				// Individual corner border radii present.
-				const {
-					topLeft,
-					topRight,
-					bottomLeft,
-					bottomRight,
-				} = borderRadius;
+				const { topLeft, topRight, bottomLeft, bottomRight } =
+					borderRadius;
 
 				return {
 					...styles,

package/src/search/edit.native.js

@@ -53,14 +53,12 @@ export default function SearchEdit( {
 } ) {
 	const [ isButtonSelected, setIsButtonSelected ] = useState( false );
 	const [ isLabelSelected, setIsLabelSelected ] = useState( false );
-	const [ isPlaceholderSelected, setIsPlaceholderSelected ] = useState(
-		false
-	);
+	const [ isPlaceholderSelected, setIsPlaceholderSelected ] =
+		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
-		false
-	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
 
 	const textInputRef = useRef( null );
 

package/src/search/index.php

@@ -13,8 +13,6 @@
  * @return string The search block markup.
  */
 function render_block_core_search( $attributes ) {
-	static $instance_id = 0;
-
 	// Older versions of the Search block defaulted the label and buttonText
 	// attributes to `__( 'Search' )` meaning that many posts contain `<!--
 	// wp:search /-->`. Support these by defaulting an undefined label and
@@ -27,17 +25,19 @@ function render_block_core_search( $attributes ) {
 		)
 	);
 
-	$input_id         = 'wp-block-search__input-' . ++$instance_id;
-	$classnames       = classnames_for_block_core_search( $attributes );
-	$show_label       = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
-	$use_icon_button  = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
-	$show_input       = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
-	$show_button      = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
-	$input_markup     = '';
-	$button_markup    = '';
-	$inline_styles    = styles_for_block_core_search( $attributes );
-	$color_classes    = get_color_classes_for_block_core_search( $attributes );
-	$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
+	$input_id            = wp_unique_id( 'wp-block-search__input-' );
+	$classnames          = classnames_for_block_core_search( $attributes );
+	$show_label          = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
+	$use_icon_button     = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
+	$show_input          = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
+	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
+	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
+	$input_markup        = '';
+	$button_markup       = '';
+	$query_params_markup = '';
+	$inline_styles       = styles_for_block_core_search( $attributes );
+	$color_classes       = get_color_classes_for_block_core_search( $attributes );
+	$is_button_inside    = ! empty( $attributes['buttonPosition'] ) &&
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
@@ -63,27 +63,40 @@ function render_block_core_search( $attributes ) {
 			'<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />',
 			$input_id,
 			esc_attr( $input_classes ),
-			esc_attr( get_search_query() ),
+			get_search_query(),
 			esc_attr( $attributes['placeholder'] ),
 			$inline_styles['input']
 		);
 	}
 
+	if ( count( $query_params ) > 0 ) {
+		foreach ( $query_params as $param => $value ) {
+			$query_params_markup .= sprintf(
+				'<input type="hidden" name="%s" value="%s" />',
+				esc_attr( $param ),
+				esc_attr( $value )
+			);
+		}
+	}
+
 	if ( $show_button ) {
+		$button_classes         = array();
 		$button_internal_markup = '';
-		$button_classes         = $color_classes;
-		$aria_label             = '';
+		if ( ! empty( $color_classes ) ) {
+			$button_classes[] = $color_classes;
+		}
+		$aria_label = '';
 
-		if ( ! $is_button_inside ) {
-			$button_classes .= ' ' . $border_color_classes;
+		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
+			$button_classes[] = $border_color_classes;
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$aria_label      = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
-			$button_classes .= ' has-icon';
+			$aria_label       = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
+			$button_classes[] = 'has-icon';
 
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
@@ -91,9 +104,11 @@ function render_block_core_search( $attributes ) {
 				</svg>';
 		}
 
-		$button_markup = sprintf(
+		// Include the button element class.
+		$button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+		$button_markup    = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
-			esc_attr( $button_classes ),
+			esc_attr( implode( ' ', $button_classes ) ),
 			$inline_styles['button'],
 			$aria_label,
 			$button_internal_markup
@@ -105,7 +120,7 @@ function render_block_core_search( $attributes ) {
 		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
 		esc_attr( $field_markup_classes ),
 		$inline_styles['wrapper'],
-		$input_markup . $button_markup
+		$input_markup . $query_params_markup . $button_markup
 	);
 	$wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => $classnames ) );
 

package/src/search/style.scss

@@ -1,13 +1,6 @@
 .wp-block-search__button {
-	background: #f7f7f7;
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
-	color: #32373c;
 	margin-left: 0.625em;
 	word-break: normal;
-	font-size: inherit;
-	font-family: inherit;
-	line-height: inherit;
 
 	&.has-icon {
 		line-height: 0;
@@ -20,6 +13,13 @@
 	}
 }
 
+// These rules are set to zero specificity to keep the default styles for search buttons.
+// They are needed for backwards compatibility.
+:where(.wp-block-search__button) {
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+}
+
 .wp-block-search__inside-wrapper {
 	display: flex;
 	flex: auto;
@@ -47,7 +47,8 @@
 	}
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: 4px;
 	border: 1px solid #949494;
 
@@ -61,7 +62,8 @@
 		}
 	}
 
-	.wp-block-search__button {
+	// For lower specificity.
+	:where(.wp-block-search__button) {
 		padding: 0.125em 0.5em;
 	}
 }

package/src/separator/use-deprecated-opacity.js

@@ -9,10 +9,8 @@ export default function useDeprecatedOpacity(
 	currentColor,
 	setAttributes
 ) {
-	const [
-		deprecatedOpacityWithNoColor,
-		setDeprecatedOpacityWithNoColor,
-	] = useState( false );
+	const [ deprecatedOpacityWithNoColor, setDeprecatedOpacityWithNoColor ] =
+		useState( false );
 	const previousColor = usePrevious( currentColor );
 
 	// A separator with no color set will always have previousColor set to undefined,