@wordpress/block-library 9.17.0 → 9.18.0

package/build-style/rss/style.css

@@ -98,13 +98,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-ul.wp-block-rss {
-  list-style: none;
-  padding: 0;
-}
-ul.wp-block-rss.wp-block-rss {
-  box-sizing: border-box;
-}
 ul.wp-block-rss.alignleft {
   /*rtl:ignore*/
   margin-right: 2em;
@@ -117,7 +110,6 @@ ul.wp-block-rss.is-grid {
   display: flex;
   flex-wrap: wrap;
   padding: 0;
-  list-style: none;
 }
 ul.wp-block-rss.is-grid li {
   margin: 0 1em 1em 0;
@@ -145,4 +137,10 @@ ul.wp-block-rss.is-grid li {
 .wp-block-rss__item-author {
   display: block;
   font-size: 0.8125em;
+}
+
+.wp-block-rss {
+  box-sizing: border-box;
+  list-style: none;
+  padding: 0;
 }

package/build-style/social-links/editor-rtl.css

@@ -172,12 +172,6 @@
 .wp-social-link.wp-social-link__is-incomplete {
   opacity: 0.5;
 }
-@media (prefers-reduced-motion: reduce) {
-  .wp-social-link.wp-social-link__is-incomplete {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 
 .wp-block-social-links .is-selected .wp-social-link__is-incomplete,
 .wp-social-link.wp-social-link__is-incomplete:hover,
@@ -188,6 +182,9 @@
 .wp-block-social-links .block-list-appender {
   position: static;
 }
+.wp-block-social-links .block-list-appender .block-editor-inserter {
+  font-size: inherit;
+}
 .wp-block-social-links .block-list-appender .block-editor-button-block-appender {
   height: 1.5em;
   width: 1.5em;

package/build-style/social-links/editor.css

@@ -172,12 +172,6 @@
 .wp-social-link.wp-social-link__is-incomplete {
   opacity: 0.5;
 }
-@media (prefers-reduced-motion: reduce) {
-  .wp-social-link.wp-social-link__is-incomplete {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 
 .wp-block-social-links .is-selected .wp-social-link__is-incomplete,
 .wp-social-link.wp-social-link__is-incomplete:hover,
@@ -188,6 +182,9 @@
 .wp-block-social-links .block-list-appender {
   position: static;
 }
+.wp-block-social-links .block-list-appender .block-editor-inserter {
+  font-size: inherit;
+}
 .wp-block-social-links .block-list-appender .block-editor-button-block-appender {
   height: 1.5em;
   width: 1.5em;

package/build-style/social-links/style-rtl.css

@@ -199,6 +199,10 @@
   background-color: #02e49b;
   color: #fff;
 }
+:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-discord {
+  background-color: #5865f2;
+  color: #fff;
+}
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dribbble {
   background-color: #e94c89;
   color: #fff;
@@ -378,6 +382,9 @@
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-deviantart {
   color: #02e49b;
 }
+:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-discord {
+  color: #5865f2;
+}
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dribbble {
   color: #e94c89;
 }

package/build-style/social-links/style.css

@@ -199,6 +199,10 @@
   background-color: #02e49b;
   color: #fff;
 }
+:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-discord {
+  background-color: #5865f2;
+  color: #fff;
+}
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dribbble {
   background-color: #e94c89;
   color: #fff;
@@ -378,6 +382,9 @@
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-deviantart {
   color: #02e49b;
 }
+:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-discord {
+  color: #5865f2;
+}
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dribbble {
   color: #e94c89;
 }

package/build-style/style-rtl.css

@@ -3277,13 +3277,6 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   text-decoration: none;
 }
 
-ul.wp-block-rss {
-  list-style: none;
-  padding: 0;
-}
-ul.wp-block-rss.wp-block-rss {
-  box-sizing: border-box;
-}
 ul.wp-block-rss.alignleft {
   margin-right: 2em;
 }
@@ -3294,7 +3287,6 @@ ul.wp-block-rss.is-grid {
   display: flex;
   flex-wrap: wrap;
   padding: 0;
-  list-style: none;
 }
 ul.wp-block-rss.is-grid li {
   margin: 0 0 1em 1em;
@@ -3324,6 +3316,12 @@ ul.wp-block-rss.is-grid li {
   font-size: 0.8125em;
 }
 
+.wp-block-rss {
+  box-sizing: border-box;
+  list-style: none;
+  padding: 0;
+}
+
 .wp-block-search__button {
   margin-right: 10px;
   word-break: normal;
@@ -3611,6 +3609,10 @@ ul.wp-block-rss.is-grid li {
   background-color: #02e49b;
   color: #fff;
 }
+:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-discord {
+  background-color: #5865f2;
+  color: #fff;
+}
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dribbble {
   background-color: #e94c89;
   color: #fff;
@@ -3790,6 +3792,9 @@ ul.wp-block-rss.is-grid li {
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-deviantart {
   color: #02e49b;
 }
+:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-discord {
+  color: #5865f2;
+}
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dribbble {
   color: #e94c89;
 }

package/build-style/style.css

@@ -3309,13 +3309,6 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   text-decoration: none;
 }
 
-ul.wp-block-rss {
-  list-style: none;
-  padding: 0;
-}
-ul.wp-block-rss.wp-block-rss {
-  box-sizing: border-box;
-}
 ul.wp-block-rss.alignleft {
   /*rtl:ignore*/
   margin-right: 2em;
@@ -3328,7 +3321,6 @@ ul.wp-block-rss.is-grid {
   display: flex;
   flex-wrap: wrap;
   padding: 0;
-  list-style: none;
 }
 ul.wp-block-rss.is-grid li {
   margin: 0 1em 1em 0;
@@ -3358,6 +3350,12 @@ ul.wp-block-rss.is-grid li {
   font-size: 0.8125em;
 }
 
+.wp-block-rss {
+  box-sizing: border-box;
+  list-style: none;
+  padding: 0;
+}
+
 .wp-block-search__button {
   margin-left: 10px;
   word-break: normal;
@@ -3646,6 +3644,10 @@ ul.wp-block-rss.is-grid li {
   background-color: #02e49b;
   color: #fff;
 }
+:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-discord {
+  background-color: #5865f2;
+  color: #fff;
+}
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dribbble {
   background-color: #e94c89;
   color: #fff;
@@ -3825,6 +3827,9 @@ ul.wp-block-rss.is-grid li {
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-deviantart {
   color: #02e49b;
 }
+:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-discord {
+  color: #5865f2;
+}
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dribbble {
   color: #e94c89;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.17.0",
+	"version": "9.18.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,39 +41,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.17.0",
-		"@wordpress/api-fetch": "^7.17.0",
-		"@wordpress/autop": "^4.17.0",
-		"@wordpress/blob": "^4.17.0",
-		"@wordpress/block-editor": "^14.12.0",
-		"@wordpress/blocks": "^14.6.0",
-		"@wordpress/components": "^29.3.0",
-		"@wordpress/compose": "^7.17.0",
-		"@wordpress/core-data": "^7.17.0",
-		"@wordpress/data": "^10.17.0",
-		"@wordpress/date": "^5.17.0",
-		"@wordpress/deprecated": "^4.17.0",
-		"@wordpress/dom": "^4.17.0",
-		"@wordpress/element": "^6.17.0",
-		"@wordpress/escape-html": "^3.17.0",
-		"@wordpress/hooks": "^4.17.0",
-		"@wordpress/html-entities": "^4.17.0",
-		"@wordpress/i18n": "^5.17.0",
-		"@wordpress/icons": "^10.17.0",
-		"@wordpress/interactivity": "^6.17.0",
-		"@wordpress/interactivity-router": "^2.17.0",
-		"@wordpress/keyboard-shortcuts": "^5.17.0",
-		"@wordpress/keycodes": "^4.17.0",
-		"@wordpress/notices": "^5.17.0",
-		"@wordpress/patterns": "^2.17.0",
-		"@wordpress/primitives": "^4.17.0",
-		"@wordpress/private-apis": "^1.17.0",
-		"@wordpress/reusable-blocks": "^5.17.0",
-		"@wordpress/rich-text": "^7.17.0",
-		"@wordpress/server-side-render": "^5.17.0",
-		"@wordpress/url": "^4.17.0",
-		"@wordpress/viewport": "^6.17.0",
-		"@wordpress/wordcount": "^4.17.0",
+		"@wordpress/a11y": "^4.18.0",
+		"@wordpress/api-fetch": "^7.18.0",
+		"@wordpress/autop": "^4.18.0",
+		"@wordpress/blob": "^4.18.0",
+		"@wordpress/block-editor": "^14.13.0",
+		"@wordpress/blocks": "^14.7.0",
+		"@wordpress/components": "^29.4.0",
+		"@wordpress/compose": "^7.18.0",
+		"@wordpress/core-data": "^7.18.0",
+		"@wordpress/data": "^10.18.0",
+		"@wordpress/date": "^5.18.0",
+		"@wordpress/deprecated": "^4.18.0",
+		"@wordpress/dom": "^4.18.0",
+		"@wordpress/element": "^6.18.0",
+		"@wordpress/escape-html": "^3.18.0",
+		"@wordpress/hooks": "^4.18.0",
+		"@wordpress/html-entities": "^4.18.0",
+		"@wordpress/i18n": "^5.18.0",
+		"@wordpress/icons": "^10.18.0",
+		"@wordpress/interactivity": "^6.18.0",
+		"@wordpress/interactivity-router": "^2.18.0",
+		"@wordpress/keyboard-shortcuts": "^5.18.0",
+		"@wordpress/keycodes": "^4.18.0",
+		"@wordpress/notices": "^5.18.0",
+		"@wordpress/patterns": "^2.18.0",
+		"@wordpress/primitives": "^4.18.0",
+		"@wordpress/private-apis": "^1.18.0",
+		"@wordpress/reusable-blocks": "^5.18.0",
+		"@wordpress/rich-text": "^7.18.0",
+		"@wordpress/server-side-render": "^5.18.0",
+		"@wordpress/url": "^4.18.0",
+		"@wordpress/viewport": "^6.18.0",
+		"@wordpress/wordcount": "^4.18.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "68a831c3178197fe87db284d4b94e5743bfb6b6c"
+	"gitHead": "afe4fb333177642180ac020f1030c5685eab7183"
 }

package/src/archives/block.json

@@ -54,6 +54,15 @@
 				"fontSize": true
 			}
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/block/index.php

@@ -87,25 +87,8 @@ function render_block_core_block( $attributes ) {
 		add_filter( 'render_block_context', $filter_block_context, 1 );
 	}
 
-	$ignored_hooked_blocks = get_post_meta( $attributes['ref'], '_wp_ignored_hooked_blocks', true );
-	if ( ! empty( $ignored_hooked_blocks ) ) {
-		$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
-		$attributes['metadata'] = array(
-			'ignoredHookedBlocks' => $ignored_hooked_blocks,
-		);
-	}
-
-	// Wrap in "Block" block so the Block Hooks algorithm can insert blocks
-	// that are hooked as first or last child of `core/block`.
-	$content = get_comment_delimited_block_content(
-		'core/block',
-		$attributes,
-		$content
-	);
 	// Apply Block Hooks.
-	$content = apply_block_hooks_to_content( $content, $reusable_block );
-	// Remove block wrapper.
-	$content = remove_serialized_parent_block( $content );
+	$content = apply_block_hooks_to_content_from_post_object( $content, $reusable_block );
 
 	$content = do_blocks( $content );
 	unset( $seen_refs[ $attributes['ref'] ] );

package/src/categories/block.json

@@ -66,6 +66,15 @@
 				"fontSize": true
 			}
 		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		},

package/src/navigation/index.php

@@ -241,11 +241,12 @@ class WP_Navigation_Block_Renderer {
 			// it encounters whitespace. This code strips it.
 			$blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
-			// Run Block Hooks algorithm to inject hooked blocks.
-			$markup         = block_core_navigation_insert_hooked_blocks( $blocks, $navigation_post );
-			$root_nav_block = parse_blocks( $markup )[0];
-
-			$blocks = isset( $root_nav_block['innerBlocks'] ) ? $root_nav_block['innerBlocks'] : $blocks;
+			// Re-serialize, and run Block Hooks algorithm to inject hooked blocks.
+			// TODO: See if we can move the apply_block_hooks_to_content_from_post_object() call
+			// before the parse_blocks() call further above, to avoid the extra serialization/parsing.
+			$markup = serialize_blocks( $blocks );
+			$markup = apply_block_hooks_to_content_from_post_object( $markup, $navigation_post );
+			$blocks = parse_blocks( $markup );
 
 			// TODO - this uses the full navigation block attributes for the
 			// context which could be refined.
@@ -1077,12 +1078,11 @@ function block_core_navigation_get_fallback_blocks() {
 
 		// Run Block Hooks algorithm to inject hooked blocks.
 		// We have to run it here because we need the post ID of the Navigation block to track ignored hooked blocks.
-		$markup = block_core_navigation_insert_hooked_blocks( $fallback_blocks, $navigation_post );
-		$blocks = parse_blocks( $markup );
-
-		if ( isset( $blocks[0]['innerBlocks'] ) ) {
-			$fallback_blocks = $blocks[0]['innerBlocks'];
-		}
+		// TODO: See if we can move the apply_block_hooks_to_content_from_post_object() call
+		// before the parse_blocks() call further above, to avoid the extra serialization/parsing.
+		$markup          = serialize_blocks( $fallback_blocks );
+		$markup          = apply_block_hooks_to_content_from_post_object( $markup, $navigation_post );
+		$fallback_blocks = parse_blocks( $markup );
 	}
 
 	/**
@@ -1436,61 +1436,3 @@ function block_core_navigation_get_most_recently_published_navigation() {
 
 	return null;
 }
-
-/**
- * Mock a parsed block for the Navigation block given its inner blocks and the `wp_navigation` post object.
- * The `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is queried to add the `metadata.ignoredHookedBlocks` attribute.
- *
- * @since 6.5.0
- *
- * @param array   $inner_blocks Parsed inner blocks of a Navigation block.
- * @param WP_Post $post         `wp_navigation` post object corresponding to the block.
- *
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_mock_parsed_block( $inner_blocks, $post ) {
-	$attributes = array();
-
-	if ( isset( $post->ID ) ) {
-		$ignored_hooked_blocks = get_post_meta( $post->ID, '_wp_ignored_hooked_blocks', true );
-		if ( ! empty( $ignored_hooked_blocks ) ) {
-			$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
-			$attributes['metadata'] = array(
-				'ignoredHookedBlocks' => $ignored_hooked_blocks,
-			);
-		}
-	}
-
-	$mock_anchor_parent_block = array(
-		'blockName'    => 'core/navigation',
-		'attrs'        => $attributes,
-		'innerBlocks'  => $inner_blocks,
-		'innerContent' => array_fill( 0, count( $inner_blocks ), null ),
-	);
-
-	return $mock_anchor_parent_block;
-}
-
-/**
- * Insert hooked blocks into a Navigation block.
- *
- * Given a Navigation block's inner blocks and its corresponding `wp_navigation` post object,
- * this function inserts hooked blocks into it, and returns the serialized inner blocks in a
- * mock Navigation block wrapper.
- *
- * If there are any hooked blocks that need to be inserted as the Navigation block's first or last
- * children, the `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is checked to see if any
- * of those hooked blocks should be exempted from insertion.
- *
- * @since 6.5.0
- *
- * @param array   $inner_blocks Parsed inner blocks of a Navigation block.
- * @param WP_Post $post         `wp_navigation` post object corresponding to the block.
- * @return string Serialized inner blocks in mock Navigation block wrapper, with hooked blocks inserted, if any.
- */
-function block_core_navigation_insert_hooked_blocks( $inner_blocks, $post ) {
-	$mock_navigation_block = block_core_navigation_mock_parsed_block( $inner_blocks, $post );
-
-	$mock_navigation_block_markup = serialize_block( $mock_navigation_block );
-	return apply_block_hooks_to_content( $mock_navigation_block_markup, $post, 'insert_hooked_blocks' );
-}

package/src/navigation-link/editor.scss

@@ -104,7 +104,7 @@
 		&.is-invalid,
 		&.is-draft {
 			span {
-				--wp-underline-color: var(--wp--preset--color--vivid-red);
+				--wp-underline-color: #{$alert-red};
 			}
 		}
 	}

package/src/post-content/index.php

@@ -46,33 +46,10 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 		$content .= wp_link_pages( array( 'echo' => 0 ) );
 	}
 
-	$ignored_hooked_blocks = get_post_meta( $post_id, '_wp_ignored_hooked_blocks', true );
-	if ( ! empty( $ignored_hooked_blocks ) ) {
-		$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
-		$attributes['metadata'] = array(
-			'ignoredHookedBlocks' => $ignored_hooked_blocks,
-		);
-	}
-
-	// Wrap in Post Content block so the Block Hooks algorithm can insert blocks
-	// that are hooked as first or last child of `core/post-content`.
-	$content = get_comment_delimited_block_content(
-		'core/post-content',
-		$attributes,
-		$content
-	);
-
-	// We need to remove the `core/post-content` block wrapper after the Block Hooks algorithm,
-	// but before `do_blocks` runs, as it would otherwise attempt to render the same block again --
-	// thus recursing infinitely.
-	add_filter( 'the_content', 'remove_serialized_parent_block', 8 );
-
 	/** This filter is documented in wp-includes/post-template.php */
 	$content = apply_filters( 'the_content', str_replace( ']]>', ']]>', $content ) );
 	unset( $seen_ids[ $post_id ] );
 
-	remove_filter( 'the_content', 'remove_serialized_parent_block', 8 );
-
 	if ( empty( $content ) ) {
 		return '';
 	}

package/src/post-featured-image/dimension-controls.js

@@ -10,19 +10,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import {
-	useSettings,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../lock-unlock';
-
-const { ResolutionTool } = unlock( blockEditorPrivateApis );
+import { useSettings } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -45,7 +33,6 @@ const SCALE_OPTIONS = (
 );
 
 const DEFAULT_SCALE = 'cover';
-const DEFAULT_SIZE = 'full';
 
 const scaleHelp = {
 	cover: __(
@@ -61,9 +48,8 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { aspectRatio, width, height, scale, sizeSlug },
+	attributes: { aspectRatio, width, height, scale },
 	setAttributes,
-	media,
 } ) => {
 	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
 		useSettings(
@@ -75,18 +61,6 @@ const DimensionControls = ( {
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
-	const imageSizes = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().imageSizes,
-		[]
-	);
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => {
-			return media?.media_details?.sizes?.[ slug ]?.source_url;
-		} )
-		.map( ( { name, slug } ) => ( {
-			value: slug,
-			label: name,
-		} ) );
 
 	const onDimensionChange = ( dimension, nextValue ) => {
 		const parsedValue = parseFloat( nextValue );
@@ -230,21 +204,6 @@ const DimensionControls = ( {
 					</ToggleGroupControl>
 				</ToolsPanelItem>
 			) }
-			{ !! imageSizeOptions.length && (
-				<ResolutionTool
-					panelId={ clientId }
-					value={ sizeSlug }
-					defaultValue={ DEFAULT_SIZE }
-					options={ imageSizeOptions }
-					onChange={ ( nextSizeSlug ) =>
-						setAttributes( { sizeSlug: nextSizeSlug } )
-					}
-					isShownByDefault={ false }
-					resetAllFilter={ () => ( {
-						sizeSlug: DEFAULT_SIZE,
-					} ) }
-				/>
-			) }
 		</>
 	);
 };

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

@@ -27,6 +27,8 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useMemo, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -40,12 +42,37 @@ import DimensionControls from './dimension-controls';
 import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
+const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+
+function FeaturedImageResolutionTool( { image, value, onChange } ) {
+	const { imageSizes } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			imageSizes: getSettings().imageSizes,
+		};
+	}, [] );
+
+	if ( ! imageSizes?.length ) {
+		return null;
+	}
+
+	const imageSizeOptions = imageSizes
+		.filter(
+			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
+		)
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
-function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
-		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
+		<ResolutionTool
+			value={ value }
+			defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+			options={ imageSizeOptions }
+			onChange={ onChange }
+		/>
 	);
 }
 
@@ -125,7 +152,9 @@ export default function PostFeaturedImageEdit( {
 		[ featuredImage, postTypeSlug, postId ]
 	);
 
-	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
+	const mediaUrl =
+		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
+		media?.source_url;
 
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
@@ -291,6 +320,13 @@ export default function PostFeaturedImageEdit( {
 							/>
 						</ToolsPanelItem>
 					) }
+					<FeaturedImageResolutionTool
+						image={ media }
+						value={ sizeSlug }
+						onChange={ ( nextSizeSlug ) =>
+							setAttributes( { sizeSlug: nextSizeSlug } )
+						}
+					/>
 				</ToolsPanel>
 			</InspectorControls>
 		</>