From 528a08d13fa2bf1c9ef02e7bd9c75c1a23aa14f1 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 25 Feb 2023 12:18:23 +0900 Subject: [PATCH 1/8] Fix: duplicate markup on anchor attribute --- lib/block-supports/anchor.php | 25 +-------- packages/block-editor/src/hooks/anchor.js | 37 ++++++++++++-- packages/block-editor/src/hooks/test/utils.js | 51 +++++++++++++++---- .../src/server-side-render.js | 12 +++-- 4 files changed, 83 insertions(+), 42 deletions(-) diff --git a/lib/block-supports/anchor.php b/lib/block-supports/anchor.php index 8f704a5019b365..eb664687cd1e72 100644 --- a/lib/block-supports/anchor.php +++ b/lib/block-supports/anchor.php @@ -5,28 +5,6 @@ * @package gutenberg */ -/** - * Registers the anchor block attribute for block types that support it. - * - * @param WP_Block_Type $block_type Block Type. - */ -function gutenberg_register_anchor_support( $block_type ) { - $has_anchor_support = _wp_array_get( $block_type->supports, array( 'anchor' ), true ); - if ( ! $has_anchor_support ) { - return; - } - - if ( ! $block_type->attributes ) { - $block_type->attributes = array(); - } - - if ( ! array_key_exists( 'anchor', $block_type->attributes ) ) { - $block_type->attributes['anchor'] = array( - 'type' => 'string', - ); - } -} - /** * Add the anchor to the output. * @@ -61,7 +39,6 @@ function gutenberg_apply_anchor_support( $block_type, $block_attributes ) { WP_Block_Supports::get_instance()->register( 'anchor', array( - 'register_attribute' => 'gutenberg_register_anchor_support', - 'apply' => 'gutenberg_apply_anchor_support', + 'apply' => 'gutenberg_apply_anchor_support', ) ); diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 65e227ab107ebf..0618dac9efc170 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -40,12 +40,39 @@ export function addAttribute( settings ) { if ( 'type' in ( settings.attributes?.anchor ?? {} ) ) { return settings; } + + // Gracefully handle if settings.attributes is undefined. if ( hasBlockSupport( settings, 'anchor' ) ) { - // Gracefully handle if settings.attributes is undefined. - settings.attributes = { - ...settings.attributes, - anchor: ANCHOR_SCHEMA, - }; + let saveElement; + try { + saveElement = + typeof settings.save === 'function' + ? settings.save() + : settings.save; + if ( saveElement === null || saveElement === undefined ) { + // If the save function returns null or undefined, save the anchor + // attribute as a block's comment delimiter without specifying + // the source. + settings.attributes = { + ...settings.attributes, + anchor: { + type: ANCHOR_SCHEMA.type, + }, + }; + } else { + settings.attributes = { + ...settings.attributes, + anchor: ANCHOR_SCHEMA, + }; + } + } catch ( error ) { + // If the save function returns an error, the anchor will be saved + // in the markup as an id attribute. + settings.attributes = { + ...settings.attributes, + anchor: ANCHOR_SCHEMA, + }; + } } return settings; diff --git a/packages/block-editor/src/hooks/test/utils.js b/packages/block-editor/src/hooks/test/utils.js index bfbced3195b7fb..9c685f42fd9521 100644 --- a/packages/block-editor/src/hooks/test/utils.js +++ b/packages/block-editor/src/hooks/test/utils.js @@ -9,8 +9,6 @@ import { applyFilters } from '@wordpress/hooks'; import '../anchor'; import { immutableSet } from '../utils'; -const noop = () => {}; - describe( 'immutableSet', () => { describe( 'handling falsy values properly', () => { it( 'should create a new object if `undefined` is passed', () => { @@ -116,7 +114,6 @@ describe( 'immutableSet', () => { describe( 'anchor', () => { const blockSettings = { - save: noop, category: 'text', title: 'block title', }; @@ -133,15 +130,49 @@ describe( 'anchor', () => { expect( settings.attributes ).toBe( undefined ); } ); - it( 'should assign a new anchor attribute', () => { - const settings = registerBlockType( { - ...blockSettings, - supports: { - anchor: true, + it( 'should assign a new anchor attribute depending on the value of the save property', () => { + const saveDefinitions = [ + // The anchor attribute should be stored as a comment delimiter. + { + value: null, + schema: { + type: 'string', + }, }, - } ); + { + value: () => null, + schema: { + type: 'string', + }, + }, + { + value: undefined, + schema: { + type: 'string', + }, + }, + // The anchor attributes should be saved as part of the markup. + { + value: () =>
, + schema: { + attribute: 'id', + selector: '*', + source: 'attribute', + type: 'string', + }, + }, + ]; - expect( settings.attributes ).toHaveProperty( 'anchor' ); + saveDefinitions.forEach( ( { value, schema } ) => { + const settings = registerBlockType( { + ...blockSettings, + save: value, + supports: { + anchor: true, + }, + } ); + expect( settings.attributes.anchor ).toEqual( schema ); + } ); } ); it( 'should not override attributes defined in settings', () => { diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js index 69a2183036dd14..aee2921ecfa89b 100644 --- a/packages/server-side-render/src/server-side-render.js +++ b/packages/server-side-render/src/server-side-render.js @@ -112,9 +112,15 @@ export default function ServerSideRender( props ) { setIsLoading( true ); - let sanitizedAttributes = - attributes && - __experimentalSanitizeBlockAttributes( block, attributes ); + let sanitizedAttributes; + if ( attributes ) { + // Anchor attribute isn't supported on the server side and + // should be excluded from the parameters. + const { anchor, ...restAttributes } = attributes; + sanitizedAttributes = + restAttributes && + __experimentalSanitizeBlockAttributes( block, restAttributes ); + } if ( skipBlockSupportAttributes ) { sanitizedAttributes = From 86491af2d3509231e78c7b7f6f38cd369debc38c Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 28 Mar 2023 12:26:59 +0900 Subject: [PATCH 2/8] Update block.json schema and documentation --- docs/reference-guides/block-api/block-supports.md | 9 +++++++++ schemas/json/block.json | 14 +++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 2e5f509f6dc48e..0b971f79d63700 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -57,6 +57,15 @@ supports: { } ``` +If this property is set to `true` or `html`, the id attribute of the root element of the saved markup are referenced. If this property is set to `delimiter`, the attribute is saved as a comment delimiter. This value should be used for dynamic blocks that don't save markup. + +```js +// Declare support for anchor links. +supports: { + anchor: 'delimiter' +} +``` + ## align - Type: `boolean` or `array` diff --git a/schemas/json/block.json b/schemas/json/block.json index c0da49776b3f77..0828209c067686 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -222,9 +222,17 @@ "description": "It contains as set of options to control features used in the editor. See the supports documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/ for more details.", "properties": { "anchor": { - "type": "boolean", - "description": "Anchors let you link directly to a specific block on a page. This property adds a field to define an id for the block and a button to copy the direct link.", - "default": false + "description": "Anchors let you link directly to a specific block on a page. This property adds a field to define an id for the block and a button to copy the direct link. If this property is set to `true` or `html`, the id attribute of the root element of the saved markup are referenced. If this property is set to `delimiter`, the attribute is saved as a comment delimiter.", + "default": false, + "oneOf": [ + { + "type": "boolean" + }, + { + "type": "string", + "enum": [ "html", "delimiter" ] + } + ] }, "align": { "default": false, From 64be27289769133c1b7050e2b928c9a0d9f24bd6 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 28 Mar 2023 12:29:58 +0900 Subject: [PATCH 3/8] Re-add gutenberg_register_anchor_support() function --- lib/block-supports/anchor.php | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/anchor.php b/lib/block-supports/anchor.php index eb664687cd1e72..8f704a5019b365 100644 --- a/lib/block-supports/anchor.php +++ b/lib/block-supports/anchor.php @@ -5,6 +5,28 @@ * @package gutenberg */ +/** + * Registers the anchor block attribute for block types that support it. + * + * @param WP_Block_Type $block_type Block Type. + */ +function gutenberg_register_anchor_support( $block_type ) { + $has_anchor_support = _wp_array_get( $block_type->supports, array( 'anchor' ), true ); + if ( ! $has_anchor_support ) { + return; + } + + if ( ! $block_type->attributes ) { + $block_type->attributes = array(); + } + + if ( ! array_key_exists( 'anchor', $block_type->attributes ) ) { + $block_type->attributes['anchor'] = array( + 'type' => 'string', + ); + } +} + /** * Add the anchor to the output. * @@ -39,6 +61,7 @@ function gutenberg_apply_anchor_support( $block_type, $block_attributes ) { WP_Block_Supports::get_instance()->register( 'anchor', array( - 'apply' => 'gutenberg_apply_anchor_support', + 'register_attribute' => 'gutenberg_register_anchor_support', + 'apply' => 'gutenberg_apply_anchor_support', ) ); From b0104789b9f386efa28a04bb9faf403095d10300 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 28 Mar 2023 12:43:48 +0900 Subject: [PATCH 4/8] Changed the value of anchor support for dynamic blocks --- packages/block-library/src/archives/block.json | 2 +- packages/block-library/src/avatar/block.json | 2 +- packages/block-library/src/calendar/block.json | 2 +- packages/block-library/src/categories/block.json | 2 +- packages/block-library/src/comment-author-avatar/block.json | 2 +- packages/block-library/src/comment-author-name/block.json | 2 +- packages/block-library/src/comment-content/block.json | 2 +- packages/block-library/src/comment-date/block.json | 2 +- packages/block-library/src/comment-edit-link/block.json | 2 +- packages/block-library/src/comment-reply-link/block.json | 2 +- packages/block-library/src/comment-template/block.json | 2 +- packages/block-library/src/comments-pagination-next/block.json | 2 +- .../block-library/src/comments-pagination-numbers/block.json | 2 +- .../block-library/src/comments-pagination-previous/block.json | 2 +- packages/block-library/src/comments-pagination/block.json | 2 +- packages/block-library/src/comments/block.json | 2 +- packages/block-library/src/home-link/block.json | 2 +- packages/block-library/src/latest-comments/block.json | 2 +- packages/block-library/src/latest-posts/block.json | 2 +- packages/block-library/src/loginout/block.json | 2 +- packages/block-library/src/navigation/block.json | 2 +- packages/block-library/src/page-list/block.json | 2 +- packages/block-library/src/post-author-biography/block.json | 2 +- packages/block-library/src/post-author-name/block.json | 2 +- packages/block-library/src/post-author/block.json | 2 +- packages/block-library/src/post-comments-count/block.json | 2 +- packages/block-library/src/post-comments-form/block.json | 2 +- packages/block-library/src/post-comments-link/block.json | 2 +- packages/block-library/src/post-content/block.json | 2 +- packages/block-library/src/post-date/block.json | 2 +- packages/block-library/src/post-excerpt/block.json | 2 +- packages/block-library/src/post-featured-image/block.json | 2 +- packages/block-library/src/post-navigation-link/block.json | 2 +- packages/block-library/src/post-template/block.json | 2 +- packages/block-library/src/post-terms/block.json | 2 +- packages/block-library/src/post-title/block.json | 2 +- packages/block-library/src/query-no-results/block.json | 2 +- packages/block-library/src/query-pagination-next/block.json | 2 +- packages/block-library/src/query-pagination-numbers/block.json | 2 +- packages/block-library/src/query-pagination-previous/block.json | 2 +- packages/block-library/src/query-pagination/block.json | 2 +- packages/block-library/src/query-title/block.json | 2 +- packages/block-library/src/query/block.json | 2 +- packages/block-library/src/read-more/block.json | 2 +- packages/block-library/src/rss/block.json | 2 +- packages/block-library/src/search/block.json | 2 +- packages/block-library/src/site-logo/block.json | 2 +- packages/block-library/src/site-tagline/block.json | 2 +- packages/block-library/src/site-title/block.json | 2 +- packages/block-library/src/social-link/block.json | 2 +- packages/block-library/src/tag-cloud/block.json | 2 +- packages/block-library/src/template-part/block.json | 2 +- packages/block-library/src/term-description/block.json | 2 +- 53 files changed, 53 insertions(+), 53 deletions(-) diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json index edc6895e14b06f..5f857c35ce80a4 100644 --- a/packages/block-library/src/archives/block.json +++ b/packages/block-library/src/archives/block.json @@ -26,7 +26,7 @@ }, "supports": { "align": true, - "anchor": true, + "anchor": "delimiter", "html": false, "spacing": { "margin": true, diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json index 3fbb6dd9221aec..f014c860c81ac2 100644 --- a/packages/block-library/src/avatar/block.json +++ b/packages/block-library/src/avatar/block.json @@ -25,7 +25,7 @@ }, "usesContext": [ "postType", "postId", "commentId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "align": true, "alignWide": false, diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index c772cf58411f06..5537df9d4249e4 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -17,7 +17,7 @@ }, "supports": { "align": true, - "anchor": true, + "anchor": "delimiter", "color": { "link": true, "__experimentalSkipSerialization": [ "text", "background" ], diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json index a90a527e35c451..af014bcd2ef7f5 100644 --- a/packages/block-library/src/categories/block.json +++ b/packages/block-library/src/categories/block.json @@ -30,7 +30,7 @@ }, "supports": { "align": true, - "anchor": true, + "anchor": "delimiter", "html": false, "spacing": { "margin": true, diff --git a/packages/block-library/src/comment-author-avatar/block.json b/packages/block-library/src/comment-author-avatar/block.json index 2b6cefd6db9983..a4de7b8d45e49c 100644 --- a/packages/block-library/src/comment-author-avatar/block.json +++ b/packages/block-library/src/comment-author-avatar/block.json @@ -20,7 +20,7 @@ }, "usesContext": [ "commentId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "inserter": false, "__experimentalBorder": { diff --git a/packages/block-library/src/comment-author-name/block.json b/packages/block-library/src/comment-author-name/block.json index cfa036fa80e2d3..9245c1dc7ab3b1 100644 --- a/packages/block-library/src/comment-author-name/block.json +++ b/packages/block-library/src/comment-author-name/block.json @@ -22,7 +22,7 @@ }, "usesContext": [ "commentId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "spacing": { "margin": true, diff --git a/packages/block-library/src/comment-content/block.json b/packages/block-library/src/comment-content/block.json index 69917ccce6aeaf..72b4a442abde48 100644 --- a/packages/block-library/src/comment-content/block.json +++ b/packages/block-library/src/comment-content/block.json @@ -14,7 +14,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "color": { "gradients": true, "link": true, diff --git a/packages/block-library/src/comment-date/block.json b/packages/block-library/src/comment-date/block.json index ea1e2633381392..abf44e991e598d 100644 --- a/packages/block-library/src/comment-date/block.json +++ b/packages/block-library/src/comment-date/block.json @@ -18,7 +18,7 @@ }, "usesContext": [ "commentId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/comment-edit-link/block.json b/packages/block-library/src/comment-edit-link/block.json index e695ddc3801f77..3eb499eb8fd602 100644 --- a/packages/block-library/src/comment-edit-link/block.json +++ b/packages/block-library/src/comment-edit-link/block.json @@ -18,7 +18,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "link": true, diff --git a/packages/block-library/src/comment-reply-link/block.json b/packages/block-library/src/comment-reply-link/block.json index 7ed60f34f581f9..694ca402f57329 100644 --- a/packages/block-library/src/comment-reply-link/block.json +++ b/packages/block-library/src/comment-reply-link/block.json @@ -14,7 +14,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "color": { "gradients": true, "link": true, diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json index 9d0eb98684f142..af61bd58755b89 100644 --- a/packages/block-library/src/comment-template/block.json +++ b/packages/block-library/src/comment-template/block.json @@ -10,7 +10,7 @@ "usesContext": [ "postId" ], "supports": { "align": true, - "anchor": true, + "anchor": "delimiter", "html": false, "reusable": false, "spacing": { diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json index f0cee1a1cdbe68..48c8a0036fd38b 100644 --- a/packages/block-library/src/comments-pagination-next/block.json +++ b/packages/block-library/src/comments-pagination-next/block.json @@ -14,7 +14,7 @@ }, "usesContext": [ "postId", "comments/paginationArrow" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "color": { diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json index 0ab4f965ff1cd6..edb330e88a44a9 100644 --- a/packages/block-library/src/comments-pagination-numbers/block.json +++ b/packages/block-library/src/comments-pagination-numbers/block.json @@ -9,7 +9,7 @@ "textdomain": "default", "usesContext": [ "postId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "color": { diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json index 211e1a33305a0d..c7e2e464900f52 100644 --- a/packages/block-library/src/comments-pagination-previous/block.json +++ b/packages/block-library/src/comments-pagination-previous/block.json @@ -14,7 +14,7 @@ }, "usesContext": [ "postId", "comments/paginationArrow" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "color": { diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json index d7c8be4b8eaa25..bc9ba4db07e29a 100644 --- a/packages/block-library/src/comments-pagination/block.json +++ b/packages/block-library/src/comments-pagination/block.json @@ -17,7 +17,7 @@ "comments/paginationArrow": "paginationArrow" }, "supports": { - "anchor": true, + "anchor": "delimiter", "align": true, "reusable": false, "html": false, diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json index 19490f6e99eb47..50fd0e73aa93a0 100644 --- a/packages/block-library/src/comments/block.json +++ b/packages/block-library/src/comments/block.json @@ -18,7 +18,7 @@ }, "supports": { "align": [ "wide", "full" ], - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/home-link/block.json b/packages/block-library/src/home-link/block.json index df964ad76bc68d..5fa9ec748efca8 100644 --- a/packages/block-library/src/home-link/block.json +++ b/packages/block-library/src/home-link/block.json @@ -22,7 +22,7 @@ "style" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "typography": { diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json index 80fa4f5d2d063a..be7aff622febe4 100644 --- a/packages/block-library/src/latest-comments/block.json +++ b/packages/block-library/src/latest-comments/block.json @@ -29,7 +29,7 @@ }, "supports": { "align": true, - "anchor": true, + "anchor": "delimiter", "html": false, "spacing": { "margin": true, diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json index 9b451f5875c733..53bb215fa3c37b 100644 --- a/packages/block-library/src/latest-posts/block.json +++ b/packages/block-library/src/latest-posts/block.json @@ -84,7 +84,7 @@ }, "supports": { "align": true, - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json index aea0bb9e688407..2da9cb60f64536 100644 --- a/packages/block-library/src/loginout/block.json +++ b/packages/block-library/src/loginout/block.json @@ -18,7 +18,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "className": true, "typography": { "fontSize": false diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index ce2bed0d8837f6..718b0884438770 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -91,7 +91,7 @@ }, "supports": { "align": [ "wide", "full" ], - "anchor": true, + "anchor": "delimiter", "html": false, "inserter": true, "typography": { diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json index 0fa309431202a9..3a2495fc36bb6c 100644 --- a/packages/block-library/src/page-list/block.json +++ b/packages/block-library/src/page-list/block.json @@ -33,7 +33,7 @@ "openSubmenusOnClick" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "typography": { diff --git a/packages/block-library/src/post-author-biography/block.json b/packages/block-library/src/post-author-biography/block.json index a2e5f327acfeb7..8a72ff3ca35bc0 100644 --- a/packages/block-library/src/post-author-biography/block.json +++ b/packages/block-library/src/post-author-biography/block.json @@ -13,7 +13,7 @@ }, "usesContext": [ "postType", "postId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "spacing": { "margin": true, "padding": true diff --git a/packages/block-library/src/post-author-name/block.json b/packages/block-library/src/post-author-name/block.json index 2340636e0c63a4..de218666df43b0 100644 --- a/packages/block-library/src/post-author-name/block.json +++ b/packages/block-library/src/post-author-name/block.json @@ -21,7 +21,7 @@ }, "usesContext": [ "postType", "postId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "spacing": { "margin": true, diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index bb9f69ade07e6e..5424ca2211e9ff 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -35,7 +35,7 @@ }, "usesContext": [ "postType", "postId", "queryId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "spacing": { "margin": true, diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json index c56039a1fbee04..ac51100106d627 100644 --- a/packages/block-library/src/post-comments-count/block.json +++ b/packages/block-library/src/post-comments-count/block.json @@ -14,7 +14,7 @@ }, "usesContext": [ "postId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json index 793d14d74ba7ba..cee362aaec28f6 100644 --- a/packages/block-library/src/post-comments-form/block.json +++ b/packages/block-library/src/post-comments-form/block.json @@ -13,7 +13,7 @@ }, "usesContext": [ "postId", "postType" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json index b0ff71adca1547..a5fe6a2e8c4af5 100644 --- a/packages/block-library/src/post-comments-link/block.json +++ b/packages/block-library/src/post-comments-link/block.json @@ -14,7 +14,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "link": true, diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json index 56834a980baed1..ee3bc89d5d646b 100644 --- a/packages/block-library/src/post-content/block.json +++ b/packages/block-library/src/post-content/block.json @@ -8,7 +8,7 @@ "textdomain": "default", "usesContext": [ "postId", "postType", "queryId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "align": [ "wide", "full" ], "html": false, "__experimentalLayout": true, diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json index 41c45a4a57e26e..868fff57013c33 100644 --- a/packages/block-library/src/post-date/block.json +++ b/packages/block-library/src/post-date/block.json @@ -24,7 +24,7 @@ }, "usesContext": [ "postId", "postType", "queryId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index 53a92cb0bda639..87f7531f9d081b 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/packages/block-library/src/post-excerpt/block.json @@ -24,7 +24,7 @@ }, "usesContext": [ "postId", "postType", "queryId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index c6007785cd82ac..d3bb38b7dba8f3 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -56,7 +56,7 @@ "usesContext": [ "postId", "postType", "queryId" ], "supports": { "align": [ "left", "right", "center", "wide", "full" ], - "anchor": true, + "anchor": "delimiter", "color": { "__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before", "text": false, diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index 2bdfa654798ee6..9badc53502a4b5 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -31,7 +31,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "color": { diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index c0fc0d6ff8e7ea..775524ee6c8574 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -19,7 +19,7 @@ "reusable": false, "html": false, "align": true, - "anchor": true, + "anchor": "delimiter", "__experimentalLayout": { "allowEditing": false }, diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json index 1633c7c01b82ca..01ac77916675c2 100644 --- a/packages/block-library/src/post-terms/block.json +++ b/packages/block-library/src/post-terms/block.json @@ -28,7 +28,7 @@ }, "usesContext": [ "postId", "postType" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 4a56a6f37b7795..fae4ed88188204 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -31,7 +31,7 @@ }, "supports": { "align": [ "wide", "full" ], - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json index 789dcc8e66f605..5b583997540414 100644 --- a/packages/block-library/src/query-no-results/block.json +++ b/packages/block-library/src/query-no-results/block.json @@ -9,7 +9,7 @@ "textdomain": "default", "usesContext": [ "queryId", "query" ], "supports": { - "anchor": true, + "anchor": "delimiter", "align": true, "reusable": false, "html": false, diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json index d4861519f149ee..216bee565179dd 100644 --- a/packages/block-library/src/query-pagination-next/block.json +++ b/packages/block-library/src/query-pagination-next/block.json @@ -14,7 +14,7 @@ }, "usesContext": [ "queryId", "query", "paginationArrow" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "color": { diff --git a/packages/block-library/src/query-pagination-numbers/block.json b/packages/block-library/src/query-pagination-numbers/block.json index a05faff5f1b52b..63d14ee7feef72 100644 --- a/packages/block-library/src/query-pagination-numbers/block.json +++ b/packages/block-library/src/query-pagination-numbers/block.json @@ -9,7 +9,7 @@ "textdomain": "default", "usesContext": [ "queryId", "query" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "color": { diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json index 823808b0fb054d..0054cfccd142f7 100644 --- a/packages/block-library/src/query-pagination-previous/block.json +++ b/packages/block-library/src/query-pagination-previous/block.json @@ -14,7 +14,7 @@ }, "usesContext": [ "queryId", "query", "paginationArrow" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false, "color": { diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json index fa980575ec969d..f2f0bc61baa1af 100644 --- a/packages/block-library/src/query-pagination/block.json +++ b/packages/block-library/src/query-pagination/block.json @@ -18,7 +18,7 @@ "paginationArrow": "paginationArrow" }, "supports": { - "anchor": true, + "anchor": "delimiter", "align": true, "reusable": false, "html": false, diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json index 029762c321e399..fee1795c49bd0d 100644 --- a/packages/block-library/src/query-title/block.json +++ b/packages/block-library/src/query-title/block.json @@ -27,7 +27,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "align": [ "wide", "full" ], "html": false, "color": { diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index bcff0e3ac63b17..cc72d4a467913d 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -49,7 +49,7 @@ }, "supports": { "align": [ "wide", "full" ], - "anchor": true, + "anchor": "delimiter", "html": false, "__experimentalLayout": true }, diff --git a/packages/block-library/src/read-more/block.json b/packages/block-library/src/read-more/block.json index ed2b23c3b7f0fd..1aeeb53faa3f5e 100644 --- a/packages/block-library/src/read-more/block.json +++ b/packages/block-library/src/read-more/block.json @@ -17,7 +17,7 @@ }, "usesContext": [ "postId" ], "supports": { - "anchor": true, + "anchor": "delimiter", "html": false, "color": { "gradients": true, diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json index 2e3fd4b2d385e1..7b501ab3e41296 100644 --- a/packages/block-library/src/rss/block.json +++ b/packages/block-library/src/rss/block.json @@ -43,7 +43,7 @@ }, "supports": { "align": true, - "anchor": true, + "anchor": "delimiter", "html": false }, "editorStyle": "wp-block-rss-editor", diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json index 387295ebb36dea..ba2a86dd5b9c1a 100644 --- a/packages/block-library/src/search/block.json +++ b/packages/block-library/src/search/block.json @@ -46,7 +46,7 @@ }, "supports": { "align": [ "left", "center", "right" ], - "anchor": true, + "anchor": "delimiter", "color": { "gradients": true, "__experimentalSkipSerialization": true, diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json index f5eab1de304bc2..53d6166349b998 100644 --- a/packages/block-library/src/site-logo/block.json +++ b/packages/block-library/src/site-logo/block.json @@ -31,7 +31,7 @@ }, "supports": { "html": false, - "anchor": true, + "anchor": "delimiter", "align": true, "alignWide": false, "color": { diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json index a11eab4fbc243b..5331af442362c5 100644 --- a/packages/block-library/src/site-tagline/block.json +++ b/packages/block-library/src/site-tagline/block.json @@ -14,7 +14,7 @@ }, "example": {}, "supports": { - "anchor": true, + "anchor": "delimiter", "align": [ "wide", "full" ], "html": false, "color": { diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index b69acda934fda2..d5786ecdb481f3 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -27,7 +27,7 @@ "viewportWidth": 500 }, "supports": { - "anchor": true, + "anchor": "delimiter", "align": [ "wide", "full" ], "html": false, "color": { diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json index e81894591b4b33..e807fba13f03e7 100644 --- a/packages/block-library/src/social-link/block.json +++ b/packages/block-library/src/social-link/block.json @@ -28,7 +28,7 @@ "iconBackgroundColorValue" ], "supports": { - "anchor": true, + "anchor": "delimiter", "reusable": false, "html": false }, diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json index ec1e3335127193..715fd09ee461bf 100644 --- a/packages/block-library/src/tag-cloud/block.json +++ b/packages/block-library/src/tag-cloud/block.json @@ -36,7 +36,7 @@ ], "supports": { "html": false, - "anchor": true, + "anchor": "delimiter", "align": true, "spacing": { "margin": true, diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json index 282ac2ca22127a..f817cfacca24a1 100644 --- a/packages/block-library/src/template-part/block.json +++ b/packages/block-library/src/template-part/block.json @@ -21,7 +21,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "align": true, "html": false, "reusable": false diff --git a/packages/block-library/src/term-description/block.json b/packages/block-library/src/term-description/block.json index 5e945b2d0f6374..4bf65951fe84c8 100644 --- a/packages/block-library/src/term-description/block.json +++ b/packages/block-library/src/term-description/block.json @@ -12,7 +12,7 @@ } }, "supports": { - "anchor": true, + "anchor": "delimiter", "align": [ "wide", "full" ], "html": false, "color": { From 3a409ef0685bc207aa5155a4100576c9ad2e9dda Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 28 Mar 2023 12:59:20 +0900 Subject: [PATCH 5/8] Change the definition of attirbutes according to the value of anchor support --- lib/block-supports/anchor.php | 15 +++++++-- packages/block-editor/src/hooks/anchor.js | 37 +++-------------------- 2 files changed, 17 insertions(+), 35 deletions(-) diff --git a/lib/block-supports/anchor.php b/lib/block-supports/anchor.php index 8f704a5019b365..7c7842d5cfc3b1 100644 --- a/lib/block-supports/anchor.php +++ b/lib/block-supports/anchor.php @@ -11,8 +11,8 @@ * @param WP_Block_Type $block_type Block Type. */ function gutenberg_register_anchor_support( $block_type ) { - $has_anchor_support = _wp_array_get( $block_type->supports, array( 'anchor' ), true ); - if ( ! $has_anchor_support ) { + $anchor_support = _wp_array_get( $block_type->supports, array( 'anchor' ), true ); + if ( ! $anchor_support ) { return; } @@ -20,7 +20,16 @@ function gutenberg_register_anchor_support( $block_type ) { $block_type->attributes = array(); } - if ( ! array_key_exists( 'anchor', $block_type->attributes ) ) { + if ( true === $anchor_support || 'html' === $anchor_support ) { + $block_type->attributes['anchor'] = array( + 'type' => 'string', + 'source' => 'attribute', + 'attribute' => 'id', + 'selector' => '*', + ); + } + + if ( 'delimiter' === $anchor_support ) { $block_type->attributes['anchor'] = array( 'type' => 'string', ); diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 0618dac9efc170..65e227ab107ebf 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -40,39 +40,12 @@ export function addAttribute( settings ) { if ( 'type' in ( settings.attributes?.anchor ?? {} ) ) { return settings; } - - // Gracefully handle if settings.attributes is undefined. if ( hasBlockSupport( settings, 'anchor' ) ) { - let saveElement; - try { - saveElement = - typeof settings.save === 'function' - ? settings.save() - : settings.save; - if ( saveElement === null || saveElement === undefined ) { - // If the save function returns null or undefined, save the anchor - // attribute as a block's comment delimiter without specifying - // the source. - settings.attributes = { - ...settings.attributes, - anchor: { - type: ANCHOR_SCHEMA.type, - }, - }; - } else { - settings.attributes = { - ...settings.attributes, - anchor: ANCHOR_SCHEMA, - }; - } - } catch ( error ) { - // If the save function returns an error, the anchor will be saved - // in the markup as an id attribute. - settings.attributes = { - ...settings.attributes, - anchor: ANCHOR_SCHEMA, - }; - } + // Gracefully handle if settings.attributes is undefined. + settings.attributes = { + ...settings.attributes, + anchor: ANCHOR_SCHEMA, + }; } return settings; From 99ff106a39bbaa5cef1a8437b1d4ae1ee2273167 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 28 Mar 2023 13:51:27 +0900 Subject: [PATCH 6/8] Fix unit test --- packages/block-editor/src/hooks/anchor.js | 20 ++++-- packages/block-editor/src/hooks/test/utils.js | 72 ++++++++++--------- 2 files changed, 52 insertions(+), 40 deletions(-) diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 65e227ab107ebf..dc5c1521272fae 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -20,13 +20,17 @@ import { InspectorControls } from '../components'; */ const ANCHOR_REGEX = /[\s#]/g; -const ANCHOR_SCHEMA = { +const ANCHOR_SCHEMA_HTML = { type: 'string', source: 'attribute', attribute: 'id', selector: '*', }; +const ANCHOR_SCHEMA_DELIMITER = { + type: 'string', +}; + /** * Filters registered block settings, extending attributes with anchor using ID * of the first node. @@ -42,10 +46,16 @@ export function addAttribute( settings ) { } if ( hasBlockSupport( settings, 'anchor' ) ) { // Gracefully handle if settings.attributes is undefined. - settings.attributes = { - ...settings.attributes, - anchor: ANCHOR_SCHEMA, - }; + const { anchor } = settings.supports; + if ( [ true, 'html', 'delimiter' ].includes( anchor ) ) { + settings.attributes = { + ...settings.attributes, + anchor: + anchor === 'delimiter' + ? ANCHOR_SCHEMA_DELIMITER + : ANCHOR_SCHEMA_HTML, + }; + } } return settings; diff --git a/packages/block-editor/src/hooks/test/utils.js b/packages/block-editor/src/hooks/test/utils.js index 9c685f42fd9521..bed62b67472b1c 100644 --- a/packages/block-editor/src/hooks/test/utils.js +++ b/packages/block-editor/src/hooks/test/utils.js @@ -9,6 +9,8 @@ import { applyFilters } from '@wordpress/hooks'; import '../anchor'; import { immutableSet } from '../utils'; +const noop = () => {}; + describe( 'immutableSet', () => { describe( 'handling falsy values properly', () => { it( 'should create a new object if `undefined` is passed', () => { @@ -114,6 +116,7 @@ describe( 'immutableSet', () => { describe( 'anchor', () => { const blockSettings = { + save: noop, category: 'text', title: 'block title', }; @@ -130,48 +133,47 @@ describe( 'anchor', () => { expect( settings.attributes ).toBe( undefined ); } ); - it( 'should assign a new anchor attribute depending on the value of the save property', () => { - const saveDefinitions = [ - // The anchor attribute should be stored as a comment delimiter. - { - value: null, - schema: { - type: 'string', - }, - }, - { - value: () => null, - schema: { - type: 'string', - }, - }, - { - value: undefined, - schema: { - type: 'string', - }, - }, - // The anchor attributes should be saved as part of the markup. - { - value: () =>
, - schema: { - attribute: 'id', - selector: '*', - source: 'attribute', - type: 'string', + [ false, 'incorrect' ].forEach( ( value ) => { + it( `should do nothing if value is ${ value }`, () => { + const settings = registerBlockType( { + ...blockSettings, + supports: { + anchor: value, }, - }, - ]; + } ); - saveDefinitions.forEach( ( { value, schema } ) => { + expect( settings.attributes ).toBe( undefined ); + } ); + } ); + + [ true, 'html' ].forEach( ( value ) => { + it( `should assign a new anchor attribute referencing html if value is ${ value }`, () => { const settings = registerBlockType( { ...blockSettings, - save: value, supports: { - anchor: true, + anchor: value, }, } ); - expect( settings.attributes.anchor ).toEqual( schema ); + + expect( settings.attributes.anchor ).toEqual( { + attribute: 'id', + selector: '*', + source: 'attribute', + type: 'string', + } ); + } ); + } ); + + it( 'should assign a new anchor attribute referencing comment delimiter if value is delimiter', () => { + const settings = registerBlockType( { + ...blockSettings, + supports: { + anchor: `delimiter`, + }, + } ); + + expect( settings.attributes.anchor ).toEqual( { + type: 'string', } ); } ); From 36a30e5841294c5957b4072070a28574b7f955f0 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 2 Jun 2023 21:34:10 +0900 Subject: [PATCH 7/8] Add anchor support to Time To Read block --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/post-time-to-read/block.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index bf0d3bf71d06f9..0e16a9cb18a240 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -619,7 +619,7 @@ Show minutes required to finish reading the post. ([Source](https://github.com/W - **Name:** core/post-time-to-read - **Experimental:** true - **Category:** theme -- **Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Supports:** anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ - **Attributes:** textAlign ## Title diff --git a/packages/block-library/src/post-time-to-read/block.json b/packages/block-library/src/post-time-to-read/block.json index 2b7d7936094f7c..2a12e9099bd5f8 100644 --- a/packages/block-library/src/post-time-to-read/block.json +++ b/packages/block-library/src/post-time-to-read/block.json @@ -22,6 +22,7 @@ } }, "html": false, + "anchor": "delimiter", "spacing": { "margin": true, "padding": true From 0e1e05dedfed7b17265256febc583bef30da2e83 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 2 Jun 2023 21:36:21 +0900 Subject: [PATCH 8/8] Fix incorrect anchor value --- packages/block-library/src/post-template/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index af643168d2b422..a6be461f8bb629 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -19,7 +19,7 @@ "reusable": false, "html": false, "align": [ "wide", "full" ], - "anchor": "deliimter", + "anchor": "delimiter", "__experimentalLayout": true, "color": { "gradients": true,