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

Jump to bottom

Add/autoanchor no prefix #30992

Closed
wants to merge 2 commits into from
Closed

Add/autoanchor no prefix #30992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44d4375
Add autoAnchor prop
aristath Apr 20, 2021
88b0c09
autoAnchor without prefix
aristath Apr 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/block-editor/src/hooks/anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,9 +92,11 @@ export const withInspectorControl = createHigherOrderComponent(
placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
onChange={ ( nextValue ) => {
nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
props.setAttributes( {
anchor: nextValue,
} );

if ( props.attributes.autoAnchor ) {
props.setAttributes( { autoAnchor: false } );
}
props.setAttributes( { anchor: nextValue } );
} }
autoCapitalize="none"
autoComplete="off"
Expand Down
12 changes: 4 additions & 8 deletions packages/block-library/src/heading/autogenerate-anchors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { isNil, deburr, trim, startsWith } from 'lodash';
import { deburr, trim } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -95,14 +95,13 @@ const generateAnchor = ( anchor, content, allHeadingAnchors ) => {
return null;
}

const baseAnchor = `wp-${ slug }`;
anchor = baseAnchor;
anchor = slug;
let i = 0;

// If the anchor already exists in another heading, append -i.
while ( allHeadingAnchors.includes( anchor ) ) {
i += 1;
anchor = baseAnchor + '-' + i;
anchor = slug + '-' + i;
}

return anchor;
Expand All @@ -125,8 +124,5 @@ export default function useGeneratedAnchor( clientId, anchor, content ) {
},
[ clientId ]
);
if ( isNil( anchor ) || startsWith( anchor, 'wp-' ) ) {
return generateAnchor( anchor, content, allHeadingAnchors );
}
return anchor;
return generateAnchor( anchor, content, allHeadingAnchors );
}
3 changes: 3 additions & 0 deletions packages/block-library/src/heading/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
"textAlign": {
"type": "string"
},
"autoAnchor": {
"type": "boolean"
},
"content": {
"type": "string",
"source": "html",
Expand Down
10 changes: 8 additions & 2 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 @@ -44,8 +44,14 @@ function HeadingEdit( {
content
);
useEffect( () => {
if ( generatedAnchor !== attributes.anchor ) {
setAttributes( { anchor: generatedAnchor } );
if (
false !== attributes.autoAnchor &&
generatedAnchor !== attributes.anchor
) {
setAttributes( {
anchor: generatedAnchor,
autoAnchor: true,
} );
}
}, [ attributes.anchor, content ] );

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=\\"wp-4\\">4</h4>
<h4 id=\\"4\\">4</h4>
<!-- /wp:heading -->"
`;

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

exports[`Heading should correctly apply custom colors 1`] = `
"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#7700ff\\"}}} -->
<h3 class=\\"has-text-color\\" id=\\"wp-heading\\" style=\\"color:#7700ff\\">Heading</h3>
<h3 class=\\"has-text-color\\" id=\\"heading\\" style=\\"color:#7700ff\\">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=\\"wp-heading\\">Heading</h2>
<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\" id=\\"heading\\">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=\\"wp-a\\">a</h2>
<h2 id=\\"a\\">a</h2>
<!-- /wp:heading -->"
`;

exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
"<!-- wp:heading -->
<h2 id=\\"wp-a\\">a</h2>
<h2 id=\\"a\\">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=\\"wp-1-h\\">1. H</h2>
<h2 id=\\"1-h\\">1. H</h2>
<!-- /wp:heading -->"
`;

exports[`Heading should work with the format input rules 1`] = `
"<!-- wp:heading -->
<h2 id=\\"wp-code\\"><code>code</code></h2>
<h2 id=\\"code\\"><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=\\"wp-test\\"><p>test</p></blockquote>
<blockquote class=\\"wp-block-quote\\" id=\\"test\\"><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=\\"wp-one\\">one</h2>
<h2 id=\\"one\\">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=\\"wp-one\\">one</h2>
<h2 id=\\"one\\">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=\\"wp-one\\">one</h2>
<h2 id=\\"one\\">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=\\"wp-one\\">one</h2>
<h2 id=\\"one\\">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=\\"wp-one\\">one</h2>
<h2 id=\\"one\\">one</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id=\\"wp-two\\">two</h2>
<h2 id=\\"two\\">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=\\"wp-one\\">one</h2>
<h2 id=\\"one\\">one</h2>
<!-- /wp:heading -->

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

<!-- wp:heading -->
<h2 id=\\"wp-cite\\">cite</h2>
<h2 id=\\"cite\\">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=\\"wp-group-heading\\">Group Heading</h2>
<h2 id=\\"group-heading\\">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=\\"wp-group-heading\\">Group Heading</h2>
<h2 id=\\"group-heading\\">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=\\"wp-group-heading\\">Group Heading</h2>
<h2 id=\\"group-heading\\">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=\\"wp-group-heading\\">Group Heading</h2>
<h2 id=\\"group-heading\\">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=\\"wp-heading\\">Heading</h2>
<h2 id=\\"heading\\">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=\\"wp-heading\\">Heading</h2>
<h2 id=\\"heading\\">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/widgets/adding-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ describe( 'Widgets screen', () => {
<p>First Paragraph</p>
</div></div>
<div class=\\"widget widget_block\\"><div class=\\"widget-content\\">
<h2 id=\\"wp-my-heading\\">My Heading</h2>
<h2 id=\\"my-heading\\">My Heading</h2>
</div></div>
<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
<p>Second Paragraph</p>
Expand Down