Skip to content

Add keyboard shortcut (cmd(ctrl)+option(alt)+v) to paste styles #69196

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
Merged
merged 8 commits into from
Mar 19, 2025
Merged

Add keyboard shortcut (cmd(ctrl)+option(alt)+v) to paste styles #69196

merged 8 commits into from
Mar 19, 2025

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Feb 14, 2025 •
edited
Loading

What, Why and How?

Closes #69170

This PR introduces the shortcut cmd(ctrl) + option (alt) + v for pasting the copied styles.

Please note that due to the issue reported here, copying a block using the keyboard shortcut and then attempting to paste its styles—whether via the shortcut or Block Actions—will not work. This issue already exists in Trunk with the Paste Styles Block Action, and the shortcut behaves similarly.

To resolve this, we can either ensure consistency between the Copy keyboard shortcut and Block Actions by addressing the issue or, as a quick fix, introduce a dedicated keyboard shortcut for Copy Styles.

Testing Instructions

  1. Navigate to the post-edit page.
  2. Copy the styles of a block from Block Actions.
  3. Confirm that it's possible to paste the styles using the shortcut cmd(ctrl)+option(alt)+v.
  4. Repeat the same process for the List View blocks and confirm the usability of the shortcut.
  5. Also confirm that the focus stays inside List View when attempting Step 4.

Screencasts and Screenshot

mac-key-shortcut

Paste Styles Draft

Shortcut demo within List View

Paste Styles List View

Tested on macOS

@yogeshbhutkar
Copy link
Contributor Author

Note: The failing test is not related to the changes made in this PR.

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review February 14, 2025 07:13
@github-actions GitHub Actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ethanclevenger91 <eclev91@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Package] Block editor /packages/block-editor [Package] Keyboard Shortcuts /packages/keyboard-shortcuts labels Feb 14, 2025
t-hamano
t-hamano reviewed Feb 18, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR! It works as expected on Windows OS, Chrome/Firefox.

Can you add e2e tests for this shortcut? This file seems appropriate.

For the List View, it's here, but this test is quite large, so you might want to add tests after splitting it into smaller tests. See #64305.

@yogeshbhutkar
Copy link
Contributor Author

yogeshbhutkar commented Feb 18, 2025 •
edited
Loading

Thanks for the review!

I believe #64305 has a PR for Navigation Tests, I'll create a corresponding PR for the List View. Let's land that first so I can rebase the current PR, write the tests for paste styles here, and keep the changes confined to the parent issue.

Edit: PR created here.

@yogeshbhutkar yogeshbhutkar mentioned this pull request Feb 18, 2025
Closed
@yogeshbhutkar
Copy link
Contributor Author

Getting #69231 merged is a prerequisite for adding tests for paste styles in this PR. However, the refactoring introduced in #69231 still requires thorough testing and review, which I assume might take some time due to the scope of changes.

In the meantime, if this PR tests well, would it be possible to review and approve/merge it first and follow up with the paste styles tests separately?

CC: @t-hamano

@t-hamano
Copy link
Contributor

Sorry for the late reply!

In the meantime, if this PR tests well, would it be possible to review and approve/merge it first and follow up with the paste styles tests separately?

The List View testing can be addressed in a follow-up, but I think this PR at the very least needs testing on the edit canvas. Example:

  • Insert a block.
  • Apply some styles to the block.
  • Access the block toolbar and click the "Copy styles" menu.
  • Insert a second block and select it.
  • Run cmd(ctrl) + option (alt) + v
  • Assert that the second block has the correct styles same as the first block.

@yogeshbhutkar
Copy link
Contributor Author

yogeshbhutkar commented Mar 11, 2025 •
edited
Loading

Thanks for the reply, @t-hamano.
I've included the suggested tests in the latest commit. Please have a look when you get a moment.

@yogeshbhutkar yogeshbhutkar requested a review from t-hamano March 14, 2025 04:51
@yogeshbhutkar
Copy link
Contributor Author

Hi, @t-hamano. I believe I've incorporated all the suggested changes, including the recommended test cases. If everything tests well and the feature is deemed necessary, could we proceed with the next steps for this PR?

t-hamano
t-hamano approved these changes Mar 19, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Sorry for the late reply!

The added e2e tests look good to me, and I think we can ship this PR 👍

@t-hamano t-hamano merged commit dbec8d9 into WordPress:trunk Mar 19, 2025
61 checks passed
@yogeshbhutkar
Copy link
Contributor Author

Thanks for the review, @t-hamano.

@yogeshbhutkar yogeshbhutkar deleted the enhance-69170/paste-styles-key-shortcut branch March 19, 2025 09:15
@github-actions github-actions bot added this to the Gutenberg 20.6 milestone Mar 19, 2025
@yogeshbhutkar yogeshbhutkar mentioned this pull request Apr 24, 2025
Merged
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@yogeshbhutkar @t-hamano @chriszarate
Add keyboard shortcut (cmd(ctrl)+option(alt)+v) to paste styles (Wo…
bcd4272 
…rdPress#69196)

* feat: add key combo to paste styles

* e2e: add test for pasting styles using keyboard shortcut

* refactor: remove snapshots file

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ethanclevenger91 <eclev91@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

Assignees
No one assigned
Labels
[Package] Block editor /packages/block-editor [Package] Keyboard Shortcuts /packages/keyboard-shortcuts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 20.6
Development

Successfully merging this pull request may close these issues.

Paste styles keyboard shortcut
2 participants
@yogeshbhutkar @t-hamano