prep build 07/22

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

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
-	__experimentalGetElementClassName as getBorderClassesAndStyles,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 } from '@wordpress/block-editor';
 
 /**
@@ -545,11 +545,114 @@ const v5 = {
 
 /**
  * Deprecation for adding width and height as style rules on the inner img.
- * It also updates the widht and height attributes to be strings instead of numbers.
  *
  * @see https://github.com/WordPress/gutenberg/pull/31366
  */
 const v6 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			__experimentalRole: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			__experimentalRole: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			__experimentalRole: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			__experimentalRole: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			__experimentalRole: 'content',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
+	},
+	supports: {
+		anchor: true,
+		behaviors: {
+			lightbox: true,
+		},
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
+		},
+	},
 	save( { attributes } ) {
 		const {
 			url,

packages/create-block/CHANGELOG.md

@@ -2,8 +2,16 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Add support for the `example` property and add it to the default template ([#52803](https://github.com/WordPress/gutenberg/pull/52803)).
+
 ## 4.22.0 (2023-07-20)
 
+### Enhancement
+
+-   Add support for the `viewScript` property ([#52612](https://github.com/WordPress/gutenberg/pull/52612)).
+
 ## 4.21.0 (2023-07-05)
 
 ## 4.20.0 (2023-06-23)

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

@@ -32,6 +32,7 @@ async function initBlockJSON( {
 	render,
 	viewScript,
 	customBlockJSON,
+	example,
 } ) {
 	info( '' );
 	info( 'Creating a "block.json" file.' );
@@ -53,6 +54,7 @@ async function initBlockJSON( {
 					category,
 					icon: dashicon,
 					description,
+					example,
 					attributes,
 					supports,
 					textdomain,

packages/create-block/lib/scaffold.js

@@ -48,6 +48,7 @@ module.exports = async (
 		variantVars,
 		customPackageJSON,
 		customBlockJSON,
+		example,
 	}
 ) => {
 	slug = slug.toLowerCase();
@@ -107,6 +108,7 @@ module.exports = async (
 		viewScript,
 		customPackageJSON,
 		customBlockJSON,
+		example,
 		...variantVars,
 	};
 

packages/create-block/lib/templates.js

@@ -34,6 +34,7 @@ const predefinedPluginTemplates = {
 			editorStyle: null,
 			style: null,
 			viewScript: 'file:./view.js',
+			example: {},
 		},
 		templatesPath: join( __dirname, 'templates', 'es5' ),
 		variants: {
@@ -55,6 +56,7 @@ const predefinedPluginTemplates = {
 				html: false,
 			},
 			viewScript: 'file:./view.js',
+			example: {},
 		},
 		variants: {
 			static: {},

test/e2e/specs/editor/blocks/navigation.spec.js

@@ -4,25 +4,19 @@
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe( 'Navigation block', () => {
-	test.beforeAll( async ( { requestUtils } ) => {
-		//TT3 is preferable to emptytheme because it already has the navigation block on its templates.
-		await requestUtils.activateTheme( 'twentytwentythree' );
-	} );
-
 	test.beforeEach( async ( { requestUtils } ) => {
-		await Promise.all( [ requestUtils.deleteAllMenus() ] );
+		await requestUtils.deleteAllMenus();
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
-		await Promise.all( [
-			requestUtils.deleteAllMenus(),
-			requestUtils.activateTheme( 'twentytwentyone' ),
-		] );
+		await requestUtils.deleteAllMenus();
 	} );
 
 	test.afterEach( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllPosts();
-		await requestUtils.deleteAllMenus();
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllMenus(),
+		] );
 	} );
 
 	test.describe( 'As a user I want the navigation block to fallback to the best possible default', () => {
@@ -74,8 +68,9 @@ test.describe( 'Navigation block', () => {
 				)
 			).toBeVisible();
 
+			const postId = await editor.publishPost();
+
 			// Check the markup of the block is correct.
-			await editor.publishPost();
 			await expect.poll( editor.getBlocks ).toMatchObject( [
 				{
 					name: 'core/navigation',
@@ -84,7 +79,7 @@ test.describe( 'Navigation block', () => {
 			] );
 
 			// Check the block in the frontend.
-			await page.goto( `/` );
+			await page.goto( `/?p=${ postId }` );
 
 			await expect(
 				page.locator(
@@ -118,8 +113,9 @@ test.describe( 'Navigation block', () => {
 				)
 			).toBeVisible( { timeout: 10000 } ); // allow time for network request.
 
+			const postId = await editor.publishPost();
 			// Check the block in the frontend.
-			await page.goto( `/` );
+			await page.goto( `/?p=${ postId }` );
 
 			await expect(
 				page.locator(
@@ -154,7 +150,7 @@ test.describe( 'Navigation block', () => {
 			await editor.insertBlock( { name: 'core/navigation' } );
 
 			// Check the markup of the block is correct.
-			await editor.publishPost();
+			const postId = await editor.publishPost();
 			await expect.poll( editor.getBlocks ).toMatchObject( [
 				{
 					name: 'core/navigation',
@@ -170,7 +166,7 @@ test.describe( 'Navigation block', () => {
 			).toBeVisible();
 
 			// Check the block in the frontend.
-			await page.goto( `/` );
+			await page.goto( `/?p=${ postId }` );
 
 			await expect(
 				page.locator(
@@ -208,8 +204,8 @@ test.describe( 'Navigation block', () => {
 			} );
 			await addSubmenuButton.click();
 
-			await editor.publishPost();
-			await page.goto( `/` );
+			const postId = await editor.publishPost();
+			await page.goto( `/?p=${ postId }` );
 
 			await expect(
 				page.locator(

test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html

@@ -0,0 +1,3 @@
+<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","style":{"border":{"radius":"100%"}},"className":"is-style-rounded"} -->
+<figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="border-radius:100%" width="164" height="164"/></figure>
+<!-- /wp:image -->

test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json

@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"align": "left",
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"width": 164,
+			"height": 164,
+			"sizeSlug": "large",
+			"className": "is-style-rounded",
+			"style": {
+				"border": {
+					"radius": "100%"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json

@@ -0,0 +1,22 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"align": "left",
+			"width": 164,
+			"height": 164,
+			"sizeSlug": "large",
+			"style": {
+				"border": {
+					"radius": "100%"
+				}
+			},
+			"className": "is-style-rounded"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"border-radius:100%\" width=\"164\" height=\"164\"/></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"border-radius:100%\" width=\"164\" height=\"164\"/></figure>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
+<figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="border-radius:100%;width:164px;height:164px" width="164" height="164"/></figure>
+<!-- /wp:image -->