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 @@ + +
+