Merge branch 'trunk' into add-storybook-validator

docs/contributors/folder-structure.md

@@ -7,7 +7,6 @@ The following snippet explains how the Gutenberg repository is structured omitti
     ├── README.md
     ├── SECURITY.md
     ├── CONTRIBUTING.md
-    ├── CODE_OF_CONDUCT.md
     │
     ├── .editorconfig
     ├── .eslintignore

lib/compat/wordpress-6.5/blocks.php

@@ -57,7 +57,7 @@ function gutenberg_register_metadata_attribute( $args ) {
  */
 function gutenberg_block_bindings_replace_html( $block_content, $block_name, string $attribute_name, $source_value ) {
 	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
-	if ( ! isset( $block_type->attributes[ $attribute_name ] ) ) {
+	if ( ! isset( $block_type->attributes[ $attribute_name ]['source'] ) ) {
 		return $block_content;
 	}
 

packages/block-editor/src/components/block-toolbar/style.scss

@@ -207,17 +207,18 @@
 		}
 	}
 
-	.block-editor-block-mover .block-editor-block-mover__move-button-container {
-		width: auto;
-
-		@include break-small() {
+	.block-editor-block-mover {
+		.block-editor-block-mover__move-button-container {
+			width: auto;
 			position: relative;
+		}
 
-			&::before {
+		&:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+			@include break-small() {
 				content: "";
 				height: $border-width;
 				width: 100%;
-				background: $gray-900;
+				background: $gray-200;
 				position: absolute;
 				top: 50%;
 				left: 50%;
@@ -226,6 +227,10 @@
 				transform: translate(-50%, 0);
 				margin-top: -$border-width * 0.5;
 			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
 		}
 	}
 

packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

@@ -169,7 +169,8 @@ describe( 'global styles renderer', () => {
 							},
 						},
 					},
-					selector: '.my-heading1 a, .my-heading2 a',
+					selector:
+						'.my-heading1 a:where(:not(.wp-element-button)), .my-heading2 a:where(:not(.wp-element-button))',
 				},
 				{
 					styles: {
@@ -480,7 +481,7 @@ describe( 'global styles renderer', () => {
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }body .is-layout-grid { display:grid; }body .is-layout-grid > * { margin: 0; }' +
-					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
+					'body{background-color: red;margin: 10px;padding: 10px;}a:where(:not(.wp-element-button)){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}' +
 					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px;}.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);

packages/block-editor/src/components/skip-to-selected-block/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 
@@ -11,7 +11,14 @@ import { Button } from '@wordpress/components';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
+ */
+export default function SkipToSelectedBlock() {
+	const selectedBlockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockSelectionStart(),
+		[]
+	);
 	const ref = useBlockRef( selectedBlockClientId );
 	const onClick = () => {
 		ref.current.focus();
@@ -26,14 +33,4 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	) : null;
-};
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
- */
-export default withSelect( ( select ) => {
-	return {
-		selectedBlockClientId:
-			select( blockEditorStore ).getBlockSelectionStart(),
-	};
-} )( SkipToSelectedBlock );
+}

packages/block-library/src/avatar/index.php

@@ -31,7 +31,18 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		: '';
 
 	if ( ! isset( $block->context['commentId'] ) ) {
-		$author_id   = isset( $attributes['userId'] ) ? $attributes['userId'] : get_post_field( 'post_author', $block->context['postId'] );
+		if ( isset( $attributes['userId'] ) ) {
+			$author_id = $attributes['userId'];
+		} elseif ( isset( $block->context['postId'] ) ) {
+			$author_id = get_post_field( 'post_author', $block->context['postId'] );
+		} else {
+			$author_id = get_query_var( 'author' );
+		}
+
+		if ( empty( $author_id ) ) {
+			return '';
+		}
+
 		$author_name = get_the_author_meta( 'display_name', $author_id );
 		// translators: %s is the Author name.
 		$alt          = sprintf( __( '%s Avatar' ), $author_name );

packages/block-library/src/columns/edit.js

@@ -40,6 +40,10 @@ import {
 	toWidthPrecision,
 } from './utils';
 
+const DEFAULT_BLOCK = {
+	name: 'core/column',
+};
+
 function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
 	const { count, canInsertColumnBlock, minCount } = useSelect(
@@ -90,6 +94,8 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 		className: classes,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		orientation: 'horizontal',
 		renderAppender: false,
 		templateLock,

packages/block-library/src/cover/edit/inspector-controls.js

@@ -308,7 +308,11 @@ export default function CoverInspectorControls( {
 					panelId={ clientId }
 				>
 					<CoverHeightInput
-						value={ minHeight }
+						value={
+							attributes?.style?.dimensions?.aspectRatio
+								? ''
+								: minHeight
+						}
 						unit={ minHeightUnit }
 						onChange={ ( newMinHeight ) =>
 							setAttributes( {

packages/block-library/src/gallery/edit.js

@@ -73,6 +73,7 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 	? { type: 'stepper' }
 	: {};
 
+const DEFAULT_BLOCK = { name: 'core/image' };
 const EMPTY_ARRAY = [];
 
 function GalleryEdit( props ) {
@@ -496,6 +497,8 @@ function GalleryEdit( props ) {
 	};
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		orientation: 'horizontal',
 		renderAppender: false,
 		...nativeInnerBlockProps,

packages/block-library/src/list/edit.js

@@ -29,6 +29,9 @@ import OrderedListSettings from './ordered-list-settings';
 import { migrateToListV2 } from './utils';
 import TagName from './tag-name';
 
+const DEFAULT_BLOCK = {
+	name: 'core/list-item',
+};
 const TEMPLATE = [ [ 'core/list-item' ] ];
 const NATIVE_MARGIN_SPACING = 8;
 
@@ -125,6 +128,8 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		template: TEMPLATE,
 		templateLock: false,
 		templateInsertUpdatesSelection: true,

packages/block-library/src/post-author-biography/index.php

@@ -14,11 +14,12 @@
  * @return string Returns the rendered post author biography block.
  */
 function render_block_core_post_author_biography( $attributes, $content, $block ) {
-	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+	if ( isset( $block->context['postId'] ) ) {
+		$author_id = get_post_field( 'post_author', $block->context['postId'] );
+	} else {
+		$author_id = get_query_var( 'author' );
 	}
 
-	$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	if ( empty( $author_id ) ) {
 		return '';
 	}

packages/block-library/src/post-author-name/index.php

@@ -14,11 +14,12 @@
  * @return string Returns the rendered post author name block.
  */
 function render_block_core_post_author_name( $attributes, $content, $block ) {
-	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+	if ( isset( $block->context['postId'] ) ) {
+		$author_id = get_post_field( 'post_author', $block->context['postId'] );
+	} else {
+		$author_id = get_query_var( 'author' );
 	}
 
-	$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	if ( empty( $author_id ) ) {
 		return '';
 	}

packages/blocks/src/api/constants.js

@@ -257,7 +257,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 };
 
 export const __EXPERIMENTAL_ELEMENTS = {
-	link: 'a',
+	link: 'a:where(:not(.wp-element-button))',
 	heading: 'h1, h2, h3, h4, h5, h6',
 	h1: 'h1',
 	h2: 'h2',

packages/create-block/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   Add missing `viewScriptModule` field ([#59140](https://github.com/WordPress/gutenberg/pull/59140)).
 
+### Internal
+
+-   Remove deprecated `viewModule` field  ([#59198](https://github.com/WordPress/gutenberg/pull/59198)).
+
 ## 4.35.0 (2024-02-09)
 
 ## 4.34.0 (2024-01-24)

packages/create-block/lib/init-block.js

@@ -31,7 +31,6 @@ async function initBlockJSON( {
 	style,
 	viewStyle,
 	render,
-	viewModule,
 	viewScriptModule,
 	viewScript,
 	customBlockJSON,
@@ -66,7 +65,6 @@ async function initBlockJSON( {
 					style,
 					viewStyle,
 					render,
-					viewModule,
 					viewScriptModule,
 					viewScript,
 					...customBlockJSON,

packages/create-block/lib/scaffold.js

@@ -45,7 +45,6 @@ module.exports = async (
 		style,
 		viewStyle,
 		render,
-		viewModule,
 		viewScriptModule,
 		viewScript,
 		variantVars,
@@ -88,7 +87,6 @@ module.exports = async (
 		style,
 		viewStyle,
 		render,
-		viewModule,
 		viewScriptModule,
 		viewScript,
 		variantVars,

packages/e2e-tests/plugins/interactive-blocks/store/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/store",
+	"title": "E2E Interactivity tests - store definition",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "store-view",
+	"render": "file:./render.php"
+}

packages/e2e-tests/plugins/interactive-blocks/store/render.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_enqueue_script_module( 'store-view' );
+?>
+
+<div data-wp-interactive="test/store">
+	<div
+		data-testid="non-plain object"
+		data-wp-text="state.isNotProxified"
+		data-wp-init="callbacks.init"
+	></div>
+</div>

packages/e2e-tests/plugins/interactive-blocks/store/view.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+
+const { state } = store( 'test/store', {
+	state: {
+		get isNotProxified() {
+			const { ref } = getElement();
+			return state.elementRef === ref;
+		}
+	},
+	callbacks: {
+		init() {
+			const { ref } = getElement();
+			state.elementRef = ref; // HTMLElement
+		}
+	}
+} )

packages/edit-site/src/components/page-patterns/header.js

@@ -69,6 +69,7 @@ export default function PatternsHeader( {
 								__( 'Action menu for %s pattern category' ),
 								title
 							),
+							size: 'compact',
 						} }
 					>
 						{ ( { onClose } ) => (

packages/edit-site/src/components/save-hub/style.scss

@@ -9,10 +9,7 @@
 .edit-site-save-hub__button {
 	color: inherit;
 	width: 100%;
-
-	&.components-button.components-button {
-		justify-content: center;
-	}
+	justify-content: center;
 
 	&[aria-disabled="true"] {
 		opacity: 1;