@wordpress/block-library 11.0.0 → 11.1.0

package/src/columns/block.json

@@ -34,6 +34,15 @@
 				"text": true
 			}
 		},
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"gradient": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true,
+				"gradient": true
+			}
+		},
 		"spacing": {
 			"blockGap": {
 				"__experimentalDefault": "2em",

package/src/columns/style.scss

@@ -95,9 +95,8 @@
 	min-width: 0;
 
 	// Prevent long unbroken words from overflowing.
-	// stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Pending review of overflow-wrap alternative.
-	word-break: break-word; // For back-compat.
-	overflow-wrap: break-word; // New standard.
+	word-break: normal;
+	overflow-wrap: break-word;
 
 	/**
 	* Individual Column Alignment

package/src/comment-author-name/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`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`

package/src/comment-author-name/block.json

@@ -21,6 +21,9 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/comment-content/README.md

@@ -24,8 +24,12 @@ _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`
+  - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
+  - [`button`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-button): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `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`

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/comment-template/hooks.js

@@ -63,7 +63,7 @@ export const useCommentQueryArgs = ( { postId } ) => {
 					post: postId,
 					per_page: perPage,
 					page,
-			  }
+				}
 			: null;
 	}, [ postId, perPage, page ] );
 };

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/style.scss

@@ -70,7 +70,7 @@
 		line-height: 1.5;
 
 		b {
-			font-weight: normal;
+			font-weight: 400;
 		}
 
 		.comment-awaiting-moderation {

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`

package/src/comments-pagination/block.json

@@ -31,6 +31,9 @@
 		"align": true,
 		"reusable": false,
 		"html": false,
+		"background": {
+			"gradient": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,

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

@@ -91,8 +91,7 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
-	// stylelint-disable-next-line property-no-deprecated -- Pending review of overflow-wrap alternative.
-	word-wrap: normal !important;
+	overflow-wrap: normal !important;
 	word-break: normal !important;
 }
 

package/src/cover/edit/index.jsx

@@ -147,7 +147,7 @@ function CoverEdit( {
 								{
 									context: 'view',
 								}
-						  )
+							)
 						: undefined,
 			};
 		},
@@ -208,7 +208,7 @@ function CoverEdit( {
 	const url = useFeaturedImage
 		? mediaUrl
 		: // Ensure the url is not malformed due to sanitization through `wp_kses`.
-		  originalUrl?.replaceAll( '&', '&' );
+			originalUrl?.replaceAll( '&', '&' );
 	const backgroundType = useFeaturedImage
 		? IMAGE_BACKGROUND_TYPE
 		: originalBackgroundType;
@@ -703,10 +703,13 @@ function CoverEdit( {
 			setOverlayColor={ onSetOverlayColor }
 			coverRef={ ref }
 			currentSettings={ currentSettings }
+			onSelectMedia={ onSelectMedia }
+			onUploadError={ onUploadError }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			updateDimRatio={ onUpdateDimRatio }
 			onClearMedia={ onClearMedia }
 			featuredImage={ media }
+			isSelected={ isSelected }
 		/>
 	);
 

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

@@ -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,
@@ -173,7 +183,7 @@ export default function CoverInspectorControls( {
 						'attachment',
 						id,
 						{ context: 'view' }
-				  )
+					)
 				: null,
 		[ id, isImageBackground ]
 	);
@@ -242,7 +252,7 @@ export default function CoverInspectorControls( {
 								? undefined
 								: `${ nextMinHeight }${
 										nextUnit || activeMinHeightUnit || 'px'
-								  }`,
+									}`,
 						aspectRatio: undefined,
 					},
 				} )
@@ -277,8 +287,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

package/src/cover/style.scss

@@ -182,6 +182,16 @@
 		box-shadow: none;
 	}
 
+	&.has-aspect-ratio {
+		// Safari clips overflowing content instead of growing the box when an
+		// aspect ratio is set. Floor the height to the content in WebKit only.
+		// `!important` is required because aspect-ratio covers serialize an
+		// inline `min-height: unset`, which outranks any stylesheet rule.
+		@supports (-webkit-hyphens: none) {
+			min-height: fit-content !important;
+		}
+	}
+
 	.wp-block-cover__embed-background {
 		position: absolute;
 		top: 0;