diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index bdfdca6ee3c4d..3b17208a803a2 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/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,
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index b03a8aca72b50..05313fc10ec30 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/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)
diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js
index d26ef4a909ab7..9c0bda20a4009 100644
--- a/packages/create-block/lib/init-block.js
+++ b/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,
diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
index a8d9c3859e20d..568ec2f007457 100644
--- a/packages/create-block/lib/scaffold.js
+++ b/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,
};
diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js
index 4ce898617adde..29f713499e3f2 100644
--- a/packages/create-block/lib/templates.js
+++ b/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: {},
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
index 4403cce4ca0fb..4757ccbb4a00f 100644
--- a/test/e2e/specs/editor/blocks/navigation.spec.js
+++ b/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(
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html
new file mode 100644
index 0000000000000..6c113ee0f09ee
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json
new file mode 100644
index 0000000000000..7f83baa81fc63
--- /dev/null
+++ b/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": []
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json
new file mode 100644
index 0000000000000..e9c061bb19125
--- /dev/null
+++ b/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\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ }
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
new file mode 100644
index 0000000000000..ad70fe65f3582
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
@@ -0,0 +1,3 @@
+
+
+