prep build 11/06

.github/ISSUE_TEMPLATE/Bug_report.yml

@@ -1,5 +1,6 @@
 name: Bug report
 description: Report a bug with the WordPress block editor or Gutenberg plugin
+labels: ['[Type] Bug']
 body:
     - type: markdown
       attributes:

.github/ISSUE_TEMPLATE/Feature_request.md

@@ -1,6 +1,7 @@
 ---
 name: Feature request
 about: Propose an idea for a feature or an enhancement
+labels: "[Type] Enhancement"
 
 ---
 

.github/ISSUE_TEMPLATE/New_release.md

@@ -1,6 +1,7 @@
 ---
 name: Gutenberg Release
 about: A checklist for the Gutenberg plugin release process
+labels: Gutenberg Plugin, [Type] Project Management
 ---
 
 This issue is to provide visibility on the progress of the release process of Gutenberg VERSION_NUMBER and to centralize any conversations about it. The ultimate goal of this issue is to keep the reference of the steps, resources, work, and conversations about this release so it can be helpful for the next contributors releasing a new Gutenberg version.

docs/getting-started/devenv/get-started-with-create-block.md

@@ -57,7 +57,7 @@ See the `wp-scripts` [package documentation](https://developer.wordpress.org/blo
 
 ### Interactive mode
 
-For developers who prefer a more guided experience, the `create-block package` provides an interactive mode. Instead of manually specifying all options upfront, like the `slug` in the above example, this mode will prompt you for inputs step-by-step.
+For developers who prefer a more guided experience, the `create-block` package provides an interactive mode. Instead of manually specifying all options upfront, like the `slug` in the above example, this mode will prompt you for inputs step-by-step.
 
 To use this mode, run the command:
 

packages/block-editor/src/components/list-view/block.js

@@ -69,17 +69,17 @@ function ListViewBlock( {
 	const blockTitle =
 		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
 
-	const block = useSelect(
-		( select ) => select( blockEditorStore ).getBlock( clientId ),
-		[ clientId ]
-	);
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
-		[ clientId ]
-	);
-	const blockEditingMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockEditingMode( clientId ),
+	const { block, blockName, blockEditingMode } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockName, getBlockEditingMode } =
+				select( blockEditorStore );
+
+			return {
+				block: getBlock( clientId ),
+				blockName: getBlockName( clientId ),
+				blockEditingMode: getBlockEditingMode( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 

packages/block-library/src/form/index.js

@@ -27,7 +27,7 @@ export const init = () => {
 	const DISALLOWED_PARENTS = [ 'core/form' ];
 	addFilter(
 		'blockEditor.__unstableCanInsertBlockType',
-		'removeTemplatePartsFromPostTemplates',
+		'core/block-library/preventInsertingFormIntoAnotherForm',
 		(
 			canInsert,
 			blockType,

packages/block-library/src/image/editor.scss

@@ -62,6 +62,13 @@ figure.wp-block-image:not(.wp-block) {
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
+
+	// When the Image block is linked,
+	// it's wrapped with a disabled <a /> tag.
+	// Restore cursor style so it doesn't appear 'clickable'.
+	> a {
+		cursor: default;
+	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.

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

@@ -242,10 +242,9 @@ class="lightbox-trigger"
 			data-wp-on--click="actions.core.image.showLightbox"
 			data-wp-style--right="context.core.image.imageButtonRight"
 			data-wp-style--top="context.core.image.imageButtonTop"
-			style="background: #000"
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
-				<Path stroke="#FFFFFF" d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
+			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
 			</svg>
 		</button>';
 
@@ -303,7 +302,7 @@ class="lightbox-trigger"
 		}
 	}
 
-	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
 	$close_button_label = esc_attr__( 'Close' );
 
 	$lightbox_html = <<<HTML

packages/block-library/src/image/style.scss

@@ -168,22 +168,27 @@
 	button {
 		opacity: 0;
 		border: none;
-		background: #000;
+		background-color: rgb(90 90 90 / 25%);
+		backdrop-filter: blur($grid-unit-20) saturate(180%);
 		cursor: zoom-in;
-		width: 24px;
-		height: 24px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 20px;
+		height: 20px;
 		position: absolute;
 		z-index: 100;
-		top: 10px;
-		right: 10px;
+		top: 16px;
+		right: 16px;
 		text-align: center;
 		padding: 0;
-		border-radius: 10%;
+		border-radius: 4px;
+		transition: opacity 0.2s ease;
 
 		&:focus-visible {
-			outline: 5px auto #212121;
-			outline: 5px auto -webkit-focus-ring-color;
-			outline-offset: 5px;
+			outline: 3px auto rgb(90 90 90 / 25%);
+			outline: 3px auto -webkit-focus-ring-color;
+			outline-offset: 3px;
 		}
 
 		&:hover {
@@ -198,7 +203,7 @@
 		&:hover,
 		&:focus,
 		&:not(:hover):not(:active):not(.has-background) {
-			background: #000;
+			background-color: rgb(90 90 90 / 25%);
 			border: none;
 		}
 	}

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

@@ -340,26 +340,26 @@ store(
 								context.core.image.imageButtonTop =
 									( offsetHeight - referenceHeight ) / 2 +
 									buttonOffsetTop +
-									10;
+									16;
 								context.core.image.imageButtonRight =
-									buttonOffsetRight + 10;
+									buttonOffsetRight + 16;
 							} else {
 								// If it reaches the height first, keep
 								// the height and compute the width.
 								const referenceWidth =
 									offsetHeight * naturalRatio;
 								context.core.image.imageButtonTop =
-									buttonOffsetTop + 10;
+									buttonOffsetTop + 16;
 								context.core.image.imageButtonRight =
 									( offsetWidth - referenceWidth ) / 2 +
 									buttonOffsetRight +
-									10;
+									16;
 							}
 						} else {
 							context.core.image.imageButtonTop =
-								buttonOffsetTop + 10;
+								buttonOffsetTop + 16;
 							context.core.image.imageButtonRight =
-								buttonOffsetRight + 10;
+								buttonOffsetRight + 16;
 						}
 					},
 					setStylesOnResize: ( { state, context, ref } ) => {

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

@@ -20,7 +20,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	);
 
 	const currentThemeStylesheet = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme().stylesheet
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet
 	);
 
 	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =

packages/block-library/src/template-part/index.js

@@ -60,7 +60,7 @@ export const init = () => {
 	const DISALLOWED_PARENTS = [ 'core/post-template', 'core/post-content' ];
 	addFilter(
 		'blockEditor.__unstableCanInsertBlockType',
-		'removeTemplatePartsFromPostTemplates',
+		'core/block-library/removeTemplatePartsFromPostTemplates',
 		(
 			canInsert,
 			blockType,

packages/components/src/gradient-picker/index.tsx

@@ -257,7 +257,7 @@ export function GradientPicker( {
 						onChange={ onChange }
 					/>
 				) }
-				{ ( gradients.length || clearable ) && (
+				{ ( gradients.length > 0 || clearable ) && (
 					<Component
 						{ ...additionalProps }
 						className={ className }

packages/e2e-test-utils-playwright/src/admin/create-new-post.ts

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import type { Admin } from './';
+
+interface NewPostOptions {
+	postType?: string;
+	title?: string;
+	content?: string;
+	excerpt?: string;
+	showWelcomeGuide?: boolean;
+}
+
+/**
+ * Creates new post.
+ *
+ * @param this
+ * @param options Options to create new post.
+ */
+export async function createNewPost(
+	this: Admin,
+	options: NewPostOptions = {}
+) {
+	const query = new URLSearchParams();
+	const { postType, title, content, excerpt } = options;
+
+	if ( postType ) query.set( 'post_type', postType );
+	if ( title ) query.set( 'post_title', title );
+	if ( content ) query.set( 'content', content );
+	if ( excerpt ) query.set( 'excerpt', excerpt );
+
+	await this.visitAdminPage( 'post-new.php', query.toString() );
+
+	await this.editor.setPreferences( 'core/edit-post', {
+		welcomeGuide: options.showWelcomeGuide ?? false,
+		fullscreenMode: false,
+	} );
+}

packages/e2e-test-utils-playwright/src/admin/edit-post.ts

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import type { Admin } from '.';
+
+/**
+ * Open the post with given ID in the editor.
+ *
+ * @param this
+ * @param postId Post ID to visit.
+ */
+export async function editPost( this: Admin, postId: string | number ) {
+	const query = new URLSearchParams();
+
+	query.set( 'post', String( postId ) );
+	query.set( 'action', 'edit' );
+
+	await this.visitAdminPage( 'post.php', query.toString() );
+
+	await this.editor.setPreferences( 'core/edit-post', {
+		welcomeGuide: false,
+		fullscreenMode: false,
+	} );
+}

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

@@ -9,29 +9,36 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
 import { createNewPost } from './create-new-post';
 import { getPageError } from './get-page-error';
 import { visitAdminPage } from './visit-admin-page';
+import { editPost } from './edit-post';
 import { visitSiteEditor } from './visit-site-editor';
 import type { PageUtils } from '../page-utils';
+import type { Editor } from '../editor';
 
 type AdminConstructorProps = {
 	page: Page;
 	pageUtils: PageUtils;
+	editor: Editor;
 };
 
 export class Admin {
-	browser: Browser;
 	page: Page;
-	pageUtils: PageUtils;
 	context: BrowserContext;
+	browser: Browser;
+	pageUtils: PageUtils;
+	editor: Editor;
 
-	constructor( { page, pageUtils }: AdminConstructorProps ) {
+	constructor( { page, pageUtils, editor }: AdminConstructorProps ) {
 		this.page = page;
 		this.context = page.context();
 		this.browser = this.context.browser()!;
 		this.pageUtils = pageUtils;
+		this.editor = editor;
 	}
 
 	/** @borrows createNewPost as this.createNewPost */
 	createNewPost: typeof createNewPost = createNewPost.bind( this );
+	/** @borrows editPost as this.editPost */
+	editPost: typeof editPost = editPost.bind( this );
 	/** @borrows getPageError as this.getPageError */
 	getPageError: typeof getPageError = getPageError.bind( this );
 	/** @borrows visitAdminPage as this.visitAdminPage */