Merge with trunk

.github/workflows/unit-test.yml

@@ -296,4 +296,4 @@ jobs:
               run: npx lerna run build
 
             - name: Running the tests
-              run: npm run native test -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
+              run: npm run test:native -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"

.gitignore

@@ -35,7 +35,7 @@ yarn.lock
 Thumbs.db
 
 # Report generated from jest-junit
-test/native/junit.xml
+junit.xml
 
 # Local overrides
 .wp-env.override.json

docs/contributors/code/react-native/getting-started-react-native.md

@@ -89,15 +89,15 @@ One of the extensions we are using is the [React Native Tools](https://marketpla
 Use the following command to run the test suite:
 
 ```sh
-npm run native test
+npm run test:native
 ```
 
 It will run the [jest](https://github.com/facebook/jest) test runner on your tests. The tests are running on the desktop against Node.js.
 
 To run the tests with debugger support, start it with the following CLI command:
 
 ```sh
-npm run native test:debug
+npm run test:native:debug
 ```
 
 Then, open `chrome://inspect` in Chrome to attach the debugger (look into the "Remote Target" section). While testing/developing, feel free to sprinkle `debugger` statements anywhere in the code that you'd like the debugger to break.

docs/contributors/code/react-native/osx-setup-guide.md

@@ -212,7 +212,7 @@ After a bit of a wait, we’ll see something like this:
 ## Unit Tests
 
 ```sh
-npm run native test
+npm run test:native
 ```
 
 ## Integration Tests

docs/contributors/code/testing-overview.md

@@ -497,7 +497,7 @@ Part of the unit-tests suite is a set of Jest tests run exercise native-mobile c
 To locally run the tests in debug mode, follow these steps:
 
 0. Make sure you have ran `npm ci` to install all the packages
-1. Run `npm run native test:debug` inside the Gutenberg root folder, on the CLI. Node is now waiting for the debugger to connect.
+1. Run `npm run test:native:debug` inside the Gutenberg root folder, on the CLI. Node is now waiting for the debugger to connect.
 2. Open `chrome://inspect` in Chrome
 3. Under the "Remote Target" section, look for a `../../node_modules/.bin/jest` target and click on the "inspect" link. That will open a new window with the Chrome DevTools debugger attached to the process and stopped at the beginning of the `jest.js` file. Alternatively, if the targets are not visible, click on the `Open dedicated DevTools for Node` link in the same page.
 4. You can place breakpoints or `debugger;` statements throughout the code, including the tests code, to stop and inspect

docs/explanations/architecture/styles.md

@@ -511,9 +511,7 @@ The global styles UI in the site editor has a screen for per-block styles. The l
 
 In addition to styles at the individual block level and in global styles, there is the concept of layout styles that are output for both blocks-based and classic themes.
 
-The layout block support is an experimental approach for outputting common layout styles that are shared between blocks that are used for creating layouts. Layout styles are useful for providing common styling for any block that is a container for other blocks. Examples of blocks that depend on these layout styles include Group, Row, Columns, Buttons, and Social Icons.
-
-While the feature is part of WordPress core, it is still flagged as experimental in the sense that the features and output are still undergoing active development. It is therefore not yet a stable feature from the perspective of 3rd party blocks, as the API is likely to change. The feature is enabled in core blocks via the `layout` setting under `supports` in a block's `block.json` file.
+The layout block support outputs common layout styles that are shared between blocks used for creating layouts. Layout styles are useful for providing common styling for any block that is a container for other blocks. Examples of blocks that depend on these layout styles include Group, Row, Columns, Buttons, and Social Icons. The feature is enabled in core blocks via the `layout` setting under `supports` in a block's `block.json` file.
 
 There are two primary places where Layout styles are output:
 
@@ -523,30 +521,31 @@ Base layout styles are those styles that are common to all blocks that opt in to
 
 Base layout styles are output from within [the main PHP class](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/class-wp-theme-json.php) that handles global styles, and form part of the global styles stylesheet. In order to provide support for core blocks in classic themes, these styles are always output, irrespective of whether the theme provides its own `theme.json` file.
 
-Common layout definitions are stored in [the core `theme.json` file](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/theme.json), but are not intended to be extended or overridden by themes.
+Common layout definitions are stored in [the core layout block support file](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php).
 
 #### Individual layout styles
 
-When a block that opts in to the experimental layout support is rendered, two things are processed and added to the output via [`layout.php`](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php):
+When a block that opts in to layout support is rendered, two things are processed and added to the output via [`layout.php`](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php):
 
 -   Semantic class names are added to the block markup to indicate which layout settings are in use. For example, `is-layout-flow` is for blocks (such as Group) that use the default/flow layout, and `is-content-justification-right` is added when a user sets a block to use right justification.
 -   Individual styles are generated for non-default layout values that are set on the individual block being rendered. These styles are attached to the block via a container class name using the form `wp-container-$id` where the `$id` is a [unique number](https://developer.wordpress.org/reference/functions/wp_unique_id/).
 
 #### Available layout types
 
-There are currently three layout types in use:
+There are currently four layout types in use:
 
 -   Default/Flow: Items are stacked vertically. The parent container block is set to `display: flow` and the spacing between children is handled via vertical margins.
 -   Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`.
 -   Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property.
+-   Grid: Items are displayed using a Grid layout. Defaults to an `auto-fill` approach to column generation but can also be set to a fixed number of columns. Spacing between children is handled via the `gap` CSS property.
 
 For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it).
 
 #### Targeting layout or container blocks from themes
 
 The layout block support is designed to enable control over layout features from within the block and site editors. Where possible, try to use the features of the blocks to determine particular layout requirements rather than relying upon additional stylesheets.
 
-For themes that wish to target container blocks in order to add or adjust particular styles, the block's class name is often the best class name to use. Class names such as `wp-block-group` or `wp-block-columns` are usually reliable class names for targeting a particular block.
+For themes that wish to target container blocks in order to add or adjust particular styles, the block's class name is often the best class name to use. Class names such as `wp-block-group` or `wp-block-columns` are usually reliable class names for targeting a particular block. In addition to block and layout classnames, there is also a classname composed of block and layout together: for example, for a Group block with a constrained layout it will be `wp-block-group-is-layout-constrained`.
 
 For targeting a block that uses a particular layout type, avoid targeting `wp-container-` as container classes may not always be present in the rendered markup.
 
@@ -559,6 +558,7 @@ The current semantic class names that can be output by the Layout block support
 -   `is-layout-flow`: Blocks that use the Default/Flow layout type.
 -   `is-layout-constrained`: Blocks that use the Constrained layout type.
 -   `is-layout-flex`: Blocks that use the Flex layout type.
+-   `is-layout-grid`: Blocks that used the Grid layout type.
 -   `wp-container-$id`: Where `$id` is a semi-random number. A container class that only exists when the block contains non-default Layout values. This class should not be used directly for any CSS targeting as it may or may not be present.
 -   `is-horizontal`: When a block explicitly sets `orientation` to `horizontal`.
 -   `is-vertical`: When a block explicitly sets `orientation` to `vertical`.

lib/compat/wordpress-6.3/class-gutenberg-navigation-fallback.php

@@ -23,9 +23,18 @@ class Gutenberg_Navigation_Fallback {
 	 */
 	public static function get_fallback() {
 
+		/**
+		 * Filters whether or not a fallback should be created.
+		 *
+		 * @since 6.3.0
+		 *
+		 * @param bool Whether or not to create a fallback.
+		 */
+		$should_create_fallback = apply_filters( 'gutenberg_navigation_should_create_fallback', true );
+
 		$fallback = static::get_most_recently_published_navigation();
 
-		if ( $fallback ) {
+		if ( $fallback || ! $should_create_fallback ) {
 			return $fallback;
 		}
 

lib/compat/wordpress-6.3/theme-previews.php

@@ -88,7 +88,7 @@ function addLivePreviewButton() {
 			livePreviewButton.setAttribute('class', 'button button-primary');
 			livePreviewButton.setAttribute(
 				'href',
-				`/wp-admin/site-editor.php?wp_theme_preview=${themePath}&return=themes.php`
+				`<?php echo esc_url( admin_url( '/site-editor.php' ) ); ?>?wp_theme_preview=${themePath}&return=themes.php`
 			);
 			livePreviewButton.innerHTML = '<?php echo esc_html_e( 'Live Preview' ); ?>';
 			themeInfo.querySelector('.theme-actions').appendChild(livePreviewButton);

package.json

@@ -311,6 +311,12 @@
 		"test:e2e:playwright": "playwright test --config test/e2e/playwright.config.ts",
 		"test:e2e:storybook": "playwright test --config test/storybook-playwright/playwright.config.ts",
 		"test:e2e:watch": "npm run test:e2e -- --watch",
+		"test:native": "cross-env NODE_ENV=test jest --verbose --config test/native/jest.config.js",
+		"test:native:clean": "jest --clearCache --config test/native/jest.config.js; rm -rf $TMPDIR/jest_*",
+		"test:native:debug": "cross-env NODE_ENV=test node --inspect-brk node_modules/.bin/jest --runInBand --verbose --config test/native/jest.config.js",
+		"test:native:perf": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\" --verbose' reassure",
+		"test:native:perf:baseline": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\" --verbose' reassure --baseline --testMatch \"**/performance/*.native.[jt]s?(x)\"",
+		"test:native:update": "npm run test:native -- --updateSnapshot",
 		"test:performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
 		"test:performance:debug": "wp-scripts --inspect-brk test-e2e --runInBand --no-cache --verbose --config packages/e2e-tests/jest.performance.config.js --puppeteer-devtools",
 		"test:performance:playwright": "playwright test --config test/performance/playwright.config.ts",

packages/block-editor/src/components/block-controls/README.md

@@ -0,0 +1,89 @@
+# BlockControls
+
+When the user selects a particular block, a toolbar positioned above the selected block displays a set of control buttons. Certain block-level controls are automatically included in the toolbar under specific circumstances. For example, there is a control for converting the block into a different type or when the focused element is a RichText component.
+
+With `BlockControls`, you can customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, the controls nested inside it will be shown in the selected block's toolbar.
+
+![Screenshot of the block controls of a Paragraph block inside the block editor](https://github.com/WordPress/gutenberg/HEAD/docs/assets/toolbar-text.png)
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function MyBlockEdit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps( {
+		className: 'my-block__custom-class',
+	} );
+	const { contentPosition } = attributes;
+
+	return (
+		<div { ...blockProps }>
+			{
+				<BlockControls>
+					<BlockAlignmentMatrixControl
+						label={ __( 'Change content position' ) }
+						value={ contentPosition }
+						onChange={ ( nextPosition ) =>
+							setAttributes( {
+								contentPosition: nextPosition,
+							} )
+						}
+					/>
+				</BlockControls>
+			}
+		</div>
+	);
+}
+
+/// ...
+
+<MyBlockEdit />;
+```
+
+See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more information and block controls examples.
+
+Furthermore, the READMEs of various components inside the block editor package and the components package include examples that also utilize `BlockControls` and can be a good reference.
+
+### Props
+
+The component accepts the following props:
+
+### `group`
+
+Group of the block controls. Allows you to create and render multiple groups of block controls.
+
+- Type: `string`
+- Default: `default`
+- Required: No
+
+### `controls`
+
+Allows overriding the default `controls` if the `default` group is used. 
+
+See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more details and examples with block controls.
+
+- Type: `array`
+
+### `children`
+
+Additional control components to be rendered.
+
+- Type: `Element`
+- Required: No.
+
+
+### `__experimentalShareWithChildBlocks`
+
+Whether the additional block controls should be added to the block toolbars of child blocks.
+
+- Type: `boolean`
+- Default: `false`

packages/block-editor/src/components/block-draggable/index.native.js

@@ -109,8 +109,12 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		draggingScrollHandler( event );
 	};
 
-	const { onBlockDragOver, onBlockDragEnd, onBlockDrop, targetBlockIndex } =
-		useBlockDropZone();
+	const {
+		onBlockDragOverWorklet,
+		onBlockDragEnd,
+		onBlockDrop,
+		targetBlockIndex,
+	} = useBlockDropZone();
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
@@ -184,7 +188,7 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		chip.y.value = dragPosition.y;
 		currentYPosition.value = dragPosition.y;
 
-		runOnJS( onBlockDragOver )( { x, y: y + scroll.offsetY.value } );
+		onBlockDragOverWorklet( { x, y: y + scroll.offsetY.value } );
 
 		// Update scrolling velocity
 		scrollOnDragOver( dragPosition.y );

packages/block-editor/src/components/block-draggable/test/index.native.js

@@ -133,16 +133,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'does not enable drag mode when selected and editing text', async () =>
@@ -243,16 +233,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						imageBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -301,16 +281,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						galleryBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'enables drag mode when nested block is selected', async () =>
@@ -336,20 +306,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// After dropping the block, the gallery item gets automatically selected.
-					// Hence, we have to select the gallery item again.
-					fireEvent.press( galleryItem );
-
-					// Start dragging from nested block's mobile toolbar
-					fireLongPress(
-						galleryItem,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -390,16 +346,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						spacerBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 	} );