Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Editor: Add settings to enable/disable auto anchor generation #38780

Merged
merged 3 commits into from
Feb 16, 2022
Merged

Block Editor: Add settings to enable/disable auto anchor generation #38780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c03e2f
Block Editor: Add settings to enable/disable auto anchor generation
Mamaduka Feb 14, 2022
8a71f16
Fix deps
Mamaduka Feb 14, 2022
4d36fc2
Update snapshots
Mamaduka Feb 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/block-editor/src/store/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
23 changes: 18 additions & 5 deletions packages/block-library/src/heading/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import classnames from 'classnames';
*/
import { __ } from '@wordpress/i18n';
import { useEffect, Platform } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { useDispatch, useSelect } from '@wordpress/data';
import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
import {
AlignmentControl,
Expand Down Expand Up @@ -41,13 +41,25 @@ function HeadingEdit( {
style,
} );

const { canGenerateAnchors } = useSelect( ( select ) => {
const settings = select( blockEditorStore ).getSettings();

return {
canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
};
}, [] );

const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
blockEditorStore
);

// 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();
Expand All @@ -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 );
}
Expand Down
16 changes: 8 additions & 8 deletions packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@

exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
"<!-- wp:heading {\\"level\\":4} -->
<h4 id=\\"4\\">4</h4>
<h4>4</h4>
<!-- /wp:heading -->"
`;

exports[`Heading can be created by prefixing number sign and a space 1`] = `
"<!-- wp:heading {\\"level\\":3} -->
<h3 id=\\"3\\">3</h3>
<h3>3</h3>
<!-- /wp:heading -->"
`;

exports[`Heading should correctly apply custom colors 1`] = `
"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#0782f6\\"}}} -->
<h3 class=\\"has-text-color\\" id=\\"heading\\" style=\\"color:#0782f6\\">Heading</h3>
<h3 class=\\"has-text-color\\" style=\\"color:#0782f6\\">Heading</h3>
<!-- /wp:heading -->"
`;

exports[`Heading should correctly apply named colors 1`] = `
"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\" id=\\"heading\\">Heading</h2>
<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
<!-- /wp:heading -->"
`;

Expand All @@ -30,13 +30,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id=\\"a\\">a</h2>
<h2>a</h2>
<!-- /wp:heading -->"
`;

exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
"<!-- wp:heading -->
<h2 id=\\"a\\">a</h2>
<h2>a</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
Expand All @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"1-h\\">1. H</h2>
<h2>1. H</h2>
<!-- /wp:heading -->"
`;

exports[`Heading should work with the format input rules 1`] = `
"<!-- wp:heading -->
<h2 id=\\"code\\"><code>code</code></h2>
<h2><code>code</code></h2>
<!-- /wp:heading -->"
`;
20 changes: 10 additions & 10 deletions packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`] = `
"<!-- wp:quote -->
<blockquote class=\\"wp-block-quote\\" id=\\"test\\"><p>test</p></blockquote>
<blockquote class=\\"wp-block-quote\\"><p>test</p></blockquote>
<!-- /wp:quote -->"
`;
Expand Down Expand Up @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"one\\">one</h2>
<h2>one</h2>
<!-- /wp:heading -->
<!-- wp:quote -->
Expand All @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"one\\">one</h2>
<h2>one</h2>
<!-- /wp:heading -->
<!-- wp:quote -->
Expand All @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"one\\">one</h2>
<h2>one</h2>
<!-- /wp:heading -->"
`;
Expand All @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"one\\">one</h2>
<h2>one</h2>
<!-- /wp:heading -->
<!-- wp:quote -->
Expand All @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"one\\">one</h2>
<h2>one</h2>
<!-- /wp:heading -->
<!-- wp:heading -->
<h2 id=\\"two\\">two</h2>
<h2>two</h2>
<!-- /wp:heading -->
<!-- wp:quote -->
Expand All @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"one\\">one</h2>
<h2>one</h2>
<!-- /wp:heading -->
<!-- wp:heading -->
<h2 id=\\"two\\">two</h2>
<h2>two</h2>
<!-- /wp:heading -->
<!-- wp:heading -->
<h2 id=\\"cite\\">cite</h2>
<h2>cite</h2>
<!-- /wp:heading -->"
`;
8 changes: 4 additions & 4 deletions packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
"<!-- wp:group -->
<div class=\\"wp-block-group\\"><!-- wp:heading -->
<h2 id=\\"group-heading\\">Group Heading</h2>
<h2>Group Heading</h2>
<!-- /wp:heading -->
<!-- wp:image -->
Expand Down Expand Up @@ -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`] = `
"<!-- wp:group -->
<div class=\\"wp-block-group\\"><!-- wp:heading -->
<h2 id=\\"group-heading\\">Group Heading</h2>
<h2>Group Heading</h2>
<!-- /wp:heading -->
<!-- wp:image -->
Expand All @@ -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`] = `
"<!-- wp:heading -->
<h2 id=\\"group-heading\\">Group Heading</h2>
<h2>Group Heading</h2>
<!-- /wp:heading -->
<!-- wp:image -->
Expand All @@ -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`] = `
"<!-- wp:group {\\"align\\":\\"full\\"} -->
<div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
<h2 id=\\"group-heading\\">Group Heading</h2>
<h2>Group Heading</h2>
<!-- /wp:heading -->
<!-- wp:image {\\"align\\":\\"full\\"} -->
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id=\\"heading\\">Heading</h2>
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
Expand All @@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 id=\\"heading\\">Heading</h2>
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
Expand Down
6 changes: 3 additions & 3 deletions ...e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ exports[`Keep styles on block transforms Should keep the font size during a tran

exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = `
"<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
<h2 class=\\"has-large-font-size\\" id=\\"line-1-to-be-made-large\\">Line 1 to be made large</h2>
<h2 class=\\"has-large-font-size\\">Line 1 to be made large</h2>
<!-- /wp:heading -->

<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
<h2 class=\\"has-large-font-size\\" id=\\"line-2-to-be-made-large\\">Line 2 to be made large</h2>
<h2 class=\\"has-large-font-size\\">Line 2 to be made large</h2>
<!-- /wp:heading -->

<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
<h2 class=\\"has-large-font-size\\" id=\\"line-3-to-be-made-large\\">Line 3 to be made large</h2>
<h2 class=\\"has-large-font-size\\">Line 3 to be made large</h2>
<!-- /wp:heading -->"
`;

Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/provider/use-block-editor-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
'__experimentalFeatures',
'__experimentalPreferredStyleVariations',
'__experimentalSetIsInserterOpened',
'__experimentalGenerateAnchors',
'__unstableGalleryWithImageBlocks',
'alignWide',
'allowedBlockTypes',
Expand Down