prep build 10/01

docs/contributors/versions-in-wordpress.md

@@ -6,6 +6,7 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 
 | Gutenberg Versions | WordPress Version |
 | ------------------ | ----------------- |
+| 16.2-16.7          | 6.4               |
 | 15.2-16.1          | 6.3.1             |
 | 15.2-16.1          | 6.3               |
 | 14.2-15.1          | 6.2               |

packages/block-library/src/image/image.js

@@ -375,7 +375,7 @@ export default function Image( {
 		!! lightbox || lightboxSetting?.allowEditing === true;
 
 	const lightboxChecked =
-		lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );
+		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
 	const dimensionsControl = (
 		<DimensionsTool

packages/block-library/src/post-title/index.php

@@ -38,7 +38,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $block->context['postId'] ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', esc_url( get_the_permalink( $block->context['postId'] ) ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
 
 	$classes = array();

packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts

@@ -13,7 +13,7 @@ export interface SiteEditorQueryParams {
 	postType: string;
 }
 
-const CANVAS_SELECTOR = 'iframe[title="Editor canvas"i]';
+const CANVAS_SELECTOR = 'iframe[title="Editor canvas"i] >> visible=true';
 
 /**
  * Visits the Site Editor main page
@@ -55,13 +55,16 @@ export async function visitSiteEditor(
 		} );
 	}
 
-	// The site editor initially loads with an empty body,
-	// we need to wait for the editor canvas to be rendered.
-	await this.page
-		.frameLocator( CANVAS_SELECTOR )
-		.locator( 'body > *' )
-		.first()
-		.waitFor();
+	// Check if the current page has an editor canvas first.
+	if ( ( await this.page.locator( CANVAS_SELECTOR ).count() ) > 0 ) {
+		// The site editor initially loads with an empty body,
+		// we need to wait for the editor canvas to be rendered.
+		await this.page
+			.frameLocator( CANVAS_SELECTOR )
+			.locator( 'body > *' )
+			.first()
+			.waitFor();
+	}
 
 	// TODO: Ideally the content underneath the canvas loader should be marked inert until it's ready.
 	await this.page

packages/e2e-test-utils-playwright/src/request-utils/blocks.ts

@@ -0,0 +1,64 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+type CreateBlockPayload = {
+	date?: string;
+	date_gmt?: string;
+	slug?: string;
+	title: string;
+	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
+	content?: string;
+	meta?: unknown;
+	wp_pattern_category?: number[];
+};
+
+/**
+ * Delete all blocks using REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
+ * @param this
+ */
+export async function deleteAllBlocks( this: RequestUtils ) {
+	// List all blocks.
+	// https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
+	const blocks = await this.rest( {
+		path: '/wp/v2/blocks',
+		params: {
+			per_page: 100,
+			// All possible statuses.
+			status: 'publish,future,draft,pending,private,trash',
+		},
+	} );
+
+	// Delete blocks.
+	// https://developer.wordpress.org/rest-api/reference/blocks/#delete-a-editor-block
+	// "/wp/v2/posts" not yet supports batch requests.
+	await this.batchRest(
+		blocks.map( ( block: { id: number } ) => ( {
+			method: 'DELETE',
+			path: `/wp/v2/blocks/${ block.id }?force=true`,
+		} ) )
+	);
+}
+
+/**
+ * Creates a new block using the REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/blocks/#create-a-editor-block.
+ * @param this
+ * @param payload Block payload.
+ */
+export async function createBlock(
+	this: RequestUtils,
+	payload: CreateBlockPayload
+) {
+	const block = await this.rest( {
+		path: '/wp/v2/blocks',
+		method: 'POST',
+		data: { ...payload },
+	} );
+
+	return block;
+}

packages/e2e-test-utils-playwright/src/request-utils/index.ts

@@ -22,7 +22,7 @@ import {
 	getCurrentThemeGlobalStylesPostId,
 	getThemeGlobalStylesRevisions,
 } from './themes';
-import { deleteAllBlocks } from './blocks';
+import { createBlock, deleteAllBlocks } from './blocks';
 import { createComment, deleteAllComments } from './comments';
 import { createPost, deleteAllPosts } from './posts';
 import {
@@ -35,6 +35,7 @@ import { deleteAllPages, createPage } from './pages';
 import { resetPreferences } from './preferences';
 import { getSiteSettings, updateSiteSettings } from './site-settings';
 import { deleteAllWidgets, addWidgetBlock } from './widgets';
+import { deleteAllPatternCategories } from './patterns';
 
 interface StorageState {
 	cookies: Cookie[];
@@ -140,6 +141,8 @@ class RequestUtils {
 	deactivatePlugin: typeof deactivatePlugin = deactivatePlugin.bind( this );
 	/** @borrows activateTheme as this.activateTheme */
 	activateTheme: typeof activateTheme = activateTheme.bind( this );
+	/** @borrows createBlock as this.createBlock */
+	createBlock: typeof createBlock = createBlock.bind( this );
 	/** @borrows deleteAllBlocks as this.deleteAllBlocks */
 	deleteAllBlocks = deleteAllBlocks.bind( this );
 	/** @borrows createPost as this.createPost */
@@ -198,6 +201,8 @@ class RequestUtils {
 	/** @borrows getThemeGlobalStylesRevisions as this.getThemeGlobalStylesRevisions */
 	getThemeGlobalStylesRevisions: typeof getThemeGlobalStylesRevisions =
 		getThemeGlobalStylesRevisions.bind( this );
+	/** @borrows deleteAllPatternCategories as this.deleteAllPatternCategories */
+	deleteAllPatternCategories = deleteAllPatternCategories.bind( this );
 }
 
 export type { StorageState };

packages/e2e-test-utils-playwright/src/request-utils/patterns.ts

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+/**
+ * Delete all pattern categories using REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+ * @param this
+ */
+export async function deleteAllPatternCategories( this: RequestUtils ) {
+	// List all pattern categories.
+	// https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+	const categories = await this.rest( {
+		path: '/wp/v2/wp_pattern_category',
+		params: {
+			per_page: 100,
+		},
+	} );
+
+	// Delete pattern categories.
+	// https://developer.wordpress.org/rest-api/reference/categories/#delete-a-category
+	// "/wp/v2/category" does not yet supports batch requests.
+	await this.batchRest(
+		categories.map( ( category: { id: number } ) => ( {
+			method: 'DELETE',
+			path: `/wp/v2/wp_pattern_category/${ category.id }?force=true`,
+		} ) )
+	);
+}

packages/editor/src/components/post-sticky/check.js

@@ -1,28 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostStickyCheck( { hasStickyAction, postType, children } ) {
+export default function PostStickyCheck( { children } ) {
+	const { hasStickyAction, postType } = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		return {
+			hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
+			postType: select( editorStore ).getCurrentPostType(),
+		};
+	}, [] );
+
 	if ( postType !== 'post' || ! hasStickyAction ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const post = select( editorStore ).getCurrentPost();
-		return {
-			hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
-			postType: select( editorStore ).getCurrentPostType(),
-		};
-	} ),
-] )( PostStickyCheck );

packages/editor/src/components/post-sticky/index.js

@@ -3,40 +3,30 @@
  */
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
 
-export function PostSticky( { onUpdateSticky, postSticky = false } ) {
+export default function PostSticky() {
+	const postSticky = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getEditedPostAttribute( 'sticky' ) ?? false
+		);
+	}, [] );
+	const { editPost } = useDispatch( editorStore );
+
 	return (
 		<PostStickyCheck>
 			<CheckboxControl
 				__nextHasNoMarginBottom
 				label={ __( 'Stick to the top of the blog' ) }
 				checked={ postSticky }
-				onChange={ () => onUpdateSticky( ! postSticky ) }
+				onChange={ () => editPost( { sticky: ! postSticky } ) }
 			/>
 		</PostStickyCheck>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postSticky:
-				select( editorStore ).getEditedPostAttribute( 'sticky' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		return {
-			onUpdateSticky( postSticky ) {
-				dispatch( editorStore ).editPost( { sticky: postSticky } );
-			},
-		};
-	} ),
-] )( PostSticky );

packages/editor/src/components/post-sticky/test/index.js

@@ -3,40 +3,55 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostStickyCheck } from '../check';
+import PostStickyCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+function setupUseSelectMock( { hasStickyAction, postType } ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getCurrentPostType: () => postType,
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-sticky': hasStickyAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
-		render(
-			<PostStickyCheck postType="page" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect(
 			screen.queryByText( 'Can Toggle Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ false }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect(
 			screen.queryByText( 'Can Toggle Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
 	} );
 } );