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.

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

Inserter: Fix 'Browse All' in Quick Inserter #26443

Merged
merged 10 commits into from
Nov 10, 2020

Conversation

noisysocks
Copy link
Member

Fixes #24403.
Related to #24285.

insertion-point

Maintain the insertion point in @wordpress/block-editor state when moving from the Quick Inserter to the Inserter.

This fixes a bug (#24403) where the insertion point is wrong after clicking a block appender (e.g. in a Columns block) and selecting Browse All.

Care is taken to not regress a previous bug (#24262) where the insertion point was wrong after clicking an inline insertion button and selecting Browse All.

I re-used the existing insertionPoint state tree so as to minimise the amount of new actions and selectors needed. This means we have three insertion point actions:

  • setInsertionPoint: Sets where the inserter will default to inserting blocks.
  • showInsertionPoint: Sets where the inserter will default to inserting blocks and display this to the user.
  • hideInsertionPoint: Hides the insertion point from the user.

The insertion point is cleared when block selection changes. This is needed for the Site Editor where the Inserter is persistent.

Testing

A regression E2E test has been added. This complements the one added in #24396.

The manual flows that I checked are:

  1. Create a new post.
  2. Insert a Columns block with a paragraph in the first column.
  3. Insert a block at the end of the post.
  4. Click the block appender in the empty column.
  5. Select Browse All.
  6. Click on a block. It should be inserted into the empty column.
  7. Click on the inline inserter that appears when you hover over the paragraph in the first column.
  8. Select Browse All.
  9. Click on a block. It should be inserted into the first column.

And:

  1. Go to the experimental site editor.
  2. Hover over a block and click on the inline inserter button that appears.
  3. Select Browse All.
  4. Click on a block. It should be inserted into the location you clicked on.
  5. Hover over a block and click on the inline inserter button that appears.
  6. Select Browse All.
  7. Select a different block somewhere else in the page.
  8. Click on a block. It should be inserted after the block you selected.

@noisysocks noisysocks added [Type] Bug An existing feature does not function as intended [Feature] Inserter The main way to insert blocks using the + button in the editing interface Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 26, 2020
}
} else {
// Otherwise, we're in "auto mode" where the insertion point is
// decided by getBlockInsertionPoint().
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we can simplify further and make this the default mode: Maybe by "setting the insertion point" when we open the inserter (all inserters)

Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a really tough problem to solve.

Ideally the insertion point would be deterministic, derived from other state, but realistically there's probably no way to do that reliably with the way Browse all opens a completely unrelated component.

So this seems like a logical step, and especially so given there's already state used for showing the blue line.

setTimeout( () => {
setInserterIsOpened( true );
} );
setInsertionPoint( rootClientId, blockIndex );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency it feels to me like setInsertionPoint should be set when an appender button is clicked rather than 'Browse All', otherwise the sidebar block library becomes a special case that uses this state, while the quick inserter doesn't.

Having said that, I haven't looked too deeply into how the quick inserter works, so could be wrong on this.

case 'REPLACE_INNER_BLOCKS':
case 'INSERT_BLOCKS':
case 'REMOVE_BLOCKS':
case 'REPLACE_BLOCKS':
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be easy to miss adding an action here that should clear this state 😬

The potential issue with holding the insertion point as state will be the potential for the block list to become out of sync with the insertion point state.

I found a similar issue here with block selection (note to self- finalize this PR) - #21598

Should RESET_BLOCKS be here too?

destRootClientId = getBlockRootClientId( end );
let _destinationRootClientId, _destinationIndex;

if ( rootClientId || insertionIndex || clientId || isAppender ) {
Copy link
Contributor

@talldan talldan Oct 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a relevant comment here about these props - #25763 (comment).

So the idea would to refactor inserters to just use rootClientId and blockIndex. The insertion point state seems to fit well with that, which is nice (no action required here 😄 ).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that idea. It's definitely a little crazy right now.

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and it seems to work well 👍

);
blockIndex: getBlockIndex( clientId, rootClientId ),
};
}, [] );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this have clientId, rootClientId as dependencies?

Copy link
Contributor

@talldan talldan Nov 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 0ac181d

// Otherwise, we're in "auto mode" where the insertion point is
// decided by getBlockInsertionPoint().

_destinationRootClientId = getBlockInsertionPoint()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can call getBlockInsertionPoint only once here and get its results then.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in e707a30

@ellatrix
Copy link
Member

What's stopping us from rendering the sidebar inserter in the same react tree as the quick inserter, and creating a sidebar slot to render it there for the DOM? A similar thing is doen for the quick inserter. It as also rendered in a Popover slot, but part of the block react tree.

@noisysocks
Copy link
Member Author

noisysocks commented Oct 27, 2020

What's stopping us from rendering the sidebar inserter in the same react tree as the quick inserter, and creating a sidebar slot to render it there for the DOM?

You're always thinking with portals, @ellatrix! 🙂

It's an interesting idea. So in effect, edit-post, edit-site and edit-widgets would provide the <Fill> and then it's up to the ➕ button and BlockAppender to render the actual Inserter.

I'll play with it a little. I don't see why it couldn't work but if working on this bug has taught me anything it's that there are a lot more edge cases than you'd think.

@noisysocks
Copy link
Member Author

noisysocks commented Oct 27, 2020

I tried a Slot/Fill approach and ran into a problem regarding closing the inserter sidebar.

Say that a user clicks on a block appender and then selects Browse All. ButtonBlockAppender renders a full InserterLibrary inside a Fill adjacent to the QuickInserter. This InserterLibrary appears in the left sidebar via a Slot that exists in edit-post's Layout.

Now, say that the user closes the left sidebar by e.g. opening the right sidebar, clicking the + button, or clicking the X button (only appears on mobile).

Or, alternatively, say that the user decides to not insert a block and instead move their cursor to the bottom of the post.

In both cases, we need to unmount the <Fill><InserterLibrary /></Fill> from ButtonBlockAppender so that the sidebar closes and the inserter resets to its initial state. How can ButtonBlockAppender know to do this, though?

@ellatrix
Copy link
Member

In both cases, we need to unmount the from ButtonBlockAppender so that the sidebar closes and the inserter resets to its initial state. How can ButtonBlockAppender know to do this, though?

It would fill only if the appender is focussed right?

@noisysocks
Copy link
Member Author

It would fill only if the appender is focussed right?

No, because focus moves to the left sidebar's search field. If we unmount the Fill when the appender is unfocused then users won't be able to search in the full block library.

@ellatrix
Copy link
Member

Could something like the click outside or focus outside HoC work? I guess the behaviour is much like a popover or modal, just positioned differently.

@noisysocks noisysocks added Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta and removed Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 29, 2020
@PHuhn
Copy link

PHuhn commented Nov 5, 2020

Hey:
It seems you have stopped this fix and moved it to Beta/RC.
I cannot speak for anybody but myself, but the latest release added drag-n-drop, and that gives me a work-around for the improper placement, so I can drag into a Group block.

@tellthemachines
Copy link
Contributor

Hi, would any of the reviewers of this PR be interested in helping move it forward? It seems we got stuck between the current (working) solution and a (still hypothetical) completely different one. If no one is able to help, what are the thoughts on merging more or less as-is and refactoring later if needed?

@youknowriad
Copy link
Contributor

I agree with @tellthemachines that we should favor solving the issue first before further refactorings of how the inserter is rendered.

@talldan
Copy link
Contributor

talldan commented Nov 9, 2020

I'm happy to have a go at addressing some of the feedback.

Probably worth making the selectors/actions unstable if there's the potential for removing them, so I'll do that to.

Maintain the insertion point in @wordpress/block-editor state when
moving from the Quick Inserter to the Inserter.

This fixes a bug where the insertion point is wrong after clicking a
block appender and selecting 'Browse All'.

Care is taken to not regress a previous bug where the insertion point is
wrong after clicking an inline insertion button and selecting 'Browse
ALl'.
@talldan talldan force-pushed the fix/browse-all-in-quick-inserter branch from f6e1ed1 to a473f2e Compare November 9, 2020 08:08
@github-actions
Copy link

github-actions bot commented Nov 9, 2020

Size Change: -814 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/annotations/index.js 3.77 kB -5 B (0%)
build/api-fetch/index.js 3.42 kB -28 B (0%)
build/autop/index.js 2.83 kB -3 B (0%)
build/block-directory/index.js 8.71 kB -10 B (0%)
build/block-editor/index.js 133 kB +261 B (0%)
build/block-editor/style-rtl.css 11.2 kB -28 B (0%)
build/block-editor/style.css 11.1 kB -29 B (0%)
build/block-library/editor-rtl.css 8.91 kB -51 B (0%)
build/block-library/editor.css 8.91 kB -46 B (0%)
build/block-library/index.js 147 kB -45 B (0%)
build/block-library/style-rtl.css 8.1 kB +70 B (0%)
build/block-library/style.css 8.1 kB +71 B (0%)
build/block-serialization-default-parser/index.js 1.87 kB -8 B (0%)
build/block-serialization-spec-parser/index.js 3.06 kB -41 B (1%)
build/blocks/index.js 48 kB -164 B (0%)
build/components/index.js 171 kB -299 B (0%)
build/compose/index.js 9.87 kB +62 B (0%)
build/core-data/index.js 12.5 kB -34 B (0%)
build/data/index.js 8.74 kB -58 B (0%)
build/date/index.js 31.8 kB -13 B (0%)
build/dom/index.js 4.45 kB -2 B (0%)
build/edit-navigation/index.js 11.1 kB -47 B (0%)
build/edit-post/index.js 305 kB -95 B (0%)
build/edit-post/style-rtl.css 6.41 kB +5 B (0%)
build/edit-post/style.css 6.39 kB +1 B
build/edit-site/index.js 22.5 kB -13 B (0%)
build/edit-site/style-rtl.css 3.91 kB -3 B (0%)
build/edit-site/style.css 3.91 kB -4 B (0%)
build/edit-widgets/index.js 26.2 kB -111 B (0%)
build/edit-widgets/style-rtl.css 3.13 kB +3 B (0%)
build/edit-widgets/style.css 3.13 kB +4 B (0%)
build/editor/index.js 42.5 kB -271 B (0%)
build/element/index.js 4.62 kB -27 B (0%)
build/format-library/index.js 6.86 kB +229 B (3%)
build/hooks/index.js 2.16 kB -3 B (0%)
build/keyboard-shortcuts/index.js 2.52 kB +1 B
build/keycodes/index.js 1.94 kB -1 B
build/list-reusable-blocks/index.js 3.1 kB -6 B (0%)
build/media-utils/index.js 5.31 kB -25 B (0%)
build/notices/index.js 1.77 kB -16 B (0%)
build/nux/index.js 3.4 kB -19 B (0%)
build/plugins/index.js 2.56 kB +5 B (0%)
build/redux-routine/index.js 2.84 kB -9 B (0%)
build/reusable-blocks/index.js 3.05 kB -2 B (0%)
build/rich-text/index.js 13.4 kB -7 B (0%)
build/server-side-render/index.js 2.77 kB -2 B (0%)
build/viewport/index.js 1.84 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/data-controls/index.js 771 B 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 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/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 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/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@talldan talldan force-pushed the fix/browse-all-in-quick-inserter branch from a473f2e to 4b7fdeb Compare November 9, 2020 09:23
@talldan talldan force-pushed the fix/browse-all-in-quick-inserter branch from 4b7fdeb to 90a1820 Compare November 9, 2020 09:34
*
* @return {Object} Insertion point object with `rootClientId`, `index`.
* @return {Object} Insertion point object with `rootClientId` and `index`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously in this PR getBlockInsertionPoint also returned isVisible, but I've removed that as it seems to be unused.

@talldan
Copy link
Contributor

talldan commented Nov 9, 2020

I need to look into the e2e test failures, seems like I broke something 😄

edit: ah yep, the getBlockInsertionPoint selector checks for a null, but I changed the reducer to default to {}. Seems easiest to change it back to null.

@tellthemachines
Copy link
Contributor

I'm running into a weird bug while testing this branch:

  1. insert a columns block anywhere on the page
  2. click the inserter inside the first column and the click "Browse all"
  3. hover over the block directory sidebar
  4. all the blocks disappear, leaving the Column block as only option

Seems like the insertion point is being set inside the Columns block instead of the Column.

Other than that, testing in both post and site editors shows this working much better than on master.

@talldan
Copy link
Contributor

talldan commented Nov 10, 2020

@tellthemachines Yeah, I can reproduce, slightly different results, the available blocks was initially correct, but then changed to just column when my mouse left the block library.

@talldan
Copy link
Contributor

talldan commented Nov 10, 2020

Ah yep, the HIDE_INSERTION_POINT action is currently clearing the insertionPoint state, and it's called whenever hover leaves a block in the block library. It should just set insertionPointVisibility to false, but not alter the rootClientId or index.

938c7a5 fixes.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Everything is working well now ✅

@talldan
Copy link
Contributor

talldan commented Nov 10, 2020

🕺

@talldan talldan merged commit 7f1fac9 into master Nov 10, 2020
@talldan talldan deleted the fix/browse-all-in-quick-inserter branch November 10, 2020 04:55
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 10, 2020
@noisysocks
Copy link
Member Author

Thanks for picking this up @talldan!

tellthemachines pushed a commit that referenced this pull request Nov 11, 2020
* Inserter: Fix 'Browse All' in Quick Inserter

Maintain the insertion point in @wordpress/block-editor state when
moving from the Quick Inserter to the Inserter.

This fixes a bug where the insertion point is wrong after clicking a
block appender and selecting 'Browse All'.

Care is taken to not regress a previous bug where the insertion point is
wrong after clicking an inline insertion button and selecting 'Browse
ALl'.

* Inserter: Fix typo

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* Call getBlockInsertionPoint once

* Add useSelect dependencies

* Make setInsertionPoint unstable

* Avoid setting `isVisible` state when `SET_INSERTION_POINT` is triggered

* Make index required and clarify rootClientId usage

* Split insertionPoint into two reducers

* Fix getInsertionPoint selector that expects default state of reducer to be null

* Avoid resetting insertionPoint state on HIDE_INSERTION_POINT

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
tellthemachines added a commit that referenced this pull request Nov 12, 2020
* Cover block: Restore default overlay background (#26569)

* Restore default Cover overlay background

The default Cover block overlay background was removed. This changed the
style of existing blocks on existing sites.

Restore the default background in such a way that it does not conflict
with theme-provided background-color styles and there is no need to
artificially add extra specificity.

Fix regression: #26545

* Limit the interface skeleton to a max width of 100% to prevent some blocks managing to exceed the width (#26552)

* Cover Block: Restore opacity controls (#26625)

* Fix image block centering when resizing to a smaller size (#26376)

* Fix image block centering when resizing to a smaller size

* Revert previous 100% width fix

* Remove display: table when image block is resized to avoid centering of block

* Match frontend classes for alignment in editor

* Gallery: Remove caption fallback for alt attribute (#26676)

* Fix quote block default alignment (#26680)

* Gallery: Remove obsolete deprecation entry (#26736)

* Do not apply text color if it is being overriden (#24626)

* Fix: Preset colors don't work on button block style outline (#26707)

* Tests: Add fixture for Column deprecation (#26774)

* Fix/column width units (#26757)

* Fix issues with different units in column widths

* Columns with fixed width should keep width on recalculation

* Address review feedback

* fix undefined index notice in Social Link Block (#25663)

* fix undefined index notice

* use isset instead of array_key_exists check

* Update packages/block-library/src/social-link/index.php

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

* Adds in missing styling for toolbar when using text-only setting (#26769)

* Adds in missing styling for toolbar when using text-only setting

* Increases margin

* Moves style to correct file

* Inserter: Fix 'Browse All' in Quick Inserter (#26443)

* Inserter: Fix 'Browse All' in Quick Inserter

Maintain the insertion point in @wordpress/block-editor state when
moving from the Quick Inserter to the Inserter.

This fixes a bug where the insertion point is wrong after clicking a
block appender and selecting 'Browse All'.

Care is taken to not regress a previous bug where the insertion point is
wrong after clicking an inline insertion button and selecting 'Browse
ALl'.

* Inserter: Fix typo

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* Call getBlockInsertionPoint once

* Add useSelect dependencies

* Make setInsertionPoint unstable

* Avoid setting `isVisible` state when `SET_INSERTION_POINT` is triggered

* Make index required and clarify rootClientId usage

* Split insertionPoint into two reducers

* Fix getInsertionPoint selector that expects default state of reducer to be null

* Avoid resetting insertionPoint state on HIDE_INSERTION_POINT

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Co-authored-by: Jon Surrell <jon.surrell@automattic.com>
Co-authored-by: Jacopo Tomasone <Copons@users.noreply.github.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Bernie Reiter <ockham@raz.or.at>
Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>
Co-authored-by: Oliver Juhas <webmandesign@users.noreply.github.com>
Co-authored-by: Jorge Costa <jorge.costa@automattic.com>
Co-authored-by: Fabian Kägy <mail@fabian-kaegy.de>
Co-authored-by: Tammie Lister <tammie@automattic.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 16, 2020
@ellatrix ellatrix mentioned this pull request Mar 26, 2021
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inserter: Inner blocks not inserted at correct location
7 participants