Dynamic blocks - HTML Anchor is not supported

[carolinan]

Description

When adding a navigation block and attempting to add an HTML anchor from the settings sidebar > Advanced > HTML Anchor,
the anchor is not saved.

Step-by-step reproduction instructions

1. In either block or site editor, add a navigation block.
2. In the settings sidebar under Advanced, add an anchor.
3. Save.
4. Reload the page.
5. View the anchor field under Advanced. Notice that the data you entered is missing.

Expected behaviour

I expect the anchor /ID to be saved and used on the front of the website.

Actual behaviour

The anchor is not saved.

WordPress information

WordPress version: 5.7-RC1-50437
Gutenberg version: current master
Are all plugins except Gutenberg deactivated? yes
Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

Device information

Device: Desktop
Operating system: Windows 10
Browser: Chrome Version 88.0.4324.190

[georgeh]

👀

[georgeh]

Here's what I've figured out so far:

Anchors are saved by packages/block-editor/src/hooks/anchor.js. That file adds a filter to blocks.getSaveContent.extraProps to save the prop.

That filter gets applied in packages/blocks/src/api/serializer.js, but only if the block passes the test

const hasLightBlockWrapper =
	blockType.apiVersion > 1 ||
	hasBlockSupport( blockType, 'lightBlockWrapper', false );

if (
	isObject( element ) &&
	hasFilter( 'blocks.getSaveContent.extraProps' ) &&
	! hasLightBlockWrapper
) {

since navigation/block.json has "apiVersion": 2, hasLightBlockWrapper is true, so the condition is false, so the filter is never applied.

What I don't understand is how anchors still work in other blocks. Heading also defines "apiVersion": 2 but anchors save for that block.

That's where I'm at now, but I'll keep digging in.

[carolinan]

Possibly stale PR: #24699

[tex0gen]

I'm having the same issue. I've applied a filter to add additional classes to this block but the filter doesn't appear to run. The filter is actually applied to all blocks and it appears to work for all except core/navigation.

[chrismcginnis]

Also having this issue. Attempting to add an anchor tag under the Advanced tab here: https://i.imgur.com/u3a9iAY.png but it will not save.

[Rvervuurt]

This is still an issue.

[baillieogrady]

Having this issue currently with ACF blocks.

[kathrynwp]

I'm still able to replicate this with:

WordPress 6.0.2
Gutenberg 14.2.0 active or inactive
No other plugins active
Twenty Twenty-Two 1.2

and:

WordPress 6.1-beta2-54351
Gutenberg 14.2.0 active or inactive
No other plugins active
Twenty Twenty-Two 1.2

@vcanales @georgeh @talldan @Soean - with the Navigation block being a focus of WP 6.1, would any of you have a chance to look at this bug and see if there might be an opportunity to get a fix moving? Thank you!

[talldan]

It looks like the problem isn't completely specific to the Navigation block - fully dynamic blocks don't support anchors. There was a PR to try to solve this, but it seems abandoned now.

The navigation block does have also an issue that it doesn't save any HTML markup, so the attribute declaration won't work because there is no id:

gutenberg/packages/block-editor/src/hooks/anchor.js

Lines 23 to 28 in e64d621

	const ANCHOR_SCHEMA = {
	type: 'string',
	source: 'attribute',
	attribute: 'id',
	selector: '*',
	};

But even if that were solved there would be no way to output the attribute when the block is rendered on the server.

I think the best thing would be to remove anchor support from the navigation block for 6.1 as it's confusing that it doesn't work, and look to add anchor support for dynamic blocks in 6.2.

A workaround for users might be to wrap the navigation block in a group and add the anchor to the group.

edit: I'll also re-title the issue so that it's clearer. Hope you don't mind @carolinan.

[pierre-dekode]

For anyone still having this issue, the trick is to register an anchor attribute on your custom block, for it to be correctly saved by the native "HTML Anchor" Gutenberg field:

"attributes": {
	"anchor": {
		"type": "string",
		"default": ""
	},
	...
}