Change replaceInnerBlocks updateSelection property to false #26312

ntsekouras · 2020-10-20T11:37:24Z

Description

Based on this comment: #26267 (review)

This PR changes the default value of action replaceInnerBlocks's updateSelection property to false. This change propagates to changing the default value of InnerBlock's templateInsertUpdatesSelection to false as well.

This change affects whether the selection is updated or not, when child blocks in the template are inserted.

Most blocks that use InnerBlocks would set this as false, thus making this change the preferred default value.

How has this been tested?

Affected blocks:

Query
Columns
Column
Navigation
Media & Text
Buttons
Cover

Hooks

useBlockSync

Native files/Blocks/Components changed

Media & Text
BlockVariationPicker
Columns
Buttons
Cover

You can test this by creating the above affected blocks on master and the on this branch. Block focus should be identical.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-10-20T11:46:31Z

Size Change: -19 B (0%)

Total Size: 1.21 MB

Filename	Size	Change
`build/block-editor/index.js`	130 kB	-11 B (0%)
`build/block-library/index.js`	146 kB	-8 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.78 kB	0 B
`build/api-fetch/index.js`	3.45 kB	0 B
`build/autop/index.js`	2.84 kB	0 B
`build/blob/index.js`	665 B	0 B
`build/block-directory/index.js`	8.72 kB	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-editor/style-rtl.css`	11.1 kB	0 B
`build/block-editor/style.css`	11.1 kB	0 B
`build/block-library/editor-rtl.css`	8.97 kB	0 B
`build/block-library/editor.css`	8.97 kB	0 B
`build/block-library/style-rtl.css`	7.83 kB	0 B
`build/block-library/style.css`	7.84 kB	0 B
`build/block-library/theme-rtl.css`	837 B	0 B
`build/block-library/theme.css`	838 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	48.1 kB	0 B
`build/components/index.js`	172 kB	0 B
`build/components/style-rtl.css`	15.2 kB	0 B
`build/components/style.css`	15.2 kB	0 B
`build/compose/index.js`	9.81 kB	0 B
`build/core-data/index.js`	12.3 kB	0 B
`build/data-controls/index.js`	772 B	0 B
`build/data/index.js`	8.77 kB	0 B
`build/date/index.js`	31.8 kB	0 B
`build/deprecated/index.js`	768 B	0 B
`build/dom-ready/index.js`	571 B	0 B
`build/dom/index.js`	4.46 kB	0 B
`build/edit-navigation/index.js`	11.2 kB	0 B
`build/edit-navigation/style-rtl.css`	881 B	0 B
`build/edit-navigation/style.css`	885 B	0 B
`build/edit-post/index.js`	306 kB	0 B
`build/edit-post/style-rtl.css`	6.4 kB	0 B
`build/edit-post/style.css`	6.39 kB	0 B
`build/edit-site/index.js`	22.1 kB	0 B
`build/edit-site/style-rtl.css`	3.88 kB	0 B
`build/edit-site/style.css`	3.88 kB	0 B
`build/edit-widgets/index.js`	26.4 kB	0 B
`build/edit-widgets/style-rtl.css`	3.12 kB	0 B
`build/edit-widgets/style.css`	3.12 kB	0 B
`build/editor/editor-styles-rtl.css`	480 B	0 B
`build/editor/editor-styles.css`	482 B	0 B
`build/editor/index.js`	43.1 kB	0 B
`build/editor/style-rtl.css`	3.85 kB	0 B
`build/editor/style.css`	3.85 kB	0 B
`build/element/index.js`	4.65 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/index.js`	7.7 kB	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	2.13 kB	0 B
`build/html-entities/index.js`	623 B	0 B
`build/i18n/index.js`	3.57 kB	0 B
`build/is-shallow-equal/index.js`	712 B	0 B
`build/keyboard-shortcuts/index.js`	2.52 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.11 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.34 kB	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.42 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.43 kB	0 B
`build/priority-queue/index.js`	791 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/reusable-blocks/index.js`	3.06 kB	0 B
`build/rich-text/index.js`	13.2 kB	0 B
`build/server-side-render/index.js`	2.77 kB	0 B
`build/shortcode/index.js`	1.69 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/viewport/index.js`	1.84 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.22 kB	0 B

_{compressed-size-action}

gziolo

One of the plugins used with e2e tests need to be updated to ensure that old behavior is preserved:

gutenberg/packages/e2e-tests/plugins/inner-blocks-templates/index.js

Line 67 in 9ce9380

template: TEMPLATE_PARAGRAPH_PLACEHOLDER,

templateInsertUpdatesSelection should be set to true there.

It feels like it's a good direction. In most of the cases, the changes applied, they align with the most popular behavior.

packages/block-editor/src/store/actions.js

packages/block-library/src/cover/edit.native.js

guarani · 2020-10-22T13:30:42Z

@ntsekouras thanks for the heads-up about the *.native.js changes. I smoke tested Media & Text, Columns, Buttons and Cover on mobile and everything looks OK 👍. The changes affecting native files appear to be only due to templateInsertUpdatesSelection previously defaulting to true and now defaulting to false.

gziolo · 2020-10-28T09:08:28Z

It looks like this PR needs to be rebased.

I also marked it as needing a short dev note for WordPress 5.7 release. Can you compile something upfront so the process is more streamlined?

ntsekouras · 2020-11-02T08:20:22Z

Dev Note for this change. (thank you @gziolo for the intro)

Inner Blocks API Changes

We noticed that the majority of block authors prefer to keep the focus on the parent block upon insertion in the editor rather than move it to one of the child blocks. Prior to the changes introduced the default behavior was the latter, so we decided to change it to follow the more popular choice that is going to simplify API usage. To accomplish that we had to change the definition of the following parts of API:

InnerBlock component
useInnerBlocksProps hook
replaceInnerBlocks action

`InnerBlock` component and `useInnerBlocksProps` hook

Both handle the focus on the blocks with templateInsertUpdatesSelection property. If you want to keep the focus on the parent you can omit this property.

If you want to move the focus to the first child block you have to set this property to true. Examples:

<InnerBlocks template={ [ [ 'core/heading' ] ] }  templateInsertUpdatesSelection/>

const innerBlocksProps = useInnerBlocksProps(
	{       className: 'wp-block-cover__inner-container'       },
	{
		template: [ [ 'core/heading' ] ],
		templateInsertUpdatesSelection: true,
	}
);

`replaceInnerBlocks` action

Reference: https://developer.wordpress.org/block-editor/data/data-core-block-editor/#replaceInnerBlocks

This action handles focus with the third argument updateSelection. If you want to keep the focus on the parent you can skip this argument when calling replaceInnerBlocks.

If you want to move the focus to the first child block you have to pass this argument with true value. Examples:

replaceInnerBlocks( rootClientId, blocks, true )

gziolo · 2020-11-02T09:43:50Z

@ntsekouras, how do you feel about using the following intro to this dev note that explains the reasoning behind these changes:

Inner Blocks API Changes

We noticed that the majority of block authors prefer to keep the focus on the parent block upon insertion in the editor rather than move it to one of the child blocks. Prior to the changes introduced the default behavior was the latter, so we decided to change it to follow the more popular choice that is going to simplify API usage. To accomplish that we had to change the definition of the following parts of API:

InnerBlock component
useInnerBlocksProps hook
replaceInnerBlocks action

gziolo

This looks good, thank you for all the work on these changes.

ntsekouras added the [Package] Block editor /packages/block-editor label Oct 20, 2020

ntsekouras self-assigned this Oct 20, 2020

gziolo self-requested a review October 20, 2020 11:44

gziolo reviewed Oct 21, 2020

View reviewed changes

packages/block-editor/src/store/actions.js Show resolved Hide resolved

gziolo requested a review from mtias October 21, 2020 13:15

ntsekouras force-pushed the update/templateInsertUpdatesSelection-default-to-false branch from 0872c11 to 12ab49e Compare October 22, 2020 08:07

ntsekouras marked this pull request as ready for review October 22, 2020 10:29

ntsekouras requested review from ajitbohra, chrisvanpatten, ellatrix, mkaz, nerrad, ntwb, Soean, talldan and youknowriad as code owners October 22, 2020 10:29

gziolo reviewed Oct 22, 2020

View reviewed changes

packages/block-library/src/cover/edit.native.js Outdated Show resolved Hide resolved

gziolo added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Oct 28, 2020

ntsekouras added 8 commits November 2, 2020 09:35

change default + remove previous assignments to false

23050fd

change updateSelection param where needed

a93e9f0

fix unit tests

f4de453

update jsdoc

efed52b

update buttons block

1dbd46e

update Cover block

f8efa58

fix some e2e tests

db98e01

use shorter notation

bb7bcb9

ntsekouras force-pushed the update/templateInsertUpdatesSelection-default-to-false branch from 2e14a44 to bb7bcb9 Compare November 2, 2020 07:38

gziolo approved these changes Nov 2, 2020

View reviewed changes

ntsekouras merged commit 9ee5e36 into master Nov 2, 2020

ntsekouras deleted the update/templateInsertUpdatesSelection-default-to-false branch November 2, 2020 10:28

github-actions bot added this to the Gutenberg 9.3 milestone Nov 2, 2020

noisysocks mentioned this pull request Jan 28, 2021

WP 5.7 Dev Notes #28539

Closed

9 tasks

youknowriad removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 1, 2021

oandregal mentioned this pull request Mar 25, 2022

Quote v2: add transforms #39718

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change replaceInnerBlocks updateSelection property to false #26312

Change replaceInnerBlocks updateSelection property to false #26312

ntsekouras commented Oct 20, 2020 •

edited

Loading

github-actions bot commented Oct 20, 2020 •

edited

Loading

gziolo left a comment •

edited

Loading

guarani commented Oct 22, 2020

gziolo commented Oct 28, 2020

ntsekouras commented Nov 2, 2020 •

edited

Loading

gziolo commented Nov 2, 2020

gziolo left a comment

Change replaceInnerBlocks updateSelection property to false #26312

Change replaceInnerBlocks updateSelection property to false #26312

Conversation

ntsekouras commented Oct 20, 2020 • edited Loading

Description

How has this been tested?

Affected blocks:

Hooks

Native files/Blocks/Components changed

Checklist:

github-actions bot commented Oct 20, 2020 • edited Loading

gziolo left a comment • edited Loading

Choose a reason for hiding this comment

guarani commented Oct 22, 2020

gziolo commented Oct 28, 2020

ntsekouras commented Nov 2, 2020 • edited Loading

Inner Blocks API Changes

InnerBlock component and useInnerBlocksProps hook

replaceInnerBlocks action

gziolo commented Nov 2, 2020

Inner Blocks API Changes

gziolo left a comment

Choose a reason for hiding this comment

ntsekouras commented Oct 20, 2020 •

edited

Loading

github-actions bot commented Oct 20, 2020 •

edited

Loading

gziolo left a comment •

edited

Loading

ntsekouras commented Nov 2, 2020 •

edited

Loading

`InnerBlock` component and `useInnerBlocksProps` hook

`replaceInnerBlocks` action