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

Writing flow: Copy whole block if no text is selected #22186

Merged
merged 9 commits into from
May 15, 2020

Conversation

mcsf
Copy link
Contributor

@mcsf mcsf commented May 7, 2020

Description

  • Allow a single block to be copied or cut as a whole via the browser's copy and cut actions.

That is, when a single block is selected but no text is selected, copying (such as using CTRL-C) and cutting (CTRL-X) now grab the entire block. This is an extension of the behaviour that was in place for selections of multiple blocks.

Subsequently added:

  • Flash block(s) when copied.
  • Show snackbar notifications for copy and cut actions, whether one or many blocks are copied.

copy-flash-and-cut-notifications

Questions

I extended this to cut (CTRL-X) to see how it feels. Does it make sense?

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.

@mcsf mcsf added the [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... label May 7, 2020
@mcsf mcsf requested review from mtias and ellatrix May 7, 2020 18:09
@mcsf mcsf requested a review from youknowriad as a code owner May 7, 2020 18:09
@github-actions
Copy link

github-actions bot commented May 7, 2020

Size Change: +329 B (0%)

Total Size: 832 kB

Filename Size Change
build/annotations/index.js 3.62 kB -1 B
build/block-editor/index.js 104 kB +317 B (0%)
build/blocks/index.js 48.1 kB +1 B
build/dom/index.js 3.11 kB +9 B (0%)
build/edit-post/index.js 28.1 kB +1 B
build/edit-widgets/index.js 7.86 kB +1 B
build/editor/index.js 44.3 kB -1 B
build/plugins/index.js 2.56 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 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.59 kB 0 B
build/block-directory/style-rtl.css 764 B 0 B
build/block-directory/style.css 764 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.19 kB 0 B
build/block-library/editor.css 7.19 kB 0 B
build/block-library/index.js 118 kB 0 B
build/block-library/style-rtl.css 7.48 kB 0 B
build/block-library/style.css 7.48 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/index.js 182 kB 0 B
build/components/style-rtl.css 17.1 kB 0 B
build/components/style.css 17 kB 0 B
build/compose/index.js 6.67 kB 0 B
build/core-data/index.js 11.4 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 569 B 0 B
build/edit-navigation/index.js 5.6 kB 0 B
build/edit-navigation/style-rtl.css 618 B 0 B
build/edit-navigation/style.css 617 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/index.js 12 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/style-rtl.css 4.69 kB 0 B
build/edit-widgets/style.css 4.69 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.63 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/keyboard-shortcuts/index.js 2.51 kB 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/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 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/rich-text/index.js 14.8 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

@ellatrix
Copy link
Member

ellatrix commented May 7, 2020

Sounds good. The only thing I would find a bit strange is that there's no visual indication of what you're copying. If you select some text, it's visible, and clear what you copy. If you select some blocks, you see the selection and what you copy. That's not the case there. On the other hand the shortcut doesn't do anything, so it doesn't really hurt to add it. :)

@ellatrix
Copy link
Member

ellatrix commented May 7, 2020

Do you think an e2e test could be useful? The shortcuts work in content editable fields in our e2e tests.

@mtias
Copy link
Member

mtias commented May 8, 2020

Great! There are a few things that I think could be improved:

  • Could we try flashing the block outline (same as we do when you hover the block type) when the action triggers? That should give a clearer hint of what was copied (all the block boundaries).
  • It'd be nice to say "Copied {BlockName} to clipboard" if it's just one block copied.
  • Does it work with "Cut"?
  • We should probably add the action to the ellipsis menu but I see @ellatrix is already looking at it here: Block: add copy action #22214.

@ellatrix
Copy link
Member

ellatrix commented May 8, 2020

Yeah, I added it to the block actions. We should add the shortcut there afterwards too, but that will require a follow up PR with some ClipboardButton refactoring.

@mcsf
Copy link
Contributor Author

mcsf commented May 12, 2020

@ellatrix and @mtias, thanks for the reviews.

Do you think an e2e test could be useful?

I do, but haven't taken the time to write any yet.

  • Could we try flashing the block outline (same as we do when you hover the block type) when the action triggers? That should give a clearer hint of what was copied (all the block boundaries).

Done in 99cf442. I'm not yet sure of the implementation, but how's the UX?

  • It'd be nice to say "Copied {BlockName} to clipboard" if it's just one block copied.

Done too, and expanded to cutting actions.

  • Does it work with "Cut"?

Yes. So far it feels alright to me.

Comment on lines 20 to 24
toggleBlockHighlight( clientId, true );
const timeout = setTimeout( () => {
toggleBlockHighlight( clientId, false );
}, 1000 );
timeouts.current.push( timeout );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This feels a lot like a hack. Does it have its place here? Should the idea of flashing be a proper block-editor action? Should there be different primitives for this? cc @youknowriad

Copy link
Contributor

Choose a reason for hiding this comment

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

The dispatch('core/editor').flashBlock( clientId ) action can also be written as a generator and absorbs the timeout handling to unset the reducer state. When I call dispatch('core/editor').flashBlock( clientId ) I should expect it to handle all the logic.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, I agree.

One last question: did you namespace it core/editor intentionally, as opposed to core/block-editor?

Copy link
Contributor

Choose a reason for hiding this comment

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

no, not intentional :) good catch.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I pushed f425709, but I don't really like what I did with the introduction of a SLEEP control. Do you suggest a different approach, @youknowriad? And if not, should I export sleep from controls, or keep it private as now?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think the "sleep" control is totally fine. redux-saga, for instance, has a "delay" effect which is equivalent.

@mtias
Copy link
Member

mtias commented May 12, 2020

I'm not yet sure of the implementation, but how's the UX?

Made it a bit faster in f0a8693

@mcsf mcsf force-pushed the add/copy-whole-block-on-ctrl-c branch from 9ff0834 to f305234 Compare May 14, 2020 18:20
@mcsf
Copy link
Contributor Author

mcsf commented May 15, 2020

I think this is good now with the addition of tests. Thanks for everyone's help!

@mcsf mcsf merged commit e4b6730 into master May 15, 2020
@mcsf mcsf deleted the add/copy-whole-block-on-ctrl-c branch May 15, 2020 09:56
@github-actions github-actions bot added this to the Gutenberg 8.2 milestone May 15, 2020
Comment on lines +26 to +28
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For the record, I don't like these empty paragraphs that the pasting yields, but this is tangent to the PR itself.

@ellatrix ellatrix mentioned this pull request May 18, 2020
6 tasks
@desaiuditd
Copy link
Member

I'm seeing a potential bug with this PR on version 8.2.0 as well as 8.2.1

In Embed block, copying the embed url after selecting it in the placeholder is copying the whole block instead of just url. Please refer to the screencast.

2020-05-31 02 51 38

@mcsf Could this be a regression?

@mcsf
Copy link
Contributor Author

mcsf commented May 30, 2020

Good catch! That definitely sounds related. Could you file an issue and let me know? Thanks!

@tmann50
Copy link

tmann50 commented May 30, 2020

Hi, I'm getting the same problem when trying to copy or cut individual words/lines in Custom HTML blocks. The whole block is copied instead of just the selected text.

@desaiuditd
Copy link
Member

Good catch! That definitely sounds related. Could you file an issue and let me know? Thanks!

Here you go @mcsf #22775

On the other hand, I was thinking, can this feature be opt in?

Copying text even within custom blocks, inner blocks and other areas is trivial and important user action. So if we make it opt-in, we can avoid such bugs from creeping into users’ daily workflow.

Power users can opt-in for this if they want to. And that way we can limit the scope of such bugs.

@mcsf
Copy link
Contributor Author

mcsf commented Jun 1, 2020

Fix in #22793 up for review.

On the other hand, I was thinking, can this feature be opt in?

Copying text even within custom blocks, inner blocks and other areas is trivial and important user action. So if we make it opt-in, we can avoid such bugs from creeping into users’ daily workflow.

Bugs are always frustrating, and unfortunately they will creep up sooner or later. That shouldn't however be a reason for us to fragment the user experience by selectively disabling core features. It should instead fuel our efforts to ensure quality and stability in the project. In this case, I might have tested the feature more broadly, I might have added more varied E2E tests.

In short, I think it would be a great mistake to make this opt-in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Writing Flow Block selection, navigation, splitting, merging, deletion...
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants