Block Bindings: Fix focus behavior when pressing Enter on connected block

[artemiomorales]

What?

This PR is meant to set focus correctly after pressing Enter on a connected block.

Why?

Addresses fix/bindings-focus-on-enter. Currently, pressing Enter on a bound block causes two paragraphs to be created — one erroneously gets created before the bound block and another one after, and focus is not set properly to the latter.

How?

This PR blurs focus from a bound block after the Enter button is pressed so that, when a new default block is inserted, focus can be set to the new block accordingly. It also prevents RichText logic from running if the block is bound.

Testing Instructions

1. Follow instructions from https://github.com/WordPress/wordpress-develop/pull/5888 to create a Paragraph with content connected to a post meta.
2. Click to select the connected Paragraph.
3. Press Enter.
4. Observe that a new Paragraph is created and focus is set to it as expected.
5. Repeat the same for the Heading block.

Screenshare

https://github.com/WordPress/gutenberg/assets/5360536/c5c2628c-ca3a-4bfe-ad66-c907f69cd392

[github-actions[bot]]

Size Change: +201 B (0%)

Total Size: 1.71 MB

Filename	Size	Change
build/block-editor/index.min.js	250 kB	-4 B (0%)
build/block-library/blocks/image/editor-rtl.css	894 B	+16 B (+2%)
build/block-library/blocks/image/editor.css	893 B	+15 B (+2%)
build/block-library/editor-rtl.css	12.4 kB	+7 B (0%)
build/block-library/editor.css	12.3 kB	+7 B (0%)
build/block-library/index.min.js	217 kB	+36 B (0%)
build/edit-site/index.min.js	214 kB	+124 B (0%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	955 B
build/annotations/index.min.js	2.69 kB
build/api-fetch/index.min.js	2.32 kB
build/autop/index.min.js	2.1 kB
build/blob/index.min.js	578 B
build/block-directory/index.min.js	7.22 kB
build/block-directory/style-rtl.css	1.02 kB
build/block-directory/style.css	1.02 kB
build/block-editor/content-rtl.css	4.35 kB
build/block-editor/content.css	4.35 kB
build/block-editor/default-editor-styles-rtl.css	381 B
build/block-editor/default-editor-styles.css	381 B
build/block-editor/style-rtl.css	15.4 kB
build/block-editor/style.css	15.4 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	122 B
build/block-library/blocks/audio/style.css	122 B
build/block-library/blocks/audio/theme-rtl.css	126 B
build/block-library/blocks/audio/theme.css	126 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/block/editor-rtl.css	305 B
build/block-library/blocks/block/editor.css	305 B
build/block-library/blocks/button/editor-rtl.css	415 B
build/block-library/blocks/button/editor.css	414 B
build/block-library/blocks/button/style-rtl.css	627 B
build/block-library/blocks/button/style.css	626 B
build/block-library/blocks/buttons/editor-rtl.css	337 B
build/block-library/blocks/buttons/editor.css	337 B
build/block-library/blocks/buttons/style-rtl.css	332 B
build/block-library/blocks/buttons/style.css	332 B
build/block-library/blocks/calendar/style-rtl.css	239 B
build/block-library/blocks/calendar/style.css	239 B
build/block-library/blocks/categories/editor-rtl.css	113 B
build/block-library/blocks/categories/editor.css	112 B
build/block-library/blocks/categories/style-rtl.css	124 B
build/block-library/blocks/categories/style.css	124 B
build/block-library/blocks/code/editor-rtl.css	53 B
build/block-library/blocks/code/editor.css	53 B
build/block-library/blocks/code/style-rtl.css	121 B
build/block-library/blocks/code/style.css	121 B
build/block-library/blocks/code/theme-rtl.css	124 B
build/block-library/blocks/code/theme.css	124 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	421 B
build/block-library/blocks/columns/style.css	421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-content/style-rtl.css	92 B
build/block-library/blocks/comment-content/style.css	92 B
build/block-library/blocks/comment-template/style-rtl.css	199 B
build/block-library/blocks/comment-template/style.css	198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	840 B
build/block-library/blocks/comments/editor.css	839 B
build/block-library/blocks/comments/style-rtl.css	637 B
build/block-library/blocks/comments/style.css	636 B
build/block-library/blocks/cover/editor-rtl.css	647 B
build/block-library/blocks/cover/editor.css	650 B
build/block-library/blocks/cover/style-rtl.css	1.69 kB
build/block-library/blocks/cover/style.css	1.68 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	98 B
build/block-library/blocks/details/style.css	98 B
build/block-library/blocks/embed/editor-rtl.css	322 B
build/block-library/blocks/embed/editor.css	322 B
build/block-library/blocks/embed/style-rtl.css	410 B
build/block-library/blocks/embed/style.css	410 B
build/block-library/blocks/embed/theme-rtl.css	126 B
build/block-library/blocks/embed/theme.css	126 B
build/block-library/blocks/file/editor-rtl.css	316 B
build/block-library/blocks/file/editor.css	316 B
build/block-library/blocks/file/style-rtl.css	280 B
build/block-library/blocks/file/style.css	281 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	201 B
build/block-library/blocks/footnotes/style.css	199 B
build/block-library/blocks/form-input/editor-rtl.css	227 B
build/block-library/blocks/form-input/editor.css	227 B
build/block-library/blocks/form-input/style-rtl.css	343 B
build/block-library/blocks/form-input/style.css	343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	340 B
build/block-library/blocks/form-submission-notification/editor.css	340 B
build/block-library/blocks/form-submit-button/style-rtl.css	69 B
build/block-library/blocks/form-submit-button/style.css	69 B
build/block-library/blocks/form/view.min.js	471 B
build/block-library/blocks/freeform/editor-rtl.css	2.61 kB
build/block-library/blocks/freeform/editor.css	2.61 kB
build/block-library/blocks/gallery/editor-rtl.css	947 B
build/block-library/blocks/gallery/editor.css	952 B
build/block-library/blocks/gallery/style-rtl.css	1.72 kB
build/block-library/blocks/gallery/style.css	1.72 kB
build/block-library/blocks/gallery/theme-rtl.css	108 B
build/block-library/blocks/gallery/theme.css	108 B
build/block-library/blocks/group/editor-rtl.css	647 B
build/block-library/blocks/group/editor.css	647 B
build/block-library/blocks/group/style-rtl.css	57 B
build/block-library/blocks/group/style.css	57 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	189 B
build/block-library/blocks/heading/style.css	189 B
build/block-library/blocks/html/editor-rtl.css	336 B
build/block-library/blocks/html/editor.css	337 B
build/block-library/blocks/image/style-rtl.css	1.6 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	126 B
build/block-library/blocks/image/theme.css	126 B
build/block-library/blocks/image/view.min.js	1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css	357 B
build/block-library/blocks/latest-comments/style.css	357 B
build/block-library/blocks/latest-posts/editor-rtl.css	213 B
build/block-library/blocks/latest-posts/editor.css	212 B
build/block-library/blocks/latest-posts/style-rtl.css	478 B
build/block-library/blocks/latest-posts/style.css	478 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 B
build/block-library/blocks/media-text/editor-rtl.css	266 B
build/block-library/blocks/media-text/editor.css	263 B
build/block-library/blocks/media-text/style-rtl.css	505 B
build/block-library/blocks/media-text/style.css	503 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	668 B
build/block-library/blocks/navigation-link/editor.css	669 B
build/block-library/blocks/navigation-link/style-rtl.css	259 B
build/block-library/blocks/navigation-link/style.css	257 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	296 B
build/block-library/blocks/navigation-submenu/editor.css	295 B
build/block-library/blocks/navigation/editor-rtl.css	2.26 kB
build/block-library/blocks/navigation/editor.css	2.26 kB
build/block-library/blocks/navigation/style-rtl.css	2.26 kB
build/block-library/blocks/navigation/style.css	2.25 kB
build/block-library/blocks/navigation/view.min.js	1.02 kB
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	377 B
build/block-library/blocks/page-list/editor.css	377 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	235 B
build/block-library/blocks/paragraph/editor.css	235 B
build/block-library/blocks/paragraph/style-rtl.css	335 B
build/block-library/blocks/paragraph/style.css	335 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	508 B
build/block-library/blocks/post-comments-form/style.css	508 B
build/block-library/blocks/post-content/editor-rtl.css	74 B
build/block-library/blocks/post-content/editor.css	74 B
build/block-library/blocks/post-date/style-rtl.css	61 B
build/block-library/blocks/post-date/style.css	61 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	141 B
build/block-library/blocks/post-excerpt/style.css	141 B
build/block-library/blocks/post-featured-image/editor-rtl.css	666 B
build/block-library/blocks/post-featured-image/editor.css	662 B
build/block-library/blocks/post-featured-image/style-rtl.css	342 B
build/block-library/blocks/post-featured-image/style.css	342 B
build/block-library/blocks/post-navigation-link/style-rtl.css	215 B
build/block-library/blocks/post-navigation-link/style.css	214 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	409 B
build/block-library/blocks/post-template/style.css	408 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-time-to-read/style-rtl.css	69 B
build/block-library/blocks/post-time-to-read/style.css	69 B
build/block-library/blocks/post-title/style-rtl.css	100 B
build/block-library/blocks/post-title/style.css	100 B
build/block-library/blocks/preformatted/style-rtl.css	125 B
build/block-library/blocks/preformatted/style.css	125 B
build/block-library/blocks/pullquote/editor-rtl.css	135 B
build/block-library/blocks/pullquote/editor.css	135 B
build/block-library/blocks/pullquote/style-rtl.css	354 B
build/block-library/blocks/pullquote/style.css	354 B
build/block-library/blocks/pullquote/theme-rtl.css	168 B
build/block-library/blocks/pullquote/theme.css	168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	288 B
build/block-library/blocks/query-pagination/style.css	284 B
build/block-library/blocks/query-title/style-rtl.css	63 B
build/block-library/blocks/query-title/style.css	63 B
build/block-library/blocks/query/editor-rtl.css	486 B
build/block-library/blocks/query/editor.css	486 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	237 B
build/block-library/blocks/quote/style.css	237 B
build/block-library/blocks/quote/theme-rtl.css	223 B
build/block-library/blocks/quote/theme.css	226 B
build/block-library/blocks/read-more/style-rtl.css	140 B
build/block-library/blocks/read-more/style.css	140 B
build/block-library/blocks/rss/editor-rtl.css	149 B
build/block-library/blocks/rss/editor.css	149 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	184 B
build/block-library/blocks/search/editor.css	184 B
build/block-library/blocks/search/style-rtl.css	629 B
build/block-library/blocks/search/style.css	628 B
build/block-library/blocks/search/theme-rtl.css	114 B
build/block-library/blocks/search/theme.css	114 B
build/block-library/blocks/search/view.min.js	478 B
build/block-library/blocks/separator/editor-rtl.css	146 B
build/block-library/blocks/separator/editor.css	146 B
build/block-library/blocks/separator/style-rtl.css	229 B
build/block-library/blocks/separator/style.css	229 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	323 B
build/block-library/blocks/shortcode/editor.css	323 B
build/block-library/blocks/site-logo/editor-rtl.css	754 B
build/block-library/blocks/site-logo/editor.css	754 B
build/block-library/blocks/site-logo/style-rtl.css	204 B
build/block-library/blocks/site-logo/style.css	204 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	116 B
build/block-library/blocks/site-title/editor.css	116 B
build/block-library/blocks/site-title/style-rtl.css	57 B
build/block-library/blocks/site-title/style.css	57 B
build/block-library/blocks/social-link/editor-rtl.css	184 B
build/block-library/blocks/social-link/editor.css	184 B
build/block-library/blocks/social-links/editor-rtl.css	682 B
build/block-library/blocks/social-links/editor.css	681 B
build/block-library/blocks/social-links/style-rtl.css	1.49 kB
build/block-library/blocks/social-links/style.css	1.48 kB
build/block-library/blocks/spacer/editor-rtl.css	350 B
build/block-library/blocks/spacer/editor.css	350 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	395 B
build/block-library/blocks/table/editor.css	395 B
build/block-library/blocks/table/style-rtl.css	639 B
build/block-library/blocks/table/style.css	639 B
build/block-library/blocks/table/theme-rtl.css	146 B
build/block-library/blocks/table/theme.css	146 B
build/block-library/blocks/tag-cloud/style-rtl.css	251 B
build/block-library/blocks/tag-cloud/style.css	253 B
build/block-library/blocks/template-part/editor-rtl.css	403 B
build/block-library/blocks/template-part/editor.css	403 B
build/block-library/blocks/template-part/theme-rtl.css	101 B
build/block-library/blocks/template-part/theme.css	101 B
build/block-library/blocks/term-description/style-rtl.css	111 B
build/block-library/blocks/term-description/style.css	111 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	99 B
build/block-library/blocks/verse/style.css	99 B
build/block-library/blocks/video/editor-rtl.css	552 B
build/block-library/blocks/video/editor.css	555 B
build/block-library/blocks/video/style-rtl.css	185 B
build/block-library/blocks/video/style.css	185 B
build/block-library/blocks/video/theme-rtl.css	126 B
build/block-library/blocks/video/theme.css	126 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.1 kB
build/block-library/common.css	1.1 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.8 kB
build/block-library/style.css	14.8 kB
build/block-library/theme-rtl.css	688 B
build/block-library/theme.css	693 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/blocks/index.min.js	51.8 kB
build/commands/index.min.js	15.6 kB
build/commands/style-rtl.css	921 B
build/commands/style.css	918 B
build/components/index.min.js	223 kB
build/components/style-rtl.css	11.8 kB
build/components/style.css	11.8 kB
build/compose/index.min.js	12.6 kB
build/core-commands/index.min.js	2.77 kB
build/core-data/index.min.js	72.8 kB
build/customize-widgets/index.min.js	12.1 kB
build/customize-widgets/style-rtl.css	1.32 kB
build/customize-widgets/style.css	1.32 kB
build/data-controls/index.min.js	640 B
build/data/index.min.js	8.93 kB
build/date/index.min.js	17.9 kB
build/deprecated/index.min.js	451 B
build/dom-ready/index.min.js	324 B
build/dom/index.min.js	4.65 kB
build/edit-post/classic-rtl.css	544 B
build/edit-post/classic.css	545 B
build/edit-post/index.min.js	23.8 kB
build/edit-post/style-rtl.css	5.64 kB
build/edit-post/style.css	5.63 kB
build/edit-site/style-rtl.css	15.3 kB
build/edit-site/style.css	15.3 kB
build/edit-widgets/index.min.js	17.3 kB
build/edit-widgets/style-rtl.css	4.22 kB
build/edit-widgets/style.css	4.22 kB
build/editor/index.min.js	63.9 kB
build/editor/style-rtl.css	5.32 kB
build/editor/style.css	5.32 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	7.89 kB
build/format-library/style-rtl.css	478 B
build/format-library/style.css	477 B
build/hooks/index.min.js	1.55 kB
build/html-entities/index.min.js	448 B
build/i18n/index.min.js	3.58 kB
build/interactivity/file.min.js	447 B
build/interactivity/image.min.js	1.67 kB
build/interactivity/index.min.js	12.8 kB
build/interactivity/navigation.min.js	1.15 kB
build/interactivity/query.min.js	740 B
build/interactivity/router.min.js	1.29 kB
build/interactivity/search.min.js	618 B
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.74 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.11 kB
build/list-reusable-blocks/style-rtl.css	836 B
build/list-reusable-blocks/style.css	836 B
build/media-utils/index.min.js	2.9 kB
build/modules/importmap-polyfill.min.js	12.2 kB
build/notices/index.min.js	948 B
build/nux/index.min.js	2 kB
build/nux/style-rtl.css	735 B
build/nux/style.css	732 B
build/patterns/index.min.js	5.78 kB
build/patterns/style-rtl.css	540 B
build/patterns/style.css	539 B
build/plugins/index.min.js	1.8 kB
build/preferences-persistence/index.min.js	2.05 kB
build/preferences/index.min.js	2.82 kB
build/preferences/style-rtl.css	698 B
build/preferences/style.css	700 B
build/primitives/index.min.js	975 B
build/priority-queue/index.min.js	1.52 kB
build/private-apis/index.min.js	1 kB
build/react-i18n/index.min.js	623 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.78 kB
build/redux-routine/index.min.js	2.7 kB
build/reusable-blocks/index.min.js	2.72 kB
build/reusable-blocks/style-rtl.css	243 B
build/reusable-blocks/style.css	243 B
build/rich-text/index.min.js	10.4 kB
build/router/index.min.js	1.79 kB
build/server-side-render/index.min.js	1.95 kB
build/shortcode/index.min.js	1.39 kB
build/style-engine/index.min.js	2.08 kB
build/token-list/index.min.js	582 B
build/url/index.min.js	3.72 kB
build/vendors/inert-polyfill.min.js	2.48 kB
build/vendors/react-dom.min.js	41.8 kB
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	957 B
build/warning/index.min.js	249 B
build/widgets/index.min.js	7.21 kB
build/widgets/style-rtl.css	1.15 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.02 kB

_{compressed-size-action}

[artemiomorales]

Here's a detailed video going over both the baseline behavior we're trying to fix and the ideas proposed in this PR:

https://github.com/WordPress/gutenberg/assets/5360536/e9225004-6606-4c97-a994-b5a0469e5d0a

It seems that overriding the onReplace method could be a means of fixing this bug. That prevents the extra block from getting created at least. However, I'm still unable to set focus to the regular newly created block on Enter; when I try to do so with the following code, it conflicts with some other logic in the codebase, not sure where, that prevents the paragraph from being created at all:

const onReplaceCallback = shouldDisableEditing
	? ( blocks ) => {
			// Find block that does not have the clientId
			const blockToFocus = blocks.find(
				( block ) => block.clientId !== clientId
			);

			selectBlock( blockToFocus.clientId );
	  }
	: onReplace;

I've been looking at this for a couple of days and am feeling stuck. I'll keep looking at it but any guidance or pointers on the best way to move forward would be much appreciated!

[ellatrix]

Wouldn't omitting onReplace fix everything?

[artemiomorales]

Wouldn't omitting onReplace fix everything?

@ellatrix Setting onReplace to undefined or removing it doesn't work unfortunately. After doing that, pressing Enter ends up duplicating the contents of the bound block incorrectly and still not setting focus to the new block:

[artemiomorales]

UPDATE: I figured it out; this comment is no longer relevant and will be hidden.

I just realized that the code that governs the insertion of blocks when focused on elements with contentEditable = false is housed in use-selected-block-event-handlers.js.

So after overriding the onReplace function in Rich Text, we need to continue inserting a default block, but then also find a way to immediately set focus to it.

I think I may need to do a batch() of the actions? I'm not sure how to do this yet in the context of useEventHandlers in the file linked above. Any ideas or guidance much appreciated!

[github-actions[bot]]

Flaky tests detected in 5df6af49bb9dcf9bb8093164bb242df79aa6f49f. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7995085102 📝 Reported issues:

• #59008 in /test/e2e/specs/editor/blocks/navigation.spec.js

[artemiomorales]

Note: Using the NVDA screen reader will cause the expected behavior when pressing Enter on a bound block — namely, inserting a new block and setting focus to it — to fail. This PR does not address that.

Pressing Enter while on the text of a bound Button block will also still fail.

I'll create separate issues to tackle those items.

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: artemiomorales <[email protected]>
Co-authored-by: SantosGuillamot <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[michalczaplinski]

I've tested it with the Paragraph, Image and Button blocks and works fine! 👍

I would defer to Ella's judgement on whether adding target.blur() is an issue or not (RE: this comment)

[artemiomorales]

I've tested it with the Paragraph, Image and Button blocks and works fine! 👍

@michalczaplinski Great! Out of curiosity, what did your testing with the Image and Button blocks look like? Since those aren't strictly RichText elements, I don't believe the shouldDisableEditing logic would apply to them, with the exception of the text field on the button block.

In my testing, I do know that pressing Enter on a bound text attribute of the Button block doesn't work as expected — no new block is added, focus doesn't switch, nothing happens. Do you see that as well?

[michalczaplinski]

@artemiomorales I followed the usual testing instructions:

1. Create some custom fields

2. Inserting a paragraph | button | image block and adding the metadata like:

   {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"text_custom_field"}}}}}
   

I've just retested again and realized that you're right on both counts 🙂 :

1. The issue does not affect the Image so no wonder it appeared to work.
2. For the Button block, the problem still persists exactly like you described ("pressing Enter on a bound text attribute of the Button block doesn't work as expected — no new block is added, focus doesn't switch, nothing happens"). I think I accidentally selected the parent "Buttons" block instead previously.

Sorry for adding unnecessary noise here!

[SantosGuillamot]

Pressing Enter while on the text of a bound Button block will also still fail.

I'll create separate issues to tackle those items.

Apart from the other comments shared, I've been taking a look at the implementation and I believe the button block failing could be related to this pull request. If I am not mistaken, before this pull request, pressing enter in a button would duplicate the button with the bindings (which is not correct). And at this pull request, it just does nothing.

I think it is caused by this early return: link. I'm wondering if that could be considered the final solution or just a workaround that could cause issues like this in the future. Anyway, I don't have enough background to answer that question 😄

Maybe we could explore the possibility of adapting the split-value function, or the onReplace function?

Apart from that, regarding the button, I think there is an issue with this logic not being always 0, which makes the button non-selectable when contenteditable is false.

[artemiomorales]

Apart from the other comments shared, I've been taking a look at the implementation and I believe the button block failing could be related to this pull request. If I am not mistaken, before this pull request, pressing enter in a button would duplicate the button with the bindings (which is not correct). And at this pull request, it just does nothing.

@SantosGuillamot I've tested the button behavior on trunk, and this is what it currently looks like when the text attribute is bound and Enter is pressed — nothing happens:

https://github.com/WordPress/gutenberg/assets/5360536/9f257f52-4695-4cc7-bcf1-0a9055a755b9

With that in mind, since this PR already improves the Paragraph experience, I'm inclined to treat the Button experience as a separate issue so we can continue iterating. What do you think?

[artemiomorales]

With that in mind, since this PR already improves the Paragraph experience, I'm inclined to treat the Button experience as a separate issue so we can continue iterating. What do you think?

@SantosGuillamot I did a little more digging and it looks like getting the button to work will likely require some combination of 1.) forcing focus on the Rich Text component when it's bound, and 2.) modifying the onSplit prop passed from the Button block.

[SantosGuillamot]

I believe that, regarding the button, I believe there are two issues:

• It seems the button can't be focused when contenteditable is false because the tabindex is never 0 here.

  If I hardcode it to 0 (simulating we fix that part) in trunk, it just adds a new button with the same content. That's what I was trying to say before.

  In the current status of this pull request, if I hardcode it to 0 again, it doesn't work because of the solution added to return early. If I comment those lines, it adds a new button (although it still adds the old content).

• Even if we fix the first one, we need to adapt somehow whatever happens when you press enter to work properly with bindings. I feel it could be the same solution for any rich text like the paragraph, heading, or button. That's why I wanted to understand better if we should modify the the split-value function, or the onReplace function that are called during that workflow. I'm a bit concerned that the current workaround might cause some issues, like the one with the button, that we aren't aware of.

I must say that I don't have enough expertise with the Rich Text, so it is hard to say if it is enough or how it should be approached. I just wanted to share how I see it right now.

[SantosGuillamot]

I was testing it a bit and, in case it helps to push this forward:

At this part of the logic, doing onSplitAtEnd() if shouldDisableEditing is true, seems to work for the paragraph but not the button. But maybe it is another way of making it work and adapt the button somehow.

if ( shouldDisableEditing && onSplitAtEnd ) {
	onSplitAtEnd();
} else if ( event.shiftKey ) {
    ...
}

[SantosGuillamot]

After a few more testing, I wanted to share something that works. Although I don't feel confident it is the right solution.

First, if the rich text is disabled, we change the behavior by adding this condition at this point:

if ( shouldDisableEditing ) {
	if ( onSplitAtEnd ) {
		onSplitAtEnd();
	} else {
		_value.text = '';
		splitValue( {
	  	  value: _value,
		  onReplace,
		  onSplit,
		} );
	}
}

Then, I think it makes sense to remove the metadata when we add new block. Right now, and independently of the bindings, we preserve the metadata after adding a new button when clicking "Enter". This means that if I rename a button and click enter, it shares the new name with the new block, which I would say is not expected.

I've hardcoded a fix by adding the following line at this point:

delete replacementBlocks[ 1 ]?.attributes?.metadata;

By the way, I run the tests with tabindex set to 0 assuming that is a different issue.

[SantosGuillamot]

Testing the first issue, "the rich text in the button is not focusable", a bit more:

I believe this is caused because the tabindex=0 reads the props.tabindex, and in the case of the button, that prop is passed to the parent div: link and not the rich text. That causes that, when the RichText in the button tries to use it here, it doesn't exist.

With that in mind, I believe it is safe to assume that when shouldDisable editing is true, we always want the tabIndex 0. At least for now. Something like this:

tabIndex={
  shouldDisableEditing
  ? 0
  : props.tabIndex === 0
  ? null
  : props.tabIndex
}

If we go that path, then only the second issue remains: "fix what happens when user press enters". I'll take a look at that now but I believe something like what I explained in this comment could work for both the paragraph and the button, at least for the initial version before 6.5.

[SantosGuillamot]

@artemiomorales I hope you don't mind I made a couple of commits with a potential fix for the two problems I was facing. Feel free to revert them if they don't make sense.

1. The button block is not focusable when it has bindings.

This should be solved with this commit. It justs always set the tabindex to 0 when the rich text is disabled.

2. The paragraph, heading, and button blocks don't behave as expected when pressing enter.

This could be solved with this commit. Although I am not sure if it is good enough as a final solution.

The idea is to use the same onSplit that is being used in the paragraph block for the button. That way, we don't preserve the metadata and it seems to work as expected.

With that change, we don't need to return earlier as we were doing, and I believe we can just call the splitValue function with an empty text when shouldDisableEditing is true: link.

If I am not mistaken, as we are wrapping the conditional under the shouldDisableEditing variable, it shouldn't affect other blocks.

[gziolo]

I'm not entirely sure what type of changes were applied in two places: here and here. However, I can confirm that everything works as expected. We could also further improve the implementation for the useShouldDisableEditing hook as explained here to ensure it hits the store only when it's essential by leveraging the fact that every RichText in supported core blocks passes the name of the attribute as identifier prop.

[SantosGuillamot]

I tried to explain how I understood the split function and why these changes could be made in this comment and here. Let me know if that makes sense.

As explained in this comment, there is yet another issue with metadata being preserved when you actually split the value. But that's not related to this specific PR.

[gziolo]

It would be great to rebase the branch to see the results from CI.

[SantosGuillamot]

It would be great to rebase the branch to see the results from CI.

I resolved the conflicts and rebased. Let's see if tests pass.

[ellatrix]

Alternative PR #59320

[artemiomorales]

Closed in favor of https://github.com/WordPress/gutenberg/pull/59320

[getdave]

I removed the outdated Backport to WP Beta/RC label from this PR as it was not merged.