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

Buttons: allow split and merge #22436

Merged
merged 6 commits into from
May 20, 2020
Merged

Buttons: allow split and merge #22436

merged 6 commits into from
May 20, 2020

Conversation

ellatrix
Copy link
Member

Description

Allows buttons to be split with enter and backspace. Currently these insert line breaks which doesn't make much sense in the context of buttons.

button-split

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.

@github-actions
Copy link

github-actions bot commented May 18, 2020

Size Change: +142 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/block-editor/index.js 105 kB +5 B (0%)
build/block-library/index.js 119 kB +128 B (0%)
build/block-library/style-rtl.css 7.48 kB +1 B
build/block-library/style.css 7.48 kB -1 B
build/blocks/index.js 48.1 kB -2 B (0%)
build/components/index.js 182 kB -3 B (0%)
build/core-data/index.js 11.4 kB +22 B (0%)
build/edit-post/index.js 302 kB +1 B
build/edit-site/index.js 12.8 kB -2 B (0%)
build/editor/index.js 44.3 kB -1 B
build/keyboard-shortcuts/index.js 2.51 kB -2 B (0%)
build/nux/index.js 3.4 kB -2 B (0%)
build/rich-text/index.js 14.8 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.93 kB 0 B
build/block-directory/style-rtl.css 790 B 0 B
build/block-directory/style.css 791 B 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 7.22 kB 0 B
build/block-library/editor.css 7.22 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 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/components/style-rtl.css 17.1 kB 0 B
build/components/style.css 17.1 kB 0 B
build/compose/index.js 6.68 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.42 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.11 kB 0 B
build/edit-navigation/index.js 6.6 kB 0 B
build/edit-navigation/style-rtl.css 857 B 0 B
build/edit-navigation/style.css 856 B 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/style-rtl.css 5.22 kB 0 B
build/edit-site/style.css 5.22 kB 0 B
build/edit-widgets/index.js 7.73 kB 0 B
build/edit-widgets/style-rtl.css 4.59 kB 0 B
build/edit-widgets/style.css 4.59 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.64 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 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/notices/index.js 1.79 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/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 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.17 kB 0 B

compressed-size-action

@ZebulanStanphill
Copy link
Member

I notice you're not using onRemove anywhere... this PR is pretty similar in function to #21764. Should I revise my approach in that PR to match yours or vice-versa?

@ellatrix
Copy link
Member Author

@ZebulanStanphill Tbh, I'm not sure why onRemove is being used. I think this code in RichText is pretty old and I don't fully understand the comment, which I think was left by @aduth. Everything seems to be working well without onRemove.

// Only handle remove on Backspace. This serves dual-purpose of being
// an intentional user interaction distinguishing between Backspace and
// Delete to remove the empty field, but also to avoid merge & remove
// causing destruction of two fields (merge, then removed merged).
if ( onRemove && isEmpty( value ) && isReverse ) {
onRemove( ! isReverse );
}

@ellatrix
Copy link
Member Author

In the future, I'm hoping that we can make it easier for blocks to implement split and merge because this is a lot of different settings and attributes to pass. We'll have a better idea how it could look once more blocks implement split/merge.

@ellatrix ellatrix force-pushed the try/buttons-split-merge branch from 9346021 to 8883940 Compare May 19, 2020 12:06
@aduth
Copy link
Member

aduth commented May 19, 2020

@ZebulanStanphill Tbh, I'm not sure why onRemove is being used. I think this code in RichText is pretty old and I don't fully understand the comment, which I think was left by @aduth. Everything seems to be working well without onRemove.

I struggle to interpret it now as well 😬 I trace it back to #8735, if it helps provide context for what it was needed for at the time. There were also some end-to-end tests included, so I'd assume if those can still pass without the code, it should be okay to remove.

packages/block-editor/src/components/rich-text/index.js Outdated Show resolved Hide resolved
@@ -183,6 +191,19 @@ function ButtonEdit( props ) {
: undefined,
...colorProps.style,
} }
onSplit={ ( value ) => {
if ( ! value ) {
return createBlock( 'core/button' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Are there any values that would be better to retain from the forked button's attributes? The style, colour and border settings come to mind. But then we'd have to be careful not to port the remaining attributes, since it could cause unexpected and sometimes incorrect behaviour (e.g. if a hook adds HTML Anchor support to a button for some reason).

Copy link
Member Author

Choose a reason for hiding this comment

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

Right, I don't really know what to do here. It sounds like generally we should keep the attributes for both blocks as it makes more sense for buttons (not for paragraphs). The anchor will be an issue with this code as well since it's possible to split in the middle and end up with two buttons with the same attributes (both parts are non empty). The anchor issue should probably be fixed at another level, maybe something that makes sure the content has no duplicate anchors in general?

Copy link
Member

Choose a reason for hiding this comment

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

I agree with keeping the attributes for both buttons.

@ellatrix ellatrix requested review from nerrad and ntwb as code owners May 20, 2020 12:12
@ellatrix ellatrix merged commit 80ed659 into master May 20, 2020
@ellatrix ellatrix deleted the try/buttons-split-merge branch May 20, 2020 13:48
@github-actions github-actions bot added this to the Gutenberg 8.2 milestone May 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants