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

Inserter: fix line to show again #20792

Merged
merged 4 commits into from
Jul 20, 2020
Merged

Inserter: fix line to show again #20792

merged 4 commits into from
Jul 20, 2020

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Mar 11, 2020 •
edited
Loading

Description

Fixes #21475.

Screenshot 2020-07-20 at 17 35 37

How has this been tested?

Screenshots

Types of changes

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.

@ellatrix ellatrix added the [Type] Bug An existing feature does not function as intended label Mar 11, 2020
@ellatrix ellatrix requested a review from jasmussen March 11, 2020 13:47
@ellatrix ellatrix requested a review from youknowriad as a code owner March 11, 2020 13:47
@github-actions
Copy link

github-actions bot commented Mar 11, 2020 •
edited
Loading

Size Change: +70 B (0%)

Total Size: 1.15 MB

Filename Size Change
build/block-editor/index.min.js 125 kB +55 B (0%)
build/block-editor/style-rtl.css 10.8 kB +8 B (0%)
build/block-editor/style.css 10.8 kB +7 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.min.js 1.14 kB 0 B
build/annotations/index.min.js 3.67 kB 0 B
build/api-fetch/index.min.js 3.43 kB 0 B
build/autop/index.min.js 2.82 kB 0 B
build/blob/index.min.js 620 B 0 B
build/block-directory/index.min.js 7.63 kB 0 B
build/block-directory/style-rtl.css 944 B 0 B
build/block-directory/style.css 945 B 0 B
build/block-library/editor-rtl.css 7.58 kB 0 B
build/block-library/editor.css 7.57 kB 0 B
build/block-library/index.min.js 132 kB 0 B
build/block-library/style-rtl.css 7.77 kB 0 B
build/block-library/style.css 7.77 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 B 0 B
build/block-serialization-default-parser/index.min.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.min.js 3.1 kB 0 B
build/blocks/index.min.js 48.3 kB 0 B
build/components/index.min.js 200 kB 0 B
build/components/style-rtl.css 15.6 kB 0 B
build/components/style.css 15.6 kB 0 B
build/compose/index.min.js 9.67 kB 0 B
build/core-data/index.min.js 11.5 kB 0 B
build/data-controls/index.min.js 1.29 kB 0 B
build/data/index.min.js 8.45 kB 0 B
build/date/index.min.js 5.38 kB 0 B
build/deprecated/index.min.js 772 B 0 B
build/dom-ready/index.min.js 568 B 0 B
build/dom/index.min.js 3.23 kB 0 B
build/edit-navigation/index.min.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.min.js 304 kB 0 B
build/edit-post/style-rtl.css 5.61 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/index.min.js 16.8 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.min.js 9.35 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.min.js 45.3 kB 0 B
build/editor/style-rtl.css 3.78 kB 0 B
build/editor/style.css 3.78 kB 0 B
build/element/index.min.js 4.65 kB 0 B
build/escape-html/index.min.js 733 B 0 B
build/format-library/index.min.js 7.72 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.min.js 2.13 kB 0 B
build/html-entities/index.min.js 621 B 0 B
build/i18n/index.min.js 3.56 kB 0 B
build/is-shallow-equal/index.min.js 711 B 0 B
build/keyboard-shortcuts/index.min.js 2.51 kB 0 B
build/keycodes/index.min.js 1.94 kB 0 B
build/list-reusable-blocks/index.min.js 3.12 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.min.js 5.32 kB 0 B
build/notices/index.min.js 1.79 kB 0 B
build/nux/index.min.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.min.js 2.56 kB 0 B
build/primitives/index.min.js 1.4 kB 0 B
build/priority-queue/index.min.js 789 B 0 B
build/redux-routine/index.min.js 2.85 kB 0 B
build/rich-text/index.min.js 13.9 kB 0 B
build/server-side-render/index.min.js 2.71 kB 0 B
build/shortcode/index.min.js 1.7 kB 0 B
build/token-list/index.min.js 1.27 kB 0 B
build/url/index.min.js 4.06 kB 0 B
build/viewport/index.min.js 1.85 kB 0 B
build/warning/index.min.js 1.14 kB 0 B
build/wordcount/index.min.js 1.17 kB 0 B

compressed-size-action

@jasmussen
Copy link
Contributor

Thank you for working on this!

In this branch, as I hover a block in the block library, I'm getting a full on crash with the following error message:

TypeError: Cannot read property 'offsetWidth' of null
    at InsertionPoint (http://localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=edf4ad2a28fcfd574858720b31223716:14588:30)
    at renderWithHooks (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:15246:18)
    at updateFunctionComponent (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:17063:20)
    at beginWork$1 (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:18636:16)
    at HTMLUnknownElement.callCallback (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:341:14)
    at Object.invokeGuardedCallbackDev (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:391:16)
    at invokeGuardedCallback (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:448:31)
    at beginWork$$1 (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:23355:7)
    at performUnitOfWork (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:22346:12)
    at workLoopSync (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:22323:22)

I'm not sure it's related, but it might be related to #20713, which is pending a fix.

By the way the blue line that shows up should look identical to the one that appears when you drag an image from the desktop:

should look

It may already do that, I haven't been able to verify :D but just noting!

@aduth aduth added the [Feature] Inserter The main way to insert blocks using the + button in the editing interface label Mar 12, 2020
@ellatrix ellatrix force-pushed the fix/inserter-line branch from dda785c to 9beb5c9 Compare March 25, 2020 11:07
@ellatrix ellatrix mentioned this pull request Apr 9, 2020
Closed
@ellatrix ellatrix force-pushed the fix/inserter-line branch from 9beb5c9 to 50edb47 Compare April 9, 2020 11:21
@jasmussen
Copy link
Contributor

Thanks so much for working on this. I'm still getting that same React error when hovering a block as I mentioned in #20792 (comment). Not sure if I did it wrong, but I had to check out using git checkout --track origin/fix/inserter-line.

By the way can you make it so that the line is visible as soon as you open the top left inserter? Not just on block hover, but all the time when it's open?

@ellatrix
Copy link
Member Author

I've been trying to fix this problem but I get stuck with getBlockInsertionPoint() constantly returning different values:

Screenshot 2020-04-15 at 13 19 11

This value just changes all the time when hovering around in the inserter... Also not sure why blocks are being reset and if that's maybe the cause.

@ellatrix ellatrix force-pushed the fix/inserter-line branch from 50edb47 to 8c72840 Compare April 15, 2020 11:24
@ellatrix
Copy link
Member Author

AH, I just realised there's logging because there's a preview creating another block list with its own insertion point etc.

@ellatrix ellatrix force-pushed the fix/inserter-line branch from 8c72840 to 9c92393 Compare July 5, 2020 14:20
@ellatrix ellatrix added 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 Jul 20, 2020
@ellatrix ellatrix force-pushed the fix/inserter-line branch from a498945 to 9c6c6ac Compare July 20, 2020 13:39
@ellatrix ellatrix force-pushed the fix/inserter-line branch from 9c6c6ac to 4a50096 Compare July 20, 2020 14:27
@ellatrix ellatrix merged commit 771e557 into master Jul 20, 2020
@ellatrix ellatrix deleted the fix/inserter-line branch July 20, 2020 15:26
@github-actions github-actions bot added this to the Gutenberg 8.6 milestone Jul 20, 2020
This was referenced Jul 20, 2020
Closed
Merged
ellatrix added a commit that referenced this pull request Jul 20, 2020
@ellatrix
Inserter: fix line to show again (#20792)
76f3bb2 
* Inserter: fix line to show again

* Fix client id

* Split component

* Reorganise
@youknowriad youknowriad 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 Jul 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jasmussen jasmussen Awaiting requested review from jasmussen

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees
No one assigned
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
Milestone
Gutenberg 8.6
Development

Successfully merging this pull request may close these issues.

Inserter: Always show blue line
4 participants
@ellatrix @jasmussen @youknowriad @aduth