From 6c467dd0642191038b923a5d7c95355aafbfdf31 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 16 Feb 2022 13:50:08 +0000 Subject: [PATCH] Block Editor: Add settings to enable/disable auto anchor generation (#38780) * Block Editor: Add settings to enable/disable auto anchor generation * Fix deps * Update snapshots --- packages/block-editor/src/store/defaults.js | 1 + packages/block-library/src/heading/edit.js | 23 +++++++++++++++---- .../blocks/__snapshots__/heading.test.js.snap | 18 +++++++-------- .../blocks/__snapshots__/quote.test.js.snap | 20 ++++++++-------- .../__snapshots__/block-grouping.test.js.snap | 8 +++---- .../inserting-blocks.test.js.snap | 4 ++-- .../provider/use-block-editor-settings.js | 1 + 7 files changed, 45 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 33165125325e13..a9e5b742bbc7a3 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -156,6 +156,7 @@ export const SETTINGS_DEFAULTS = { __experimentalBlockPatterns: [], __experimentalBlockPatternCategories: [], __experimentalSpotlightEntityBlocks: [], + __experimentalGenerateAnchors: false, __unstableGalleryWithImageBlocks: false, // gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults. diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index b6a2de59940562..835263d4c288e7 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { __ } from '@wordpress/i18n'; import { useEffect } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; import { AlignmentControl, @@ -41,6 +41,14 @@ function HeadingEdit( { style, } ); + const { canGenerateAnchors } = useSelect( ( select ) => { + const settings = select( blockEditorStore ).getSettings(); + + return { + canGenerateAnchors: !! settings.__experimentalGenerateAnchors, + }; + }, [] ); + const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); @@ -48,6 +56,10 @@ function HeadingEdit( { // Initially set anchor for headings that have content but no anchor set. // This is used when transforming a block to heading, or for legacy anchors. useEffect( () => { + if ( ! canGenerateAnchors ) { + return; + } + if ( ! anchor && content ) { // This side-effect should not create an undo level. __unstableMarkNextChangeAsNotPersistent(); @@ -59,14 +71,15 @@ function HeadingEdit( { // Remove anchor map when block unmounts. return () => setAnchor( clientId, null ); - }, [ content, anchor ] ); + }, [ anchor, content, clientId, canGenerateAnchors ] ); const onContentChange = ( value ) => { const newAttrs = { content: value }; if ( - ! anchor || - ! value || - generateAnchor( clientId, content ) === anchor + canGenerateAnchors && + ( ! anchor || + ! value || + generateAnchor( clientId, content ) === anchor ) ) { newAttrs.anchor = generateAnchor( clientId, value ); } diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap index 290019372feeb3..86257779ea8b98 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap @@ -2,25 +2,25 @@ exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = ` " -

4

+

4

" `; exports[`Heading can be created by prefixing number sign and a space 1`] = ` " -

3

+

3

" `; exports[`Heading should correctly apply custom colors 1`] = ` -" -

Heading

+" +

Heading

" `; exports[`Heading should correctly apply named colors 1`] = ` " -

Heading

+

Heading

" `; @@ -30,13 +30,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th -

a

+

a

" `; exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = ` " -

a

+

a

@@ -46,12 +46,12 @@ exports[`Heading should create a paragraph block below when pressing enter at th exports[`Heading should not work with the list input rule 1`] = ` " -

1. H

+

1. H

" `; exports[`Heading should work with the format input rules 1`] = ` " -

code

+

code

" `; diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap index 6345efae5ed728..57fcc6c61dbdd0 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap @@ -40,7 +40,7 @@ exports[`Quote can be converted to paragraphs and renders only one paragraph for exports[`Quote can be created by converting a heading 1`] = ` " -

test

+

test

" `; @@ -144,7 +144,7 @@ exports[`Quote can be split in the middle and merged back 4`] = ` exports[`Quote is transformed to a heading and a quote if the quote contains a citation 1`] = ` " -

one

+

one

@@ -154,7 +154,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains a c exports[`Quote is transformed to a heading and a quote if the quote contains multiple paragraphs 1`] = ` " -

one

+

one

@@ -164,7 +164,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains mul exports[`Quote is transformed to a heading if the quote just contains one paragraph 1`] = ` " -

one

+

one

" `; @@ -176,7 +176,7 @@ exports[`Quote is transformed to an empty heading if the quote is empty 1`] = ` exports[`Quote the resuling quote after transforming to a heading can be transformed again 1`] = ` " -

one

+

one

@@ -186,11 +186,11 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo exports[`Quote the resuling quote after transforming to a heading can be transformed again 2`] = ` " -

one

+

one

-

two

+

two

@@ -200,14 +200,14 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo exports[`Quote the resuling quote after transforming to a heading can be transformed again 3`] = ` " -

one

+

one

-

two

+

two

-

cite

+

cite

" `; diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap index aeaafed4ea8a7a..f3c24c200b971a 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap @@ -3,7 +3,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = ` "
-

Group Heading

+

Group Heading

@@ -51,7 +51,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = ` "
-

Group Heading

+

Group Heading

@@ -66,7 +66,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = ` " -

Group Heading

+

Group Heading

@@ -81,7 +81,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = ` "
-

Group Heading

+

Group Heading

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap index b309fc0304e49c..e844124942a676 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap @@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \ -

Heading

+

Heading

@@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \ -

Heading

+

Heading

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index aaed50728fb376..9af1484dee22f9 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -96,6 +96,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { '__experimentalFeatures', '__experimentalPreferredStyleVariations', '__experimentalSetIsInserterOpened', + '__experimentalGenerateAnchors', '__unstableGalleryWithImageBlocks', 'alignWide', 'allowedBlockTypes',