@wordpress/block-library 9.48.0 → 10.0.0

package/src/comments-pagination-previous/README.md

@@ -0,0 +1,64 @@
+# Comments Previous Page
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Displays the previous comment's page link.
+
+- **Name:** `core/comments-pagination-previous`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Dynamic](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (server-rendered)
+
+## Block Relationships
+
+**[Parent](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#parent) blocks (direct):**
+- [`core/comments-pagination`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/core-block-comments-pagination/)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `label` | `string` | — | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `postId`
+- `comments/paginationArrow`
+
+## Block Markup
+
+This is a [**dynamic block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It is rendered on the server and does not save HTML in post content.
+
+In post content, it is stored as a block comment:
+
+```html
+<!-- wp:comments-pagination-previous {"style":{"typography":{"textTransform":"uppercase"}},"backgroundColor":"foreground","fontSize":"medium"} /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-previous/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-pagination-previous/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/comments-title/README.md

@@ -0,0 +1,70 @@
+# Comments Title
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Displays a title with the number of comments.
+
+- **Name:** `core/comments-title`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Dynamic](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (server-rendered)
+
+## Block Relationships
+
+**[Ancestor](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#ancestor) blocks:**
+- [`core/comments`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/core-block-comments/)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `showPostTitle` | `boolean` | `true` | — |
+| `showCommentsCount` | `boolean` | `true` | — |
+| `level` | `number` | `2` | — |
+| `levelOptions` | `array` | — | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `postId`
+- `postType`
+
+## Block Markup
+
+This is a [**dynamic block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It is rendered on the server and does not save HTML in post content.
+
+In post content, it is stored as a block comment:
+
+```html
+<!-- wp:comments-title {"level":4,"style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}},"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large"} /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/common.scss

@@ -125,38 +125,91 @@
 html :where(.has-border-color) {
 	border-style: solid;
 }
-html :where([style*="border-color"]) {
+// Use ^= and *=; selectors so custom properties like --my-border-color
+// don't accidentally match. Only real declarations at the start of
+// the style string or after a semicolon should trigger these rules.
+html
+:where(
+	[style^="border-color"],
+	[style*=";border-color"],
+	[style*="; border-color"]
+) {
 	border-style: solid;
 }
-html :where([style*="border-top-color"]) {
+html
+:where(
+	[style^="border-top-color"],
+	[style*=";border-top-color"],
+	[style*="; border-top-color"]
+) {
 	border-top-style: solid;
 }
-html :where([style*="border-right-color"]) {
+html
+:where(
+	[style^="border-right-color"],
+	[style*=";border-right-color"],
+	[style*="; border-right-color"]
+) {
 	/*rtl:ignore*/
 	border-right-style: solid;
 }
-html :where([style*="border-bottom-color"]) {
+html
+:where(
+	[style^="border-bottom-color"],
+	[style*=";border-bottom-color"],
+	[style*="; border-bottom-color"]
+) {
 	border-bottom-style: solid;
 }
-html :where([style*="border-left-color"]) {
+html
+:where(
+	[style^="border-left-color"],
+	[style*=";border-left-color"],
+	[style*="; border-left-color"]
+) {
 	/*rtl:ignore*/
 	border-left-style: solid;
 }
 
-html :where([style*="border-width"]) {
+html
+:where(
+	[style^="border-width"],
+	[style*=";border-width"],
+	[style*="; border-width"]
+) {
 	border-style: solid;
 }
-html :where([style*="border-top-width"]) {
+html
+:where(
+	[style^="border-top-width"],
+	[style*=";border-top-width"],
+	[style*="; border-top-width"]
+) {
 	border-top-style: solid;
 }
-html :where([style*="border-right-width"]) {
+html
+:where(
+	[style^="border-right-width"],
+	[style*=";border-right-width"],
+	[style*="; border-right-width"]
+) {
 	/*rtl:ignore*/
 	border-right-style: solid;
 }
-html :where([style*="border-bottom-width"]) {
+html
+:where(
+	[style^="border-bottom-width"],
+	[style*=";border-bottom-width"],
+	[style*="; border-bottom-width"]
+) {
 	border-bottom-style: solid;
 }
-html :where([style*="border-left-width"]) {
+html
+:where(
+	[style^="border-left-width"],
+	[style*=";border-left-width"],
+	[style*="; border-left-width"]
+) {
 	/*rtl:ignore*/
 	border-left-style: solid;
 }

package/src/cover/README.md

@@ -0,0 +1,111 @@
+# Cover
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Add an image or video with a text overlay.
+
+- **Name:** `core/cover`
+- **Category:** [media](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `url` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `useFeaturedImage` | `boolean` | `false` | — |
+| `id` | `number` | — | — |
+| `alt` | `string` | `""` | — |
+| `hasParallax` | `boolean` | `false` | — |
+| `isRepeated` | `boolean` | `false` | — |
+| `dimRatio` | `number` | `100` | — |
+| `overlayColor` | `string` | — | — |
+| `customOverlayColor` | `string` | — | — |
+| `isUserOverlayColor` | `boolean` | — | — |
+| `backgroundType` | `string` | `"image"` | — |
+| `focalPoint` | `object` | — | — |
+| `minHeight` | `number` | — | — |
+| `minHeightUnit` | `string` | — | — |
+| `gradient` | `string` | — | — |
+| `customGradient` | `string` | — | — |
+| `contentPosition` | `string` | — | — |
+| `isDark` | `boolean` | `true` | — |
+| `templateLock` | `string \| boolean` | — | [Enum](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#enum-validation): `all`, `insert`, `contentOnly`, `false` |
+| `tagName` | `string` | `"div"` | — |
+| `sizeSlug` | `string` | — | — |
+| `poster` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `poster` |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `padding`: `true`
+  - `margin`: `["top","bottom"]`
+  - `blockGap`: `true`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `false`
+  - [`enableContrastChecker`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-enablecontrastchecker): `false`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `aspectRatio`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
+  - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `false`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+- [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
+  - [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
+- [`allowedBlocks`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#allowedblocks): `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `postId`
+- `postType`
+
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **filter**:
+  - duotone: `.wp-block-cover > .wp-block-cover__image-background, .wp-block-cover > .wp-block-cover__video-background`
+
+## Block Markup
+
+This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
+
+```html
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
+<div class="wp-block-cover">
+    <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover" />
+    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
+    <div class="wp-block-cover__inner-container">
+		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+		<p class="has-text-align-center has-large-font-size">
+			Guten Berg!
+		</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:cover -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/cover/edit/block-controls.js

@@ -11,8 +11,8 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { link } from '@wordpress/icons';
+import { MenuItem, ToolbarButton } from '@wordpress/components';
+import { crop, link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,6 +31,9 @@ export default function CoverBlockControls( {
 	toggleUseFeaturedImage,
 	onClearMedia,
 	onSelectEmbedUrl,
+	onEditMedia,
+	editMediaButtonRef,
+	showEditMediaButton,
 	blockEditingMode,
 } ) {
 	const {
@@ -106,6 +109,15 @@ export default function CoverBlockControls( {
 						onToggle={ toggleMinFullHeight }
 						isDisabled={ ! hasInnerBlocks }
 					/>
+					{ showEditMediaButton && (
+						<ToolbarButton
+							ref={ editMediaButtonRef }
+							icon={ crop }
+							label={ __( 'Crop background image' ) }
+							onClick={ onEditMedia }
+							aria-haspopup="dialog"
+						/>
+					) }
 				</BlockControls>
 			) }
 			<BlockControls group="other">

package/src/cover/edit/embed-video-url-input.js

@@ -58,7 +58,6 @@ export default function EmbedVideoUrlInput( {
 				) }
 				<TextControl
 					type="url"
-					__next40pxDefaultSize
 					label={ __( 'Video URL' ) }
 					value={ url }
 					onChange={ ( value ) => {

package/src/cover/edit/index.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import {
+	useCallback,
 	useEffect,
 	useLayoutEffect,
 	useMemo,
@@ -24,6 +25,7 @@ import {
 	__experimentalUseGradient,
 	store as blockEditorStore,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -55,6 +57,9 @@ import {
 } from './color-utils';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 import { getBackgroundEmbedHtml } from '../embed-video-utils';
+import { unlock } from '../../lock-unlock';
+
+const { openMediaEditorModalKey } = unlock( blockEditorPrivateApis );
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -123,6 +128,11 @@ function CoverEdit( {
 		postId
 	);
 	const { getSettings } = useSelect( blockEditorStore );
+	const openMediaEditorModal = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()[ openMediaEditorModalKey ],
+		[]
+	);
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -490,6 +500,7 @@ function CoverEdit( {
 	);
 
 	const mediaElement = useRef();
+	const editMediaButtonRef = useRef();
 	const currentSettings = {
 		isVideoBackground,
 		isImageBackground,
@@ -500,6 +511,78 @@ function CoverEdit( {
 		overlayColor,
 	};
 
+	const openCoverMediaEditorModal = useCallback( () => {
+		if ( ! id || ! openMediaEditorModal ) {
+			return;
+		}
+
+		openMediaEditorModal( {
+			id,
+			onClose: () => {
+				editMediaButtonRef.current?.focus();
+			},
+			onUpdate: async ( { id: newId, url: newUrl } ) => {
+				if ( typeof newId !== 'number' ) {
+					return;
+				}
+
+				const nextAttributes = {
+					id: newId,
+					backgroundType: IMAGE_BACKGROUND_TYPE,
+					...( newUrl ? { url: newUrl } : {} ),
+					...( newId !== id
+						? { sizeSlug: DEFAULT_MEDIA_SIZE_SLUG }
+						: {} ),
+				};
+
+				if ( newUrl ) {
+					const averageBackgroundColor =
+						await getMediaColor( newUrl );
+
+					// Read latest values after await to avoid stale closures.
+					const {
+						attributes: currentAttrs,
+						overlayColor: currentOverlay,
+					} = propsRef.current;
+
+					let newOverlayColor = currentOverlay.color;
+					if ( ! currentAttrs.isUserOverlayColor ) {
+						newOverlayColor = averageBackgroundColor;
+						setOverlayColor( newOverlayColor );
+
+						// Make undo revert the next setAttributes and the previous setOverlayColor.
+						__unstableMarkNextChangeAsNotPersistent();
+					}
+
+					nextAttributes.isDark = compositeIsDark(
+						currentAttrs.dimRatio,
+						newOverlayColor,
+						averageBackgroundColor
+					);
+					nextAttributes.isUserOverlayColor =
+						currentAttrs.isUserOverlayColor || false;
+				}
+
+				setAttributes( nextAttributes );
+			},
+		} );
+	}, [
+		id,
+		openMediaEditorModal,
+		setAttributes,
+		setOverlayColor,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
+	const showEditMediaButton =
+		hasNonContentControls &&
+		! useFeaturedImage &&
+		isImageBackground &&
+		!! id &&
+		!! url &&
+		! isUploadingMedia &&
+		!! openMediaEditorModal;
+
 	const toggleUseFeaturedImage = async () => {
 		const newUseFeaturedImage = ! useFeaturedImage;
 
@@ -556,6 +639,9 @@ function CoverEdit( {
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			onClearMedia={ onClearMedia }
 			blockEditingMode={ blockEditingMode }
+			onEditMedia={ openCoverMediaEditorModal }
+			editMediaButtonRef={ editMediaButtonRef }
+			showEditMediaButton={ showEditMediaButton }
 		/>
 	);