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

Adds a default text label to the block appender when it can only insert a single block type #22293

Merged
merged 2 commits into from
Jun 3, 2020

Conversation

draganescu
Copy link
Contributor

Description

Closes #20728
Adds a default text label to the block appender when it can only insert a single block type.

How has this been tested?

Tested locally by:

  1. Add a new post
  2. Insert a Navigation block, a Buttons block and a Columns block
  3. Verify that:
    a) for the Navigation / Buttons block when selected the appender shows when the block is selected
    b) for the Navigation / Buttons block when selected the appender has a label specifying the kind of block to add when the parent block is selected
    c) for the columns block the default appender (after inserting a paragraph) does not show a label, but does show a tooltip with the text "Add block"

Screenshots

new-appender

Types of changes

Non breaking change that reuses the text for the existing tool tip of the appender to show a default label next to the icon.

Issues

As can be seen in the GIF above, there are a few issues:

  • the appender flows to the next line much faster
  • in some contexts it is too big
  • it gets displayed weirdly when space constrained

A separate issue is that is appears that blocks don't use the same appender. E.g. the social icons block does not show the "Add block" tooltip as you'd expect. neither is shows another tooltip at all, which means it uses a custom appender.

@draganescu draganescu added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P labels May 12, 2020
@github-actions
Copy link

github-actions bot commented May 12, 2020

Size Change: +289 kB (25%) 🚨

Total Size: 1.12 MB

Filename Size Change
build/a11y/index.js 1.14 kB +123 B (10%) ⚠️
build/annotations/index.js 3.62 kB -2 B (0%)
build/api-fetch/index.js 3.4 kB -685 B (20%) 🎉
build/autop/index.js 2.83 kB +3 B (0%)
build/block-directory/index.js 6.48 kB -136 B (2%)
build/block-directory/style-rtl.css 787 B +23 B (2%)
build/block-directory/style.css 787 B +23 B (2%)
build/block-editor/index.js 106 kB +1.84 kB (1%)
build/block-editor/style-rtl.css 11.4 kB +802 B (7%) 🔍
build/block-editor/style.css 11.4 kB +804 B (7%) 🔍
build/block-library/editor-rtl.css 7.87 kB +752 B (9%) 🔍
build/block-library/editor.css 7.88 kB +755 B (9%) 🔍
build/block-library/index.js 126 kB +10.3 kB (8%) 🔍
build/block-library/style-rtl.css 7.69 kB +304 B (3%)
build/block-library/style.css 7.68 kB +300 B (3%)
build/block-library/theme-rtl.css 684 B +1 B
build/block-library/theme.css 686 B +1 B
build/block-serialization-default-parser/index.js 1.88 kB +2 B (0%)
build/blocks/index.js 48.2 kB +48 B (0%)
build/components/index.js 190 kB +9.38 kB (4%)
build/components/style-rtl.css 19.5 kB +2.52 kB (12%) ⚠️
build/components/style.css 19.5 kB +2.53 kB (13%) ⚠️
build/compose/index.js 9.32 kB +2.61 kB (28%) 🚨
build/core-data/index.js 11.4 kB +38 B (0%)
build/data-controls/index.js 1.29 kB +2 B (0%)
build/data/index.js 8.43 kB -6 B (0%)
build/date/index.js 5.47 kB -3 B (0%)
build/dom/index.js 3.11 kB +10 B (0%)
build/edit-navigation/index.js 8.05 kB +3.63 kB (45%) 🚨
build/edit-navigation/style-rtl.css 857 B +239 B (27%) 🚨
build/edit-navigation/style.css 856 B +239 B (27%) 🚨
build/edit-post/index.js 302 kB +274 kB (90%) 🆘
build/edit-post/style-rtl.css 5.43 kB -6.78 kB (124%) 🏆
build/edit-post/style.css 5.43 kB -6.78 kB (124%) 🏆
build/edit-site/index.js 14.1 kB +2.04 kB (14%) ⚠️
build/edit-site/style-rtl.css 2.96 kB -2.26 kB (76%) 🏆
build/edit-site/style.css 2.96 kB -2.26 kB (76%) 🏆
build/edit-widgets/index.js 8.88 kB +506 B (5%) 🔍
build/edit-widgets/style-rtl.css 2.4 kB -2.29 kB (95%) 🏆
build/edit-widgets/style.css 2.4 kB -2.29 kB (95%) 🏆
build/editor/index.js 44.6 kB +341 B (0%)
build/editor/style-rtl.css 4.26 kB -807 B (18%) 👏
build/editor/style.css 4.27 kB -808 B (18%) 👏
build/element/index.js 4.64 kB -1 B
build/escape-html/index.js 733 B -1 B
build/format-library/index.js 7.71 kB +81 B (1%)
build/hooks/index.js 2.13 kB -6 B (0%)
build/is-shallow-equal/index.js 711 B +1 B
build/keyboard-shortcuts/index.js 2.51 kB -1 B
build/list-reusable-blocks/index.js 3.12 kB +1 B
build/notices/index.js 1.79 kB -2 B (0%)
build/nux/index.js 3.4 kB +5 B (0%)
build/primitives/index.js 1.5 kB +1 B
build/redux-routine/index.js 2.85 kB +4 B (0%)
build/rich-text/index.js 14.8 kB -10 B (0%)
build/token-list/index.js 1.28 kB +1 B
build/url/index.js 4.02 kB +3 B (0%)
build/viewport/index.js 1.84 kB -1 B
build/wordcount/index.js 1.17 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 620 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

@adamziel
Copy link
Contributor

There's a visual bug when the submenu is too narrow:

Zrzut ekranu 2020-05-15 o 12 01 59

Perhaps we should say just "Add a link"?

Copy link
Contributor

@adamziel adamziel left a comment

Choose a reason for hiding this comment

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

It works as expected and I was only able to nit pick a few low hanging fruits. Approving as there's no need to block it.

@karmatosed
Copy link
Member

One note, if we're going to have this here I think it's important to say 'add link' not the longer text. Can we get an interaction with that, please?

@draganescu
Copy link
Contributor Author

I am not sure about this thing. @mtias the original implementation of "if there is a single block type that can be appended, append that directly" added a tooltip that reads "Add blockname".

Do we want custom shorter text for the navigation block, because the block name of the Navigation Link block is Navigation Link :)

@draganescu draganescu removed the Needs Design Feedback Needs general design feedback. label May 18, 2020
@karmatosed
Copy link
Member

@draganescu for me the 'add' type is link though, I don't think it needs the navigation declaration.

@mtias
Copy link
Member

mtias commented May 21, 2020

It should have the full block name. If we want to trim it down then we should trim down the block name itself.

also refactores out useless component
@draganescu draganescu merged commit c71126d into master Jun 3, 2020
@draganescu draganescu deleted the add/text-for-appender branch June 3, 2020 14:48
@github-actions github-actions bot added this to the Gutenberg 8.3 milestone Jun 3, 2020
@oandregal oandregal changed the title adds default text for appender Adds a default text label to the block appender when it can only insert a single block type Jun 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inner Blocks inserter on single-child blocks
4 participants