@wordpress/block-library 9.8.5 → 9.8.7

package/build-style/post-content/style.css

@@ -89,8 +89,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-post-content::after {
-  content: "";
-  display: table;
-  clear: both;
+.wp-block-post-content {
+  display: flow-root;
 }

package/build-style/style-rtl.css

@@ -653,7 +653,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1;
+  z-index: 0;
   opacity: 0.5;
 }
 .wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
@@ -816,8 +816,8 @@
 }
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover__inner-container {
+  position: relative;
   width: 100%;
-  z-index: 1;
   color: inherit; direction: rtl;
 }
 .wp-block-cover-image.is-position-top-left,
@@ -933,11 +933,11 @@ video.wp-block-cover__video-background.is-repeated {
 }
 
 .wp-block-cover__video-background {
-  z-index: 0;
+  z-index: -1;
 }
 
 .wp-block-cover__image-background {
-  z-index: 0;
+  z-index: -1;
 }
 
 section.wp-block-cover-image h2,
@@ -2883,10 +2883,8 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-right: 0.5em;
 }
 
-.wp-block-post-content::after {
-  content: "";
-  display: table;
-  clear: both;
+.wp-block-post-content {
+  display: flow-root;
 }
 
 .wp-block-post-date {

package/build-style/style.css

@@ -659,7 +659,7 @@
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 1;
+  z-index: 0;
   opacity: 0.5;
 }
 .wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
@@ -822,8 +822,8 @@
 }
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover__inner-container {
+  position: relative;
   width: 100%;
-  z-index: 1;
   color: inherit;
   /*rtl:raw: direction: rtl; */
 }
@@ -940,11 +940,11 @@ video.wp-block-cover__video-background.is-repeated {
 }
 
 .wp-block-cover__video-background {
-  z-index: 0;
+  z-index: -1;
 }
 
 .wp-block-cover__image-background {
-  z-index: 0;
+  z-index: -1;
 }
 
 section.wp-block-cover-image h2,
@@ -2913,10 +2913,8 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-left: 0.5em;
 }
 
-.wp-block-post-content::after {
-  content: "";
-  display: table;
-  clear: both;
+.wp-block-post-content {
+  display: flow-root;
 }
 
 .wp-block-post-date {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.8.5",
+	"version": "9.8.7",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,11 +43,11 @@
 		"@wordpress/api-fetch": "^7.8.2",
 		"@wordpress/autop": "^4.8.1",
 		"@wordpress/blob": "^4.8.1",
-		"@wordpress/block-editor": "^14.3.4",
+		"@wordpress/block-editor": "^14.3.6",
 		"@wordpress/blocks": "^13.8.4",
-		"@wordpress/components": "^28.8.4",
+		"@wordpress/components": "^28.8.6",
 		"@wordpress/compose": "^7.8.3",
-		"@wordpress/core-data": "^7.8.4",
+		"@wordpress/core-data": "^7.8.6",
 		"@wordpress/data": "^10.8.3",
 		"@wordpress/date": "^5.8.2",
 		"@wordpress/deprecated": "^4.8.2",
@@ -58,17 +58,17 @@
 		"@wordpress/html-entities": "^4.8.1",
 		"@wordpress/i18n": "^5.8.2",
 		"@wordpress/icons": "^10.8.2",
-		"@wordpress/interactivity": "^6.8.2",
-		"@wordpress/interactivity-router": "^2.8.3",
+		"@wordpress/interactivity": "^6.8.4",
+		"@wordpress/interactivity-router": "^2.8.5",
 		"@wordpress/keyboard-shortcuts": "^5.8.3",
 		"@wordpress/keycodes": "^4.8.2",
 		"@wordpress/notices": "^5.8.3",
-		"@wordpress/patterns": "^2.8.4",
+		"@wordpress/patterns": "^2.8.6",
 		"@wordpress/primitives": "^4.8.1",
 		"@wordpress/private-apis": "^1.8.1",
-		"@wordpress/reusable-blocks": "^5.8.4",
+		"@wordpress/reusable-blocks": "^5.8.6",
 		"@wordpress/rich-text": "^7.8.3",
-		"@wordpress/server-side-render": "^5.8.4",
+		"@wordpress/server-side-render": "^5.8.6",
 		"@wordpress/url": "^4.8.1",
 		"@wordpress/viewport": "^6.8.3",
 		"@wordpress/wordcount": "^4.8.1",
@@ -89,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "07c75154341d1e5a1b8aaa1c226029b6666a52a9"
+	"gitHead": "b7af02f8431034ee19cdc33dd105d21705823eed"
 }

package/src/cover/edit/index.js

@@ -18,6 +18,7 @@ import {
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -278,6 +279,9 @@ function CoverEdit( {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
+	const blockEditingMode = useBlockEditingMode();
+	const hasNonContentControls = blockEditingMode === 'default';
+
 	const [ resizeListener, { height, width } ] = useResizeObserver();
 	const resizableBoxDimensions = useMemo( () => {
 		return {
@@ -447,7 +451,7 @@ function CoverEdit( {
 			<>
 				{ blockControls }
 				{ inspectorControls }
-				{ isSelected && (
+				{ hasNonContentControls && isSelected && (
 					<ResizableCoverPopover { ...resizableCoverProps } />
 				) }
 				<TagName
@@ -576,7 +580,7 @@ function CoverEdit( {
 				/>
 				<div { ...innerBlocksProps } />
 			</TagName>
-			{ isSelected && (
+			{ hasNonContentControls && isSelected && (
 				<ResizableCoverPopover { ...resizableCoverProps } />
 			) }
 		</>

package/src/cover/editor.scss

@@ -42,7 +42,6 @@
 	// Shown while media is being uploaded
 	.components-spinner {
 		position: absolute;
-		z-index: z-index(".wp-block-cover__inner-container");
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%); // Account for spinner dimensions

package/src/cover/style.scss

@@ -95,8 +95,8 @@
 	}
 
 	.wp-block-cover__inner-container {
+		position: relative;
 		width: 100%;
-		z-index: z-index(".wp-block-cover__inner-container");
 		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */

package/src/group/editor.scss

@@ -39,9 +39,9 @@
 	&::after {
 		content: "";
 		display: flex;
-		flex: 1 0 $grid-unit-60;
+		flex: 1 0 $button-size-next-default-40px;
 		pointer-events: none;
-		min-height: $grid-unit-60 - $border-width - $border-width;
+		min-height: $button-size-next-default-40px - $border-width - $border-width;
 		border: $border-width dashed currentColor;
 	}
 

package/src/image/index.php

@@ -24,7 +24,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 
 	$p = new WP_HTML_Tag_Processor( $content );
 
-	if ( ! $p->next_tag( 'img' ) || null === $p->get_attribute( 'src' ) ) {
+	if ( ! $p->next_tag( 'img' ) || ! $p->get_attribute( 'src' ) ) {
 		return '';
 	}
 

package/src/post-content/edit.js

@@ -8,19 +8,24 @@ import {
 	RecursionProvider,
 	useHasRecursion,
 	Warning,
+	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
+import { parse } from '@wordpress/blocks';
 import {
 	useEntityProp,
 	useEntityBlockEditor,
 	store as coreStore,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
 function ReadOnlyContent( {
+	parentLayout,
 	layoutClassNames,
 	userCanEdit,
 	postType,
@@ -33,7 +38,28 @@ function ReadOnlyContent( {
 		postId
 	);
 	const blockProps = useBlockProps( { className: layoutClassNames } );
-	return content?.protected && ! userCanEdit ? (
+	const blocks = useMemo( () => {
+		return content?.raw ? parse( content.raw ) : [];
+	}, [ content?.raw ] );
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+		props: blockProps,
+		layout: parentLayout,
+	} );
+
+	if ( userCanEdit ) {
+		/*
+		 * Rendering the block preview using the raw content blocks allows for
+		 * block support styles to be generated and applied by the editor.
+		 *
+		 * The preview using the raw blocks can only be presented to users with
+		 * edit permissions for the post to prevent potential exposure of private
+		 * block content.
+		 */
+		return <div { ...blockPreviewProps }></div>;
+	}
+
+	return content?.protected ? (
 		<div { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
 		</div>
@@ -96,6 +122,7 @@ function Content( props ) {
 		<EditableContent { ...props } />
 	) : (
 		<ReadOnlyContent
+			parentLayout={ props.parentLayout }
 			layoutClassNames={ layoutClassNames }
 			userCanEdit={ userCanEdit }
 			postType={ postType }
@@ -141,6 +168,7 @@ function RecursionError() {
 export default function PostContentEdit( {
 	context,
 	__unstableLayoutClassNames: layoutClassNames,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
@@ -154,6 +182,7 @@ export default function PostContentEdit( {
 			{ contextPostId && contextPostType ? (
 				<Content
 					context={ context }
+					parentLayout={ parentLayout }
 					layoutClassNames={ layoutClassNames }
 				/>
 			) : (

package/src/post-content/style.scss

@@ -1,5 +1,3 @@
-.wp-block-post-content::after {
-	content: "";
-	display: table;
-	clear: both;
+.wp-block-post-content {
+	display: flow-root;
 }

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

@@ -123,21 +123,18 @@ export default function QueryInspectorControls( props ) {
 	const showInheritControl =
 		isTemplate && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
-		( ! inherit && isControlAllowed( allowedControls, 'postType' ) ) ||
-		! isTemplate;
+		! inherit && isControlAllowed( allowedControls, 'postType' );
 	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
 		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
-		( ! inherit && isControlAllowed( allowedControls, 'order' ) ) ||
-		! isTemplate;
+		! inherit && isControlAllowed( allowedControls, 'order' );
 	const showStickyControl =
-		( ! inherit &&
-			showSticky &&
-			isControlAllowed( allowedControls, 'sticky' ) ) ||
-		( showSticky && ! isTemplate );
+		! inherit &&
+		showSticky &&
+		isControlAllowed( allowedControls, 'sticky' );
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||