Backports fixes for 5.8 beta1 (batch 2)

lib/block-patterns.php

@@ -21,15 +21,15 @@ function register_gutenberg_patterns() {
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
 							<div class="wp-block-query">
-							<!-- wp:query-loop -->
+							<!-- wp:post-template -->
 							<!-- wp:post-title {"isLink":true} /-->
 							<!-- wp:post-featured-image  {"isLink":true,"align":"wide"} /-->
 							<!-- wp:post-excerpt /-->
 							<!-- wp:separator -->
 							<hr class="wp-block-separator"/>
 							<!-- /wp:separator -->
 							<!-- wp:post-date /-->
-							<!-- /wp:query-loop -->
+							<!-- /wp:post-template -->
 							</div>
 							<!-- /wp:query -->',
 		)
@@ -43,7 +43,7 @@ function register_gutenberg_patterns() {
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
 							<div class="wp-block-query">
-							<!-- wp:query-loop -->
+							<!-- wp:post-template -->
 							<!-- wp:columns {"align":"wide"} -->
 							<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
 							<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image {"isLink":true} /--></div>
@@ -53,7 +53,7 @@ function register_gutenberg_patterns() {
 							<!-- wp:post-excerpt /--></div>
 							<!-- /wp:column --></div>
 							<!-- /wp:columns -->
-							<!-- /wp:query-loop -->
+							<!-- /wp:post-template -->
 							</div>
 							<!-- /wp:query -->',
 		)
@@ -67,7 +67,7 @@ function register_gutenberg_patterns() {
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
 							<div class="wp-block-query">
-							<!-- wp:query-loop -->
+							<!-- wp:post-template -->
 							<!-- wp:columns {"verticalAlignment":"center"} -->
 							<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
 							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>
@@ -76,7 +76,7 @@ function register_gutenberg_patterns() {
 							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>
 							<!-- /wp:column --></div>
 							<!-- /wp:columns -->
-							<!-- /wp:query-loop -->
+							<!-- /wp:post-template -->
 							</div>
 							<!-- /wp:query -->',
 		)
@@ -90,13 +90,13 @@ function register_gutenberg_patterns() {
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
 							<div class="wp-block-query">
-							<!-- wp:query-loop -->
+							<!-- wp:post-template -->
 							<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
 							<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
 							<!-- wp:post-excerpt {"wordCount":20} /-->
 							<!-- wp:post-date /--></div>
 							<!-- /wp:group -->
-							<!-- /wp:query-loop -->
+							<!-- /wp:post-template -->
 							</div>
 							<!-- /wp:query -->',
 		)
@@ -110,7 +110,7 @@ function register_gutenberg_patterns() {
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->
 							<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-							<div class="wp-block-query"><!-- wp:query-loop -->
+							<div class="wp-block-query"><!-- wp:post-template -->
 							<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->
 							<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>
 							<!-- /wp:separator -->
@@ -124,7 +124,7 @@ function register_gutenberg_patterns() {
 							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>
 							<!-- /wp:column --></div>
 							<!-- /wp:columns -->
-							<!-- /wp:query-loop --></div>
+							<!-- /wp:post-template --></div>
 							<!-- /wp:query --></div>
 							<!-- /wp:group -->',
 		)
@@ -140,26 +140,26 @@ function register_gutenberg_patterns() {
 							<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
 							<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
 							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
-							<div class="wp-block-query"><!-- wp:query-loop -->
+							<div class="wp-block-query"><!-- wp:post-template -->
 							<!-- wp:post-featured-image /-->
 							<!-- wp:post-title /-->
 							<!-- wp:post-date /-->
 							<!-- wp:spacer {"height":200} -->
 							<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
 							<!-- /wp:spacer -->
-							<!-- /wp:query-loop --></div>
+							<!-- /wp:post-template --></div>
 							<!-- /wp:query --></div>
 							<!-- /wp:column -->
 							<!-- wp:column {"width":"50%"} -->
 							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
-							<div class="wp-block-query"><!-- wp:query-loop -->
+							<div class="wp-block-query"><!-- wp:post-template -->
 							<!-- wp:spacer {"height":200} -->
 							<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
 							<!-- /wp:spacer -->
 							<!-- wp:post-featured-image /-->
 							<!-- wp:post-title /-->
 							<!-- wp:post-date /-->
-							<!-- /wp:query-loop --></div>
+							<!-- /wp:post-template --></div>
 							<!-- /wp:query --></div>
 							<!-- /wp:column --></div>
 							<!-- /wp:columns --></main>

lib/blocks.php

@@ -102,7 +102,7 @@ function gutenberg_reregister_core_block_types() {
 				'post-navigation-link.php'      => 'core/post-navigation-link',
 				'post-title.php'                => 'core/post-title',
 				'query.php'                     => 'core/query',
-				'query-loop.php'                => 'core/query-loop',
+				'post-template.php'             => 'core/post-template',
 				'query-title.php'               => 'core/query-title',
 				'query-pagination.php'          => 'core/query-pagination',
 				'query-pagination-next.php'     => 'core/query-pagination-next',
@@ -199,6 +199,8 @@ function gutenberg_register_core_block_styles( $block_name ) {
 
 		// Add a reference to the stylesheet's path to allow calculations for inlining styles in `wp_head`.
 		wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $style_path );
+	} else {
+		wp_register_style( "wp-block-{$block_name}", false );
 	}
 
 	if ( file_exists( gutenberg_dir_path() . $editor_style_path ) ) {
@@ -210,6 +212,8 @@ function gutenberg_register_core_block_styles( $block_name ) {
 			filemtime( gutenberg_dir_path() . $editor_style_path )
 		);
 		wp_style_add_data( "wp-block-{$block_name}-editor", 'rtl', 'replace' );
+	} else {
+		wp_register_style( "wp-block-{$block_name}-editor", false );
 	}
 }
 
@@ -466,5 +470,4 @@ function gutenberg_migrate_old_typography_shape( $metadata ) {
 	return $metadata;
 }
 
-
 add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' );

lib/compat/wordpress-5.8/block-editor.php

@@ -371,3 +371,27 @@ function gutenberg_block_editor_rest_api_preload( array $preload_paths, $block_e
 		'after'
 	);
 }
+
+/**
+ * Filters the arguments for registering a block type.
+ *
+ * @todo Remove from the Gutenberg plugin when WordPress 5.8 is the minimum required version.
+ *
+ * @param array $args Array of arguments for registering a block type.
+ *
+ * @return array Returns the $metadata with any missing `style` and `editorStyle` added.
+ */
+function gutenberg_add_missing_styles_to_core_block_json( $args ) {
+	if ( ! empty( $args['name'] ) && 0 === strpos( $args['name'], 'core/' ) ) {
+		$block_name = str_replace( 'core/', '', $args['name'] );
+
+		if ( ! isset( $args['style'] ) ) {
+			$args['style'] = "wp-block-$block_name";
+		}
+		if ( ! isset( $args['editor_style'] ) ) {
+			$args['editor_style'] = "wp-block-$block_name-editor";
+		}
+	}
+	return $args;
+}
+add_filter( 'register_block_type_args', 'gutenberg_add_missing_styles_to_core_block_json' );

packages/block-editor/src/components/editor-styles/index.js

@@ -31,7 +31,11 @@ function useDarkThemeBodyClassName( styles ) {
 				.getComputedStyle( canvas, null )
 				.getPropertyValue( 'background-color' );
 
-			if ( tinycolor( backgroundColor ).getLuminance() > 0.5 ) {
+			// If background is transparent, it should be treated as light color.
+			if (
+				tinycolor( backgroundColor ).getLuminance() > 0.5 ||
+				tinycolor( backgroundColor ).getAlpha() === 0
+			) {
 				body.classList.remove( 'is-dark-theme' );
 			} else {
 				body.classList.add( 'is-dark-theme' );

packages/block-library/src/editor.scss

@@ -46,7 +46,7 @@
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";
 @import "./query-title/editor.scss";
-@import "./query-loop/editor.scss";
+@import "./post-template/editor.scss";
 @import "./query/editor.scss";
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";

packages/block-library/src/index.js

@@ -70,7 +70,7 @@ import * as siteTagline from './site-tagline';
 import * as siteTitle from './site-title';
 import * as templatePart from './template-part';
 import * as query from './query';
-import * as queryLoop from './query-loop';
+import * as postTemplate from './post-template';
 import * as queryTitle from './query-title';
 import * as queryPagination from './query-pagination';
 import * as queryPaginationNext from './query-pagination-next';
@@ -175,7 +175,7 @@ export const __experimentalGetCoreBlocks = () => [
 	siteTitle,
 
 	query,
-	queryLoop,
+	postTemplate,
 	queryTitle,
 	queryPagination,
 	queryPaginationNext,

packages/block-library/src/post-author/edit.js

@@ -19,9 +19,21 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
+function PostAuthorEdit( {
+	clientId,
+	isSelected,
+	context,
+	attributes,
+	setAttributes,
+} ) {
 	const { postType, postId } = context;
 
+	const isEditable = useIsEditablePostBlock( clientId );
 	const { authorId, authorDetails, authors } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getUser, getUsers } = select(
@@ -66,7 +78,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Author Settings' ) }>
-					{ !! authors?.length && (
+					{ isEditable && !! authors?.length && (
 						<SelectControl
 							label={ __( 'Author' ) }
 							value={ authorId }

packages/block-library/src/post-content/edit.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { useMemo, RawHTML } from '@wordpress/element';
 import {
 	useBlockProps,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
@@ -11,10 +12,29 @@ import {
 	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
-import { useEntityBlockEditor } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
 
-function Content( { layout, postType, postId } ) {
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
+function ReadOnlyContent( { postType, postId } ) {
+	const [ , , content ] = useEntityProp(
+		'postType',
+		postType,
+		'content',
+		postId
+	);
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<RawHTML key="html">{ content?.rendered }</RawHTML>
+		</div>
+	);
+}
+
+function EditableContent( { layout, postType, postId } ) {
 	const themeSupportsLayout = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings()?.supportsLayout;
@@ -53,6 +73,16 @@ function Content( { layout, postType, postId } ) {
 	return <div { ...props } />;
 }
 
+function Content( props ) {
+	const { clientId, postType, postId } = props;
+	const isEditable = useIsEditablePostBlock( clientId );
+	return isEditable ? (
+		<EditableContent { ...props } />
+	) : (
+		<ReadOnlyContent postType={ postType } postId={ postId } />
+	);
+}
+
 function Placeholder() {
 	const blockProps = useBlockProps();
 	return (
@@ -76,6 +106,7 @@ function RecursionError() {
 }
 
 export default function PostContentEdit( {
+	clientId,
 	context: { postId: contextPostId, postType: contextPostType },
 	attributes,
 } ) {
@@ -95,6 +126,7 @@ export default function PostContentEdit( {
 					postType={ contextPostType }
 					postId={ contextPostId }
 					layout={ layout }
+					clientId={ clientId }
 				/>
 			) : (
 				<Placeholder />

packages/block-library/src/post-date/edit.js

@@ -26,10 +26,21 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 
-export default function PostDateEdit( { attributes, context, setAttributes } ) {
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
+export default function PostDateEdit( {
+	clientId,
+	attributes,
+	context,
+	setAttributes,
+} ) {
 	const { textAlign, format, isLink } = attributes;
 	const { postId, postType } = context;
 
+	const isEditable = useIsEditablePostBlock( clientId );
 	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
 	const [ date, setDate ] = useEntityProp(
 		'postType',
@@ -98,7 +109,7 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) {
 					} }
 				/>
 
-				{ date && (
+				{ date && isEditable && (
 					<ToolbarButton
 						icon={ edit }
 						title={ __( 'Change Date' ) }