@wordpress/block-library 7.14.3 → 7.14.4

package/build-style/post-featured-image/editor.css

@@ -79,19 +79,19 @@
   -webkit-backdrop-filter: none;
           backdrop-filter: none;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
+.wp-block-post-featured-image .components-placeholder {
   justify-content: center;
   align-items: center;
   padding: 0;
   min-height: 200px;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-form-file-upload {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
+.wp-block-post-featured-image .components-placeholder .components-form-file-upload {
   display: none;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
+.wp-block-post-featured-image .components-placeholder .components-button {
   padding: 0;
   display: flex;
   justify-content: center;
@@ -105,51 +105,61 @@
   border-style: solid;
   color: #fff;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button.components-button > svg,
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder .components-button.components-button > svg {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button > svg,
+.wp-block-post-featured-image .components-placeholder .components-button > svg {
   color: inherit;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where(.has-border-color) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
+.wp-block-post-featured-image .components-placeholder:where(.has-border-color),
+.wp-block-post-featured-image img:where(.has-border-color) {
   border-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-top-color"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-top-color"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-top-color"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-top-color"]),
+.wp-block-post-featured-image img:where([style*="border-top-color"]) {
   border-top-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-right-color"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-right-color"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-right-color"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-right-color"]),
+.wp-block-post-featured-image img:where([style*="border-right-color"]) {
   border-right-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-bottom-color"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-bottom-color"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-bottom-color"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-bottom-color"]),
+.wp-block-post-featured-image img:where([style*="border-bottom-color"]) {
   border-bottom-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-left-color"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-left-color"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-left-color"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-left-color"]),
+.wp-block-post-featured-image img:where([style*="border-left-color"]) {
   border-left-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-width"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-width"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-width"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-width"]),
+.wp-block-post-featured-image img:where([style*="border-width"]) {
   border-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-top-width"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-top-width"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-top-width"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-top-width"]),
+.wp-block-post-featured-image img:where([style*="border-top-width"]) {
   border-top-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-right-width"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-right-width"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-right-width"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-right-width"]),
+.wp-block-post-featured-image img:where([style*="border-right-width"]) {
   border-right-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-bottom-width"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-bottom-width"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-bottom-width"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-bottom-width"]),
+.wp-block-post-featured-image img:where([style*="border-bottom-width"]) {
   border-bottom-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-left-width"]),
-.wp-block-post-featured-image.wp-block-post-featured-image .components-placeholder:where([style*="border-left-width"]) {
+.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*="border-left-width"]),
+.wp-block-post-featured-image .components-placeholder:where([style*="border-left-width"]),
+.wp-block-post-featured-image img:where([style*="border-left-width"]) {
   border-left-style: solid;
 }
-.wp-block-post-featured-image.wp-block-post-featured-image[style*=height] .components-placeholder {
+.wp-block-post-featured-image[style*=height] .components-placeholder {
   min-height: 48px;
   min-width: 48px;
   height: 100%;

package/build-style/style-rtl.css

@@ -277,6 +277,9 @@
   margin-left: 2em;
 }
 
+.wp-block-code {
+  box-sizing: border-box;
+}
 .wp-block-code code {
   display: block;
   font-family: inherit;

package/build-style/style.css

@@ -280,6 +280,9 @@
   margin-left: 2em;
 }
 
+.wp-block-code {
+  box-sizing: border-box;
+}
 .wp-block-code code {
   display: block;
   font-family: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.14.3",
+	"version": "7.14.4",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,12 +35,12 @@
 		"@wordpress/api-fetch": "^6.14.1",
 		"@wordpress/autop": "^3.17.1",
 		"@wordpress/blob": "^3.17.1",
-		"@wordpress/block-editor": "^10.0.3",
-		"@wordpress/blocks": "^11.16.3",
-		"@wordpress/components": "^21.0.3",
+		"@wordpress/block-editor": "^10.0.4",
+		"@wordpress/blocks": "^11.16.4",
+		"@wordpress/components": "^21.0.4",
 		"@wordpress/compose": "^5.15.2",
-		"@wordpress/core-data": "^5.0.3",
-		"@wordpress/data": "^7.1.2",
+		"@wordpress/core-data": "^5.0.4",
+		"@wordpress/data": "^7.1.3",
 		"@wordpress/date": "^4.17.1",
 		"@wordpress/deprecated": "^3.17.1",
 		"@wordpress/dom": "^3.17.2",
@@ -50,13 +50,13 @@
 		"@wordpress/i18n": "^4.17.1",
 		"@wordpress/icons": "^9.8.1",
 		"@wordpress/keycodes": "^3.17.1",
-		"@wordpress/notices": "^3.17.2",
+		"@wordpress/notices": "^3.17.3",
 		"@wordpress/primitives": "^3.15.1",
-		"@wordpress/reusable-blocks": "^3.15.3",
-		"@wordpress/rich-text": "^5.15.2",
-		"@wordpress/server-side-render": "^3.15.3",
+		"@wordpress/reusable-blocks": "^3.15.4",
+		"@wordpress/rich-text": "^5.15.3",
+		"@wordpress/server-side-render": "^3.15.4",
 		"@wordpress/url": "^3.18.1",
-		"@wordpress/viewport": "^4.15.2",
+		"@wordpress/viewport": "^4.15.3",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "54a676dba557a76062d3bf91bfe8a3e3ea12d254"
+	"gitHead": "491b4b522dffb4d25aca066ec55500f456ac4aa3"
 }

package/src/code/style.scss

@@ -1,8 +1,13 @@
-// Provide a minimum of overflow handling and ensure the code markup inherits
-// the font-family set on pre.
-.wp-block-code code {
-	display: block;
-	font-family: inherit;
-	overflow-wrap: break-word;
-	white-space: pre-wrap;
+.wp-block-code {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	// Provide a minimum of overflow handling and ensure the code markup inherits
+	// the font-family set on pre.
+	code {
+		display: block;
+		font-family: inherit;
+		overflow-wrap: break-word;
+		white-space: pre-wrap;
+	}
 }

package/src/navigation/edit/index.js

@@ -282,16 +282,18 @@ function Navigation( {
 		hasResolvedNavigationMenus &&
 		! hasUncontrolledInnerBlocks;
 
-	if ( isPlaceholder && ! ref ) {
-		/**
-		 *  this fallback only displays (both in editor and on front)
-		 *  the list of pages block if no menu is available as a fallback.
-		 *  We don't want the fallback to request a save,
-		 *  nor to be undoable, hence we mark it non persistent.
-		 */
-		__unstableMarkNextChangeAsNotPersistent();
-		replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
-	}
+	useEffect( () => {
+		if ( isPlaceholder && ! ref ) {
+			/**
+			 *  this fallback only displays (both in editor and on front)
+			 *  the list of pages block if no menu is available as a fallback.
+			 *  We don't want the fallback to request a save,
+			 *  nor to be undoable, hence we mark it non persistent.
+			 */
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
+		}
+	}, [ clientId, isPlaceholder, ref ] );
 
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;

package/src/post-content/edit.js

@@ -46,7 +46,9 @@ function EditableContent( { layout, context = {} } ) {
 		return getSettings()?.supportsLayout;
 	}, [] );
 	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const usedLayout = ! layout?.type
+		? { ...defaultLayout, ...layout, type: 'default' }
+		: { ...defaultLayout, ...layout };
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,

package/src/post-featured-image/block.json

@@ -62,7 +62,7 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder",
+			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,

package/src/post-featured-image/editor.scss

@@ -6,87 +6,94 @@
 		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
 	}
 
-	&.wp-block-post-featured-image {
-		// Style the placeholder.
-		.wp-block-post-featured-image__placeholder,
-		.components-placeholder {
-			justify-content: center;
-			align-items: center;
-			padding: 0;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
+		align-items: center;
+		padding: 0;
 
-			// Hide the upload button, as it's also available in the media library.
-			.components-form-file-upload {
-				display: none;
-			}
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			display: none;
+		}
 
-			// Style the upload button.
-			.components-button.components-button {
-				padding: 0;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: $grid-unit-60;
-				height: $grid-unit-60;
-				border-radius: 50%;
-				position: relative;
-				background: var(--wp-admin-theme-color);
-				border-color: var(--wp-admin-theme-color);
-				border-style: solid;
-				color: $white;
+		// Style the upload button.
+		.components-button {
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
+			color: $white;
 
-				> svg {
-					color: inherit;
-				}
+			> svg {
+				color: inherit;
 			}
+		}
 
-			// Show default placeholder height when not resized.
-			min-height: 200px;
-
-			// The following override the default placeholder styles that remove
-			// its border so that a user selection for border color or width displays
-			// a visual border.
-			&:where(.has-border-color) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-color"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-color"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-color"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-color"]) {
-				border-left-style: solid;
-			}
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
 
-			&:where([style*="border-width"]) {
-				border-style: solid;
-			}
-			&:where([style*="border-top-width"]) {
-				border-top-style: solid;
-			}
-			&:where([style*="border-right-width"]) {
-				border-right-style: solid;
-			}
-			&:where([style*="border-bottom-width"]) {
-				border-bottom-style: solid;
-			}
-			&:where([style*="border-left-width"]) {
-				border-left-style: solid;
-			}
+	// The following override the default placeholder styles that remove
+	// its border so that a user selection for border color or width displays
+	// a visual border. They also override the `img { border: none; }` applied
+	// by core.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder,
+	img {
+		// The following is required to overcome WP Core applying styles that clear
+		// img borders with a higher specificity than those added by the border
+		// block support to provide a default border-style of solid when a border
+		// color or width has been set.
+		&:where(.has-border-color) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-color"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-color"]) {
+			border-right-style: solid;
+		}
+		&:where([style*="border-bottom-color"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-color"]) {
+			border-left-style: solid;
 		}
 
-		// Provide a minimum size for the placeholder when resized.
-		// Note, this should be as small as we can afford it, and exists only
-		// to ensure there's room for the upload button.
-		&[style*="height"] .components-placeholder {
-			min-height: $grid-unit-60;
-			min-width: $grid-unit-60;
-			height: 100%;
-			width: 100%;
+		&:where([style*="border-width"]) {
+			border-style: solid;
+		}
+		&:where([style*="border-top-width"]) {
+			border-top-style: solid;
+		}
+		&:where([style*="border-right-width"]) {
+			border-right-style: solid;
 		}
+		&:where([style*="border-bottom-width"]) {
+			border-bottom-style: solid;
+		}
+		&:where([style*="border-left-width"]) {
+			border-left-style: solid;
+		}
+	}
+
+	// Provide a minimum size for the placeholder when resized.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
 	}
 }
 

package/src/post-featured-image/index.php

@@ -83,16 +83,25 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 	$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
 	$has_solid_overlay   = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
 	$has_custom_overlay  = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
-	$class_names         = array(
-		'wp-block-post-featured-image__overlay',
-	);
-	$styles_properties   = array();
+	$class_names         = array( 'wp-block-post-featured-image__overlay' );
+	$styles              = array();
 
 	if ( ! $has_dim_background ) {
 		return '';
 	}
 
-	// Generate required classes for the element.
+	// Apply border classes and styles.
+	$border_attributes = get_block_core_post_featured_image_border_attributes( $attributes );
+
+	if ( ! empty( $border_attributes['class'] ) ) {
+		$class_names[] = $border_attributes['class'];
+	}
+
+	if ( ! empty( $border_attributes['style'] ) ) {
+		$styles[] = $border_attributes['style'];
+	}
+
+	// Apply overlay and gradient classes.
 	if ( $has_dim_background ) {
 		$class_names[] = 'has-background-dim';
 		$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
@@ -110,35 +119,20 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
 		$class_names[] = "has-{$attributes['gradient']}-gradient-background";
 	}
 
-	// Generate required CSS properties and their values.
-	if ( ! empty( $attributes['style']['border']['radius'] ) ) {
-		$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
-	}
-
-	if ( ! empty( $attributes['style']['border']['width'] ) ) {
-		$styles_properties['border-width'] = $attributes['style']['border']['width'];
-	}
-
+	// Apply background styles.
 	if ( $has_custom_gradient ) {
-		$styles_properties['background-image'] = $attributes['customGradient'];
+		$styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
 	}
 
 	if ( $has_custom_overlay ) {
-		$styles_properties['background-color'] = $attributes['customOverlayColor'];
-	}
-
-	$styles = '';
-
-	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
-		$styles .= "{$style_attribute}: $style_attribute_value; ";
+		$styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
 	}
 
 	return sprintf(
 		'<span class="%s" style="%s" aria-hidden="true"></span>',
 		esc_attr( implode( ' ', $class_names ) ),
-		esc_attr( trim( $styles ) )
+		esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
 	);
-
 }
 
 /**

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

@@ -47,20 +47,23 @@ const Overlay = ( {
 
 	return (
 		<>
-			<span
-				aria-hidden="true"
-				className={ classnames(
-					'wp-block-post-featured-image__overlay',
-					dimRatioToClass( dimRatio ),
-					{
-						[ overlayColor.class ]: overlayColor.class,
-						'has-background-dim': dimRatio !== undefined,
-						'has-background-gradient': gradientValue,
-						[ gradientClass ]: gradientClass,
-					}
-				) }
-				style={ overlayStyles }
-			/>
+			{ !! dimRatio && (
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-post-featured-image__overlay',
+						dimRatioToClass( dimRatio ),
+						{
+							[ overlayColor.class ]: overlayColor.class,
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						},
+						borderProps.className
+					) }
+					style={ overlayStyles }
+				/>
+			) }
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
 					__experimentalHasMultipleOrigins

package/src/query/edit/inspector-controls/index.js

@@ -241,10 +241,7 @@ export default function QueryInspectorControls( {
 							</ToolsPanelItem>
 						) }
 						{ isPostTypeHierarchical &&
-							! isControlAllowed(
-								allowedControls,
-								'parents'
-							) && (
+							isControlAllowed( allowedControls, 'parents' ) && (
 								<ToolsPanelItem
 									hasValue={ () => !! parents?.length }
 									label={ __( 'Parents' ) }

package/src/query/utils.js

@@ -162,7 +162,7 @@ export function useAllowedControls( attributes ) {
 			select( blocksStore ).getActiveBlockVariation(
 				queryLoopName,
 				attributes
-			)?.allowControls,
+			)?.allowedControls,
 
 		[ attributes ]
 	);

package/src/quote/block.json

@@ -29,7 +29,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"__experimentalSlashInserter": true,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,

package/src/template-part/index.js

@@ -62,13 +62,13 @@ export const init = () => {
 		'blockEditor.__unstableCanInsertBlockType',
 		'removeTemplatePartsFromPostTemplates',
 		(
-			can,
+			canInsert,
 			blockType,
 			rootClientId,
 			{ getBlock, getBlockParentsByBlockName }
 		) => {
 			if ( blockType.name !== 'core/template-part' ) {
-				return can;
+				return canInsert;
 			}
 
 			for ( const disallowedParentType of DISALLOWED_PARENTS ) {