Merge branch 'trunk' into interactivity

.github/workflows/end2end-test.yml

@@ -23,8 +23,8 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                part: [1, 2, 3, 4]
-                totalParts: [4]
+                part: [1, 2, 3]
+                totalParts: [3]
 
         steps:
             - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
@@ -67,8 +67,8 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                part: [1, 2]
-                totalParts: [2]
+                part: [1, 2, 3, 4]
+                totalParts: [4]
 
         steps:
             - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0

docs/contributors/code/react-native/integration-test-guide.md

@@ -121,42 +121,32 @@ const radiusSlider = getByTestId( 'Slider Border Radius' );
 
 Note that either a plain string or a regular expression can be passed into these queries. A regular expression is best for querying part of a string (e.g. any element whose accessibility label contains `Unsupported Block. Row 1`). Note that special characters such as `.` need to be escaped.
 
-### Use of `waitFor`
+### Use of `find` queries
 
-After rendering the components or firing an event, side effects might happen due to potential state updates so the element we’re looking for might not be yet rendered. In this case, we would need to wait for the element to be available and for this purpose, we can use the `waitFor` function, which periodically executes the provided callback to determine whether the element appeared or not.
+After rendering the components or firing an event, side effects might happen due to potential state updates so the element we’re looking for might not be yet rendered. In this case, we would need to wait for the element to be available and for this purpose, we can use the `find*` versions of query functions, which internally use `waitFor` and periodically check whether the element appeared or not.
 
 Here are some examples:
 
 ```js
-const mediaLibraryButton = await waitFor( () =>
-	getByText( 'WordPress Media Library' )
-);
+const mediaLibraryButton = await findByText( 'WordPress Media Library' );
 ```
 
 ```js
-const missingBlock = await waitFor( () =>
-	getByLabelText( /Unsupported Block\. Row 1/ )
-);
+const missingBlock = await findByLabelText( /Unsupported Block\. Row 1/ );
 ```
 
 ```js
-const radiusSlider = await waitFor( () =>
-	getByTestId( 'Slider Border Radius' )
-);
+const radiusSlider = await findByTestId( 'Slider Border Radius' );
 ```
 
-In most cases we’ll use the `waitFor` function, but it’s important to note that it should be restricted to those queries that actually require waiting for the element to be available.
-
-NOTE: The `react-native-testing-library` package provides the `query*` and `find*` functions for this purpose too, but we should avoid using them for now because there’s a [known issue](https://github.com/callstack/react-native-testing-library/issues/379) that would make the test fail.
+In most cases we’ll use the `find*` functions, but it’s important to note that it should be restricted to those queries that actually require waiting for the element to be available.
 
 ### `within` queries
 
 It’s also possible to query elements contained in other elements via the `within` function, here is an example:
 
 ```js
-const missingBlock = await waitFor( () =>
-	getByLabelText( /Unsupported Block\. Row 1/ )
-);
+const missingBlock = await findByLabelText( /Unsupported Block\. Row 1/ );
 const translatedTableTitle = within( missingBlock ).getByText( 'Tabla' );
 ```
 
@@ -236,7 +226,7 @@ Here is an example of how to insert a Paragraph block:
 
 ```js
 // Open the inserter menu
-fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
+fireEvent.press( await findByLabelText( 'Add block' ) );
 
 const blockList = getByTestId( 'InserterUI-Blocks' );
 // onScroll event used to force the FlatList to render all items
@@ -249,7 +239,7 @@ fireEvent.scroll( blockList, {
 } );
 
 // Insert a Paragraph block
-fireEvent.press( await waitFor( () => getByText( `Paragraph` ) ) );
+fireEvent.press( await findByText( `Paragraph` ) );
 ```
 
 ### Open block settings
@@ -259,7 +249,7 @@ The block settings can be accessed by tapping the "Open Settings" button after s
 ```js
 fireEvent.press( block );
 
-const settingsButton = await waitFor( () => getByLabelText( 'Open Settings' ) );
+const settingsButton = await findByLabelText( 'Open Settings' );
 fireEvent.press( settingsButton );
 ```
 
@@ -301,9 +291,7 @@ fireEvent.scroll( blockList, {
 Sliders found in bottom sheets should be queried using their `testID`:
 
 ```js
-const radiusSlider = await waitFor( () =>
-	getByTestId( 'Slider Border Radius' )
-);
+const radiusSlider = await findByTestId( 'Slider Border Radius' );
 fireEvent( radiusSlider, 'valueChange', '30' );
 ```
 
@@ -314,8 +302,8 @@ Note that a slider’s `testID` is "Slider " + label. So for a slider with a lab
 One caveat when adding blocks is that if they contain inner blocks, these inner blocks are not rendered. The following example shows how we can make a Buttons block render its inner Button blocks (assumes we’ve already obtained a reference to the Buttons block as `buttonsBlock`):
 
 ```js
-const innerBlockListWrapper = await waitFor( () =>
-	within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+const innerBlockListWrapper = await within( buttonsBlock ).findByTestId(
+	'block-list-wrapper'
 );
 fireEvent( innerBlockListWrapper, 'layout', {
 	nativeEvent: {
@@ -325,8 +313,8 @@ fireEvent( innerBlockListWrapper, 'layout', {
 	},
 } );
 
-const buttonInnerBlock = await waitFor( () =>
-	within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
+const buttonInnerBlock = await within( buttonsBlock ).findByLabelText(
+	/Button Block\. Row 1/
 );
 fireEvent.press( buttonInnerBlock );
 ```

docs/reference-guides/core-blocks.md

@@ -269,6 +269,15 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 -	**Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity
 -	**Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
 
+## Footnotes
+
+ ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/footnotes))
+
+-	**Name:** core/footnotes
+-	**Category:** text
+-	**Supports:** ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
+-	**Attributes:** 
+
 ## Classic
 
 Use the classic WordPress editor. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/freeform))

gutenberg.php

@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.1
  * Requires PHP: 5.6
- * Version: 16.0.0
+ * Version: 16.1.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *

lib/blocks.php

@@ -24,6 +24,7 @@ function gutenberg_reregister_core_block_types() {
 				'comments',
 				'details',
 				'group',
+				'footnotes',
 				'html',
 				'list',
 				'list-item',
@@ -65,6 +66,7 @@ function gutenberg_reregister_core_block_types() {
 				'comments-pagination-previous.php' => 'core/comments-pagination-previous',
 				'comments-title.php'               => 'core/comments-title',
 				'comments.php'                     => 'core/comments',
+				'footnotes.php'                    => 'core/footnotes',
 				'file.php'                         => 'core/file',
 				'home-link.php'                    => 'core/home-link',
 				'image.php'                        => 'core/image',

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

@@ -17,7 +17,7 @@ function gutenberg_get_theme_preview_path( $current_stylesheet = null ) {
 		return $current_stylesheet;
 	}
 
-	$preview_stylesheet = ! empty( $_GET['gutenberg_theme_preview'] ) ? $_GET['gutenberg_theme_preview'] : null;
+	$preview_stylesheet = ! empty( $_GET['wp_theme_preview'] ) ? $_GET['wp_theme_preview'] : null;
 	$wp_theme           = wp_get_theme( $preview_stylesheet );
 	if ( ! is_wp_error( $wp_theme->errors() ) ) {
 		if ( current_filter() === 'template' ) {
@@ -45,7 +45,7 @@ function gutenberg_attach_theme_preview_middleware() {
 		'wp-api-fetch',
 		sprintf(
 			'wp.apiFetch.use( wp.apiFetch.createThemePreviewMiddleware( %s ) );',
-			wp_json_encode( sanitize_text_field( $_GET['gutenberg_theme_preview'] ) )
+			wp_json_encode( sanitize_text_field( $_GET['wp_theme_preview'] ) )
 		),
 		'after'
 	);
@@ -88,7 +88,7 @@ function addLivePreviewButton() {
 			livePreviewButton.setAttribute('class', 'button button-primary');
 			livePreviewButton.setAttribute(
 				'href',
-				`/wp-admin/site-editor.php?gutenberg_theme_preview=${themePath}&return=themes.php`
+				`/wp-admin/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);
@@ -115,12 +115,13 @@ function block_theme_activate_nonce() {
 /**
  * Attaches filters to enable theme previews in the Site Editor.
  */
-if ( ! empty( $_GET['gutenberg_theme_preview'] ) ) {
+if ( ! empty( $_GET['wp_theme_preview'] ) && ! function_exists( 'wp_get_theme_preview_path' ) ) {
 	add_filter( 'stylesheet', 'gutenberg_get_theme_preview_path' );
 	add_filter( 'template', 'gutenberg_get_theme_preview_path' );
 	add_filter( 'init', 'gutenberg_attach_theme_preview_middleware' );
 }
 
-add_action( 'admin_head', 'block_theme_activate_nonce' );
-add_action( 'admin_print_footer_scripts', 'add_live_preview_button', 11 );
-
+if ( ! function_exists( 'wp_get_theme_preview_path' ) ) {
+	add_action( 'admin_head', 'block_theme_activate_nonce' );
+	add_action( 'admin_print_footer_scripts', 'add_live_preview_button', 11 );
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "16.0.0",
+	"version": "16.1.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -116,7 +116,7 @@
 		"@storybook/react": "6.5.7",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
-		"@testing-library/react-native": "11.3.0",
+		"@testing-library/react-native": "12.1.2",
 		"@testing-library/user-event": "14.4.3",
 		"@types/classnames": "2.3.1",
 		"@types/eslint": "7.28.0",

packages/api-fetch/src/middlewares/theme-preview.js

@@ -4,7 +4,7 @@
 import { addQueryArgs, hasQueryArg } from '@wordpress/url';
 
 /**
- * This appends a `gutenberg_theme_preview` parameter to the REST API request URL if
+ * This appends a `wp_theme_preview` parameter to the REST API request URL if
  * the admin URL contains a `theme` GET parameter.
  *
  * @param {Record<string, any>} themePath
@@ -13,19 +13,19 @@ import { addQueryArgs, hasQueryArg } from '@wordpress/url';
 const createThemePreviewMiddleware = ( themePath ) => ( options, next ) => {
 	if (
 		typeof options.url === 'string' &&
-		! hasQueryArg( options.url, 'gutenberg_theme_preview' )
+		! hasQueryArg( options.url, 'wp_theme_preview' )
 	) {
 		options.url = addQueryArgs( options.url, {
-			gutenberg_theme_preview: themePath,
+			wp_theme_preview: themePath,
 		} );
 	}
 
 	if (
 		typeof options.path === 'string' &&
-		! hasQueryArg( options.path, 'gutenberg_theme_preview' )
+		! hasQueryArg( options.path, 'wp_theme_preview' )
 	) {
 		options.path = addQueryArgs( options.path, {
-			gutenberg_theme_preview: themePath,
+			wp_theme_preview: themePath,
 		} );
 	}
 

packages/base-styles/_variables.scss

@@ -57,7 +57,7 @@ $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
-$modal-min-width: 360px;
+$modal-min-width: 350px;
 $spinner-size: 16px;
 $canvas-padding: $grid-unit-30;
 

packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -42,7 +42,7 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
 <!-- /wp:spacer -->"
 `;
 
-exports[`Block Mover Picker should match snapshot 1`] = `
+exports[`Block Mover Picker should render without crashing and match snapshot 1`] = `
 [
   <View>
     <View
@@ -76,7 +76,7 @@ exports[`Block Mover Picker should match snapshot 1`] = `
     >
       <View
         collapsable={false}
-        handlerTag={3}
+        handlerTag={1}
         handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
@@ -144,7 +144,7 @@ exports[`Block Mover Picker should match snapshot 1`] = `
     >
       <View
         collapsable={false}
-        handlerTag={4}
+        handlerTag={2}
         handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}

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

@@ -24,26 +24,7 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 import { BlockMover } from '../index';
 
 describe( 'Block Mover Picker', () => {
-	it( 'renders without crashing', () => {
-		const props = {
-			isFirst: false,
-			isLast: true,
-			canMove: true,
-			numberOfBlocks: 2,
-			firstIndex: 1,
-
-			onMoveDown: jest.fn(),
-			onMoveUp: jest.fn(),
-			onLongPress: jest.fn(),
-
-			rootClientId: '',
-			isStackedHorizontally: true,
-		};
-		const screen = render( <BlockMover { ...props } /> );
-		expect( screen.container ).toBeTruthy();
-	} );
-
-	it( 'should match snapshot', () => {
+	it( 'should render without crashing and match snapshot', () => {
 		const props = {
 			isFirst: false,
 			isLast: true,