@wordpress/block-library 6.0.5 → 6.0.9

package/src/navigation/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/navigation` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**
@@ -14,8 +14,10 @@
  */
 function block_core_navigation_build_css_colors( $attributes ) {
 	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
+		'css_classes'           => array(),
+		'inline_styles'         => '',
+		'overlay_css_classes'   => array(),
+		'overlay_inline_styles' => '',
 	);
 
 	// Text color.
@@ -54,6 +56,42 @@ function block_core_navigation_build_css_colors( $attributes ) {
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
 	}
 
+	// Overlay text color.
+	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $attributes );
+	$has_custom_overlay_text_color = array_key_exists( 'customOverlayTextColor', $attributes );
+
+	// If has overlay text color.
+	if ( $has_custom_overlay_text_color || $has_named_overlay_text_color ) {
+		// Add has-text-color class.
+		$colors['overlay_css_classes'][] = 'has-text-color';
+	}
+
+	if ( $has_named_overlay_text_color ) {
+		// Add the overlay color class.
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', $attributes['overlayTextColor'] );
+	} elseif ( $has_custom_overlay_text_color ) {
+		// Add the custom overlay color inline style.
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $attributes['customOverlayTextColor'] );
+	}
+
+	// Overlay background color.
+	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $attributes );
+	$has_custom_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $attributes );
+
+	// If has overlay background color.
+	if ( $has_custom_overlay_background_color || $has_named_overlay_background_color ) {
+		// Add has-background class.
+		$colors['overlay_css_classes'][] = 'has-background';
+	}
+
+	if ( $has_named_overlay_background_color ) {
+		// Add the overlay background-color class.
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', $attributes['overlayBackgroundColor'] );
+	} elseif ( $has_custom_overlay_background_color ) {
+		// Add the custom overlay background-color inline style.
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customOverlayBackgroundColor'] );
+	}
+
 	return $colors;
 }
 
@@ -147,7 +185,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	if ( ! empty( $block->context['navigationArea'] ) ) {
 		$area    = $block->context['navigationArea'];
-		$mapping = get_option( 'fse_navigation_areas', array() );
+		$mapping = get_option( 'wp_navigation_areas', array() );
 		if ( ! empty( $mapping[ $area ] ) ) {
 			$attributes['navigationMenuId'] = $mapping[ $area ];
 		}
@@ -179,12 +217,24 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	if ( empty( $inner_blocks ) ) {
 		return '';
 	}
+
+	// Restore legacy classnames for submenu positioning.
+	$layout_class = '';
+	if ( isset( $attributes['layout']['justifyContent'] ) ) {
+		if ( 'right' === $attributes['layout']['justifyContent'] ) {
+			$layout_class .= 'items-justified-right';
+		} elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) {
+			$layout_class .= 'items-justified-space-between';
+		}
+	}
+
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
-		$is_responsive_menu ? array( 'is-responsive' ) : array()
+		$is_responsive_menu ? array( 'is-responsive' ) : array(),
+		$layout_class ? array( $layout_class ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -235,6 +285,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',
 		$is_hidden_by_default ? 'hidden-by-default' : '',
+		implode( ' ', $colors['overlay_css_classes'] ),
 	);
 	$open_button_classes          = array(
 		'wp-block-navigation__responsive-container-open',
@@ -243,7 +294,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
-			<div class="%5$s" id="modal-%1$s">
+			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
@@ -258,7 +309,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		__( 'Open menu' ), // Open button label.
 		__( 'Close menu' ), // Close button label.
 		implode( ' ', $responsive_container_classes ),
-		implode( ' ', $open_button_classes )
+		implode( ' ', $open_button_classes ),
+		$colors['overlay_inline_styles']
 	);
 
 	return sprintf(

package/src/navigation/style.scss

@@ -78,10 +78,10 @@
 
 	// Submenu indicator.
 	.wp-block-navigation__submenu-icon {
-		align-self: center;
-		height: inherit;
+		align-self: center; // This one affects nested submenu indicators.
 		line-height: 0;
-		margin-left: 6px;
+		display: inline-block;
+		vertical-align: middle;
 
 		// Affect the button as well.
 		padding: 0;
@@ -89,9 +89,16 @@
 		color: currentColor;
 		border: none;
 
+		// Scale to font size.
+		margin-left: 0.25em;
+		width: 0.6em;
+		height: 0.6em;
+
 		svg {
 			display: inline-block;
 			stroke: currentColor;
+			width: inherit;
+			height: inherit;
 		}
 	}
 }
@@ -219,6 +226,36 @@
 	}
 }
 
+// General submenu colors.
+// These styles are stored here as opposed to in the separate submenu block,
+// so that they can affect both submenus and page lists with submenu items both.
+.wp-block-navigation-submenu {
+	position: relative;
+	display: flex;
+
+	.wp-block-navigation__submenu-icon svg {
+		stroke: currentColor;
+	}
+}
+
+button.wp-block-navigation-item__content {
+	background-color: transparent;
+	border: none;
+	color: currentColor;
+	font-size: inherit;
+	font-family: inherit;
+	line-height: inherit;
+
+	// Buttons default to center alignment. This becomes visible
+	// when a menu item label is long enough to wrap.
+	text-align: left;
+}
+
+.wp-block-navigation-submenu__toggle {
+	cursor: pointer;
+}
+
+
 /**
  * Margins
  */
@@ -269,18 +306,22 @@
 // When justified space-between, open submenus leftward for last menu item.
 // When justified right, open all submenus leftwards.
 // This needs high specificity.
-// On smaller breakpoints, menus open downwards.
-@include break-medium {
-	.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
-	.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
-	.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
-	.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child {
-		// First submenu.
-		.wp-block-navigation__submenu-container {
-			left: auto;
-			right: 0;
+.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
+.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
+.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
+.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child {
+	// First submenu.
+	.wp-block-navigation__submenu-container {
+		left: auto;
+		right: 0;
 
-			// Nested submenus.
+		// Nested submenus.
+		// On smaller breakpoints, nested menus open downwards.
+		.wp-block-navigation__submenu-container {
+			left: -1px; // Border width.
+			right: -1px;
+		}
+		@include break-medium {
 			.wp-block-navigation__submenu-container {
 				left: auto;
 				right: 100%;
@@ -321,6 +362,13 @@
 	}
 }
 
+// Allow menu items to be spaced out by space-between when only navigation links are present.
+.wp-block-navigation__container:only-child,
+.wp-block-page-list:only-child {
+	flex-grow: 1;
+}
+
+
 /**
  * Mobile menu.
  */
@@ -341,6 +389,13 @@
 		align-items: var(--layout-align, initial);
 	}
 
+	// If the responsive wrapper is present but overlay is not open,
+	// overlay styles shouldn't apply.
+	&:not(.is-menu-open.is-menu-open) {
+		color: inherit !important;
+		background-color: inherit !important;
+	}
+
 	// Overlay menu.
 	// Provide an opinionated default style for menu items inside.
 	// Inherit as much as we can regarding colors, fonts, sizes,
@@ -428,9 +483,9 @@
 
 		// Remove background colors for items inside the overlay menu.
 		// Has to be !important to override global styles.
-		// @todo: We should revisit this so that the overlay colors can be applied, instead of the background.
 		.wp-block-navigation-item .wp-block-navigation__submenu-container,
-		.wp-block-navigation-item {
+		.wp-block-navigation-item,
+		.wp-block-page-list {
 			color: inherit !important;
 			background: transparent !important;
 		}
@@ -448,7 +503,7 @@
 				display: block;
 				width: 100%;
 				position: relative;
-				z-index: 2;
+				z-index: auto;
 				background-color: inherit;
 
 				.wp-block-navigation__responsive-container-close {

package/src/navigation-area/edit.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	MenuGroup,
@@ -51,6 +52,10 @@ function NavigationAreaBlock( { attributes, setAttributes } ) {
 		[ navigationAreas ]
 	);
 
+	deprecated( 'wp.blockLibrary.NavigationArea', {
+		since: '5.9',
+	} );
+
 	return (
 		<>
 			<BlockControls>

package/src/navigation-area/index.php

@@ -2,7 +2,8 @@
 /**
  * Server-side rendering of the `core/navigation-area` block.
  *
- * @package gutenberg
+ * @deprecated 5.9.0 See https://github.com/WordPress/gutenberg/issues/36524
+ * @package WordPress
  */
 
 /**

package/src/navigation-link/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/navigation-link` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/navigation-submenu/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/navigation-submenu` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**
@@ -19,7 +19,7 @@ function block_core_navigation_submenu_build_css_colors( $context, $attributes )
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false;
+	$is_sub_menu = isset( $attributes['isTopLevelItem'] ) ? ( ! $attributes['isTopLevelItem'] ) : false;
 
 	// Text color.
 	$named_text_color  = null;
@@ -150,12 +150,6 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$has_submenu = count( $block->inner_blocks ) > 0;
 	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
 
-	$class_name = ! empty( $attributes['className'] ) ? implode( ' ', (array) $attributes['className'] ) : false;
-
-	if ( false !== $class_name ) {
-		$css_classes .= ' ' . $class_name;
-	}
-
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
 	$open_on_hover_and_click = isset( $block->context['openSubmenusOnClick'] ) && ! $block->context['openSubmenusOnClick'] &&

package/src/page-list/edit.js

@@ -14,9 +14,9 @@ import {
 } from '@wordpress/block-editor';
 import { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState, memo } from '@wordpress/element';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
+import { useMemo, useState, memo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -70,7 +70,7 @@ export default function PageListEdit( { context, clientId } ) {
 					clientId={ clientId }
 				/>
 			) }
-			{ totalPages === null && (
+			{ totalPages === undefined && (
 				<div { ...blockProps }>
 					<Placeholder>
 						<Spinner />
@@ -95,48 +95,39 @@ export default function PageListEdit( { context, clientId } ) {
 }
 
 function usePagesByParentId() {
-	const [ pagesByParentId, setPagesByParentId ] = useState( null );
-	const [ totalPages, setTotalPages ] = useState( null );
-
-	useEffect( () => {
-		async function performFetch() {
-			setPagesByParentId( null );
-			setTotalPages( null );
-
-			let pages = await apiFetch( {
-				path: addQueryArgs( '/wp/v2/pages', {
-					orderby: 'menu_order',
-					order: 'asc',
-					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
-					per_page: -1,
-				} ),
-			} );
-
-			// TODO: Once the REST API supports passing multiple values to
-			// 'orderby', this can be removed.
-			// https://core.trac.wordpress.org/ticket/39037
-			pages = sortBy( pages, [ 'menu_order', 'title.rendered' ] );
-
-			setPagesByParentId(
-				pages.reduce( ( accumulator, page ) => {
-					const { parent } = page;
-					if ( accumulator.has( parent ) ) {
-						accumulator.get( parent ).push( page );
-					} else {
-						accumulator.set( parent, [ page ] );
-					}
-					return accumulator;
-				}, new Map() )
-			);
-			setTotalPages( pages.length );
-		}
-		performFetch();
+	const { pages } = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+
+		return {
+			pages: getEntityRecords( 'postType', 'page', {
+				orderby: 'menu_order',
+				order: 'asc',
+				_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+				per_page: -1,
+			} ),
+		};
 	}, [] );
 
-	return {
-		pagesByParentId,
-		totalPages,
-	};
+	return useMemo( () => {
+		// TODO: Once the REST API supports passing multiple values to
+		// 'orderby', this can be removed.
+		// https://core.trac.wordpress.org/ticket/39037
+		const sortedPages = sortBy( pages, [ 'menu_order', 'title.rendered' ] );
+		const pagesByParentId = sortedPages.reduce( ( accumulator, page ) => {
+			const { parent } = page;
+			if ( accumulator.has( parent ) ) {
+				accumulator.get( parent ).push( page );
+			} else {
+				accumulator.set( parent, [ page ] );
+			}
+			return accumulator;
+		}, new Map() );
+
+		return {
+			pagesByParentId,
+			totalPages: pages?.length,
+		};
+	}, [ pages ] );
 }
 
 const PageItems = memo( function PageItems( {

package/src/page-list/index.php

@@ -34,7 +34,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_text_color ) {
 		// Add the color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['textColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['textColor'] ) );
 	} elseif ( $has_picked_text_color ) {
 		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
 	} elseif ( $has_custom_text_color ) {
@@ -55,7 +55,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_background_color ) {
 		// Add the background-color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['backgroundColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['backgroundColor'] ) );
 	} elseif ( $has_picked_background_color ) {
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
 	} elseif ( $has_custom_background_color ) {
@@ -74,7 +74,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	// Give overlay colors priority, fall back to Navigation block colors, then global styles.
 	if ( $has_named_overlay_text_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['overlayTextColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['overlayTextColor'] ) );
 	} elseif ( $has_picked_overlay_text_color ) {
 		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
 	}
@@ -89,7 +89,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 	}
 
 	if ( $has_named_overlay_background_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['overlayBackgroundColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['overlayBackgroundColor'] ) );
 	} elseif ( $has_picked_overlay_background_color ) {
 		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
 	}
@@ -182,7 +182,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
 			'</button>';
 		} else {
-			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
+			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
 				$page['title'],
 				wp_kses_allowed_html( 'post' )
 			) . '</a>';

package/src/post-comments-form/style.scss

@@ -1,6 +1,25 @@
-// Styles copied from button block styles.
 .wp-block-post-comments-form {
+	&[style*="font-weight"] :where(.comment-reply-title) {
+		font-weight: inherit;
+	}
+	&[style*="font-family"] :where(.comment-reply-title) {
+		font-family: inherit;
+	}
+	&[class*="-font-size"] :where(.comment-reply-title),
+	&[style*="font-size"] :where(.comment-reply-title) {
+		font-size: inherit;
+	}
+	&[style*="line-height"] :where(.comment-reply-title) {
+		line-height: inherit;
+	}
+	&[style*="font-style"] :where(.comment-reply-title) {
+		font-style: inherit;
+	}
+	&[style*="letter-spacing"] :where(.comment-reply-title) {
+		letter-spacing: inherit;
+	}
 
+	// Styles copied from button block styles.
 	input[type="submit"] {
 		border: none;
 		box-shadow: none;

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

@@ -2,34 +2,49 @@
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	Icon,
 	ToggleControl,
 	PanelBody,
-	withNotices,
+	Placeholder,
+	Button,
 } from '@wordpress/components';
 import {
 	InspectorControls,
 	BlockControls,
 	MediaPlaceholder,
 	MediaReplaceFlow,
-	BlockIcon,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
-import { postFeaturedImage } from '@wordpress/icons';
+import { upload } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 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="xMidYMid slice" // @todo: "slice" matches the "cover" behavior, "meet" could be used for "container" and "fill" values.
+	>
+		<Path
+			vectorEffect="non-scaling-stroke"
+			d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5"
+		/>
+	</SVG>
+);
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
-	<div className="post-featured-image_placeholder">
-		<Icon icon={ postFeaturedImage } />
-		<p> { __( 'Featured Image' ) }</p>
+	<div className="wp-block-post-featured-image__placeholder">
+		{ placeholderIllustration }
 	</div>
 );
 
@@ -37,8 +52,6 @@ function PostFeaturedImageDisplay( {
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
-	noticeUI,
-	noticeOperations,
 } ) {
 	const isDescendentOfQueryLoop = !! queryId;
 	const { isLink, height, width, scale } = attributes;
@@ -48,42 +61,66 @@ function PostFeaturedImageDisplay( {
 		'featured_media',
 		postId
 	);
+
 	const media = useSelect(
 		( select ) =>
 			featuredImage &&
 			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
 		[ featuredImage ]
 	);
+
 	const blockProps = useBlockProps( {
-		style: { width },
+		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 );
 		}
 	};
-	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
-	}
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const onUploadError = ( message ) => {
+		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+	};
+
 	let image;
 	if ( ! featuredImage && isDescendentOfQueryLoop ) {
 		return <div { ...blockProps }>{ placeholderChip }</div>;
 	}
+
+	const label = __( 'Add a featured image' );
+
 	if ( ! featuredImage ) {
 		image = (
 			<MediaPlaceholder
-				icon={ <BlockIcon icon={ postFeaturedImage } /> }
 				onSelect={ onSelectImage }
-				notices={ noticeUI }
-				onError={ onUploadError }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				labels={ {
-					title: __( 'Featured image' ),
-					instructions: __(
-						'Upload a media file or pick one from your media library.'
-					),
+				onError={ onUploadError }
+				placeholder={ placeholder }
+				mediaLibraryButton={ ( { open } ) => {
+					return (
+						<Button
+							icon={ upload }
+							variant="primary"
+							label={ label }
+							showTooltip
+							tooltipPosition="top center"
+							onClick={ () => {
+								open();
+							} }
+						/>
+					);
 				} }
 			/>
 		);
@@ -136,12 +173,10 @@ function PostFeaturedImageDisplay( {
 	);
 }
 
-const PostFeaturedImageWithNotices = withNotices( PostFeaturedImageDisplay );
-
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
 	if ( ! props.context?.postId ) {
 		return <div { ...blockProps }>{ placeholderChip }</div>;
 	}
-	return <PostFeaturedImageWithNotices { ...props } />;
+	return <PostFeaturedImageDisplay { ...props } />;
 }