@wordpress/block-library 11.0.2-next.v.202609171837.0 → 11.2.0

package/src/comment-content/block.json

@@ -10,8 +10,13 @@
 	"usesContext": [ "commentId" ],
 	"supports": {
 		"anchor": true,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
+			"heading": true,
+			"button": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/comment-date/README.md

@@ -28,6 +28,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`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`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`

package/src/comment-date/block.json

@@ -20,6 +20,9 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-edit-link/README.md

@@ -27,6 +27,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
   - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`

package/src/comment-edit-link/block.json

@@ -17,6 +17,9 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"link": true,
 			"gradients": true,

package/src/comment-reply-link/README.md

@@ -24,6 +24,8 @@ _This block has no custom attributes._
 _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`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`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`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`

package/src/comment-reply-link/block.json

@@ -10,6 +10,9 @@
 	"usesContext": [ "commentId" ],
 	"supports": {
 		"anchor": true,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comments/README.md

@@ -24,8 +24,13 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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): `"wide"`, `"full"`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`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`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
   - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):

package/src/comments/block.json

@@ -20,8 +20,18 @@
 		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
+			"button": true,
 			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {

package/src/comments/edit/placeholder.jsx

@@ -3,6 +3,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { createInterpolateElement } from '@wordpress/element';
+import { inertValue } from '@wordpress/react-inert-value';
 import CommentsForm from '../../post-comments-form/form';
 
 export default function PostCommentsPlaceholder( { postType, postId } ) {
@@ -17,7 +18,10 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 	);
 
 	return (
-		<div className="wp-block-comments__legacy-placeholder" inert="true">
+		<div
+			className="wp-block-comments__legacy-placeholder"
+			inert={ inertValue( true ) }
+		>
 			<h3>
 				{
 					/* translators: %s: Post title. */

package/src/comments-pagination/README.md

@@ -34,6 +34,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `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`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`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`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
@@ -41,6 +43,10 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
   - [`allowInheriting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowinheriting): `false`
   - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `padding`: `true`
+  - `margin`: `true`
+  - `blockGap`: `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`

package/src/comments-pagination/block.json

@@ -31,6 +31,9 @@
 		"align": true,
 		"reusable": false,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -47,6 +50,11 @@
 				"type": "flex"
 			}
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"blockGap": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -60,6 +68,12 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/comments-pagination/style.scss

@@ -1,5 +1,8 @@
 $pagination-margin: 0.5em;
 .wp-block-comments-pagination {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	// Increased specificity to override blocks default margin.
 	> .wp-block-comments-pagination-next,
 	> .wp-block-comments-pagination-previous,

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

@@ -28,6 +28,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`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`

package/src/comments-pagination-next/block.json

@@ -17,6 +17,9 @@
 		"anchor": true,
 		"reusable": false,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
 			"text": false,

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

@@ -26,6 +26,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`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`

package/src/comments-pagination-numbers/block.json

@@ -12,6 +12,9 @@
 		"anchor": true,
 		"reusable": false,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
 			"text": false,

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

@@ -28,6 +28,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`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`

package/src/comments-pagination-previous/block.json

@@ -17,6 +17,12 @@
 		"anchor": true,
 		"reusable": false,
 		"html": false,
+		"background": {
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"gradient": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"text": false,

package/src/comments-title/README.md

@@ -31,6 +31,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `gradient`: `true`
 - [`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):

package/src/comments-title/block.json

@@ -29,6 +29,9 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,

package/src/common.scss

@@ -243,3 +243,41 @@ html :where(.is-position-sticky) {
 		--wp-admin--admin-bar--position-offset: 0px;
 	}
 }
+
+// Polyfill for two parts of MathML that MathML Core leaves out and that
+// converted LaTeX relies on: the `columnalign` attribute on table cells,
+// which `aligned` and `cases` need, and the `menclose` lines that `\overline`
+// and `\underline` produce. Firefox and Safari render both natively, so the
+// feature query limits the rules to Chromium, which implements MathML Core
+// only. The rules key on the standard attributes, so they apply to any MathML
+// that carries them and can go once Chromium renders them itself.
+// Feature query from https://github.com/ronkok/Temml/blob/v0.10.34/dist/Temml-Local.css#L64-L65
+//
+// The rules live here because both the Math block and the inline math format
+// produce this MathML.
+//
+// Mathematical notation is written left to right in every language, so
+// nothing here is flipped for RTL.
+/*!rtl:begin:ignore*/
+@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
+	// Plain `text-align` does not move a cell's content in Chromium, the
+	// `-webkit-` values do.
+	mtd[columnalign="right"] {
+		text-align: -webkit-right;
+	}
+
+	mtd[columnalign="left"] {
+		text-align: -webkit-left;
+	}
+
+	menclose[notation~="top"] {
+		padding-top: 0.1em;
+		border-top: 0.065em solid;
+	}
+
+	menclose[notation~="bottom"] {
+		padding-bottom: 0.1em;
+		border-bottom: 0.065em solid;
+	}
+}
+/*!rtl:end:ignore*/

package/src/cover/README.md

@@ -160,6 +160,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`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`
+  - `interactive`: `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`

package/src/cover/block.json

@@ -153,7 +153,8 @@
 			"allowJustification": false
 		},
 		"interactivity": {
-			"clientNavigation": true
+			"clientNavigation": true,
+			"interactive": true
 		},
 		"filter": {
 			"duotone": true

package/src/cover/edit/index.jsx

@@ -9,7 +9,12 @@ import {
 	useState,
 } from '@wordpress/element';
 import { Placeholder, SandBox, Spinner } from '@wordpress/components';
-import { compose, useResizeObserver } from '@wordpress/compose';
+import {
+	compose,
+	useMergeRefs,
+	useReducedMotion,
+	useResizeObserver,
+} from '@wordpress/compose';
 import {
 	withColors,
 	ColorPalette,
@@ -445,6 +450,8 @@ function CoverEdit( {
 		[ url, backgroundType ]
 	);
 
+	const prefersReducedMotion = useReducedMotion();
+
 	// Compute embed HTML for editor display via SandBox
 	const embedHtml = useMemo( () => {
 		if (
@@ -453,8 +460,10 @@ function CoverEdit( {
 		) {
 			return null;
 		}
-		return getBackgroundEmbedHtml( embedPreview.html );
-	}, [ embedPreview, backgroundType ] );
+		return getBackgroundEmbedHtml( embedPreview.html, {
+			autoplay: ! prefersReducedMotion,
+		} );
+	}, [ embedPreview, backgroundType, prefersReducedMotion ] );
 
 	// Set while the media editor has pointed the cover at a freshly
 	// generated file the browser hasn't finished loading; cleared by the
@@ -513,7 +522,11 @@ function CoverEdit( {
 	);
 
 	const ref = useRef();
-	const blockProps = useBlockProps( { ref } );
+	// State, not a ref, so that the element is there on the next render.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	const blockProps = useBlockProps( {
+		ref: useMergeRefs( [ ref, setDropZoneElement ] ),
+	} );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
@@ -522,12 +535,20 @@ function CoverEdit( {
 		{
 			allowedBlocks,
 			templateLock,
-			dropZoneElement: ref.current,
+			dropZoneElement,
 		}
 	);
 
 	const mediaElement = useRef();
 	const editMediaButtonRef = useRef();
+
+	// `autoPlay` only applies when the video loads, so pause a video that is
+	// already playing when the user turns on reduced motion.
+	useEffect( () => {
+		if ( prefersReducedMotion && isVideoBackground ) {
+			mediaElement.current?.pause();
+		}
+	}, [ prefersReducedMotion, isVideoBackground ] );
 	const currentSettings = {
 		isVideoBackground,
 		isImageBackground,
@@ -543,11 +564,18 @@ function CoverEdit( {
 			return;
 		}
 
+		const previousImage = { id, url: propsRef.current.attributes.url };
+		let isUndone = false;
 		openMediaEditorModal( {
 			id,
 			onClose: () => {
 				editMediaButtonRef.current?.focus();
 			},
+			onUndo: () => {
+				isUndone = true;
+				setIsSwappingMedia( false );
+				setAttributes( previousImage );
+			},
 			onUpdate: async ( { id: newId, url: newUrl } ) => {
 				if ( typeof newId !== 'number' ) {
 					return;
@@ -569,6 +597,10 @@ function CoverEdit( {
 				if ( newUrl ) {
 					const averageBackgroundColor =
 						await getMediaColor( newUrl );
+					// Snackbar Undo can run while the image color is loading.
+					if ( isUndone ) {
+						return;
+					}
 
 					// Read latest values after await to avoid stale closures.
 					const {
@@ -703,10 +735,13 @@ function CoverEdit( {
 			setOverlayColor={ onSetOverlayColor }
 			coverRef={ ref }
 			currentSettings={ currentSettings }
+			onSelectMedia={ onSelectMedia }
+			onUploadError={ onUploadError }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			updateDimRatio={ onUpdateDimRatio }
 			onClearMedia={ onClearMedia }
 			featuredImage={ media }
+			isSelected={ isSelected }
 		/>
 	);
 
@@ -833,7 +868,7 @@ function CoverEdit( {
 					<video
 						ref={ mediaElement }
 						className="wp-block-cover__video-background"
-						autoPlay
+						autoPlay={ ! prefersReducedMotion }
 						muted
 						loop
 						src={ url }

package/src/cover/edit/inspector-controls.jsx

@@ -10,7 +10,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	InspectorControls,
 	useSettings,
@@ -23,8 +23,13 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { getFilename } from '@wordpress/url';
 import { Link } from '@wordpress/ui';
-import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
+import {
+	ALLOWED_MEDIA_TYPES,
+	COVER_MIN_HEIGHT,
+	mediaPosition,
+} from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import {
@@ -35,13 +40,11 @@ import {
 } from '../../utils/style-state';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 import PosterImage from '../../utils/poster-image';
+import { MediaControl } from '../../utils/media-control';
 
-const {
-	cleanEmptyObject,
-	isDefaultBlockStyleState,
-	ResolutionTool,
-	HTMLElementControl,
-} = unlock( blockEditorPrivateApis );
+const { cleanEmptyObject, ResolutionTool, HTMLElementControl } = unlock(
+	blockEditorPrivateApis
+);
 
 function CoverHeightInput( {
 	onChange,
@@ -98,8 +101,13 @@ export default function CoverInspectorControls( {
 	setOverlayColor,
 	coverRef,
 	currentSettings,
+	onSelectMedia,
+	onUploadError,
+	toggleUseFeaturedImage,
 	updateDimRatio,
+	onClearMedia,
 	featuredImage,
+	isSelected,
 } ) {
 	const {
 		useFeaturedImage,
@@ -125,21 +133,23 @@ export default function CoverInspectorControls( {
 	const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
 	const { gradientValue, setGradient } = __experimentalUseGradient();
-	const { imageSizes, selectedStyleState } = useSelect(
+	const { imageSizes, selectedStyleState, hasSelectedStyleState } = useSelect(
 		( select ) => {
-			const { getSettings, getSelectedBlockStyleState } = unlock(
-				select( blockEditorStore )
-			);
+			const {
+				getSettings,
+				getSelectedBlockStyleState,
+				hasSelectedBlockStyleState,
+			} = select( blockEditorStore );
 
 			return {
 				imageSizes: getSettings()?.imageSizes,
 				selectedStyleState: getSelectedBlockStyleState( clientId ),
+				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
 			};
 		},
 		[ clientId ]
 	);
-	const hasSelectedStyleState =
-		! isDefaultBlockStyleState( selectedStyleState );
+
 	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
 	const stateMinHeight = getActiveDimensionValue( {
 		attributes,
@@ -217,6 +227,8 @@ export default function CoverInspectorControls( {
 
 	const showFocalPointPicker = isVideoBackground || isImageBackground;
 
+	const prefersReducedMotion = useReducedMotion();
+
 	const imperativeFocalPointPreview = ( value ) => {
 		const [ styleOfRef, property ] = mediaElement.current
 			? [ mediaElement.current.style, 'objectPosition' ]
@@ -277,8 +289,49 @@ export default function CoverInspectorControls( {
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	/*
+	 * Rendered whether or not media has been set, so that a cover in its setup
+	 * state can be given media from the inspector as well as from the toolbar.
+	 * The settings below stay behind their own condition, having nothing to
+	 * configure until there is media to configure.
+	 */
+	const mediaInspectorPanel = isSelected ? (
+		<InspectorControls group="content">
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				resetAll={ onClearMedia }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Media' ) }
+					hasValue={ () => !! url || !! useFeaturedImage }
+					onDeselect={ onClearMedia }
+					isShownByDefault
+				>
+					<MediaControl
+						mediaId={ id }
+						mediaUrl={ url }
+						filename={
+							image?.media_details?.sizes?.full?.file ||
+							image?.slug ||
+							getFilename( url )
+						}
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						onSelect={ onSelectMedia }
+						onError={ onUploadError }
+						onReset={ onClearMedia }
+						useFeaturedImage={ useFeaturedImage }
+						onToggleFeaturedImage={ toggleUseFeaturedImage }
+						emptyLabel={ __( 'Add media' ) }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		</InspectorControls>
+	) : null;
+
 	return (
 		<>
+			{ mediaInspectorPanel }
 			{ ( !! url || useFeaturedImage ) && (
 				<InspectorControls>
 					<ToolsPanel
@@ -345,8 +398,15 @@ export default function CoverInspectorControls( {
 								}
 							>
 								<FocalPointPicker
+									// `autoPlay` only applies when the
+									// video loads, so remount the picker
+									// to stop a preview that is already
+									// playing when the user turns on
+									// reduced motion.
+									key={ prefersReducedMotion }
 									label={ __( 'Focal point' ) }
 									url={ url }
+									autoPlay={ ! prefersReducedMotion }
 									value={ focalPoint }
 									onDragStart={ imperativeFocalPointPreview }
 									onDrag={ imperativeFocalPointPreview }