Skip to content

Buttons: allow split and merge#22436

Merged
ellatrix merged 6 commits intomasterfrom
try/buttons-split-merge
May 20, 2020
Merged

Buttons: allow split and merge#22436
ellatrix merged 6 commits intomasterfrom
try/buttons-split-merge

Conversation

@ellatrix
Copy link
Copy Markdown
Member

@ellatrix ellatrix commented May 18, 2020

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.

@ellatrix ellatrix requested a review from mtias May 18, 2020 19:41
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 18, 2020 •
edited
Loading

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
Copy Markdown
Member

ZebulanStanphill commented May 18, 2020

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
Copy Markdown
Member Author

ellatrix 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.

gutenberg/packages/block-editor/src/components/rich-text/index.js

Lines 251 to 257 in 532844f

// 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
Copy Markdown
Member Author

ellatrix commented May 19, 2020

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
Copy Markdown
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.

mcsf
mcsf approved these changes May 19, 2020
View reviewed changes
Comment thread packages/block-editor/src/components/rich-text/index.js Outdated
Comment thread packages/block-library/src/button/edit.js Outdated
} }
onSplit={ ( value ) => {
if ( ! value ) {
return createBlock( 'core/button' );
Copy link
Copy Markdown
Contributor

@mcsf mcsf May 19, 2020

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
Copy Markdown
Member Author

@ellatrix ellatrix May 19, 2020

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
Copy Markdown
Member

@mtias mtias May 19, 2020

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
@ZebulanStanphill ZebulanStanphill mentioned this pull request May 21, 2020
Merged
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mcsf mcsf mcsf approved these changes

@mtias mtias mtias approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

@Soean Soean Awaiting requested review from Soean

@talldan talldan Awaiting requested review from talldan

@etoledom etoledom Awaiting requested review from etoledom

@SergioEstevao SergioEstevao Awaiting requested review from SergioEstevao

@nerrad nerrad Awaiting requested review from nerrad

@ntwb ntwb Awaiting requested review from ntwb

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

Gutenberg 8.2

Development

Successfully merging this pull request may close these issues.

5 participants

@ellatrix @ZebulanStanphill @aduth @mcsf @mtias