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

Improve and simplify reusable block styles #18903

Merged
merged 1 commit into from
Dec 5, 2019

Conversation

ZebulanStanphill
Copy link
Member

@ZebulanStanphill ZebulanStanphill commented Dec 4, 2019

Description

(Currently includes / blocked by #18902.) #18902 is now merged and has been removed from this PR.

Inspired by changes in #18105 and #18862 to reduce the UI weight of unselected blocks, I made this PR to simplify and improve the reusable block styles. I've made the following changes:

  • Removed the reusable block indicator (<ReusableBlockIndicator />). Showing these indicators goes against the general idea of unselected blocks looking like the front-end, and they weren't very useful in the first place, in my opinion. You could hover the indicator to see the reusable block title, but this is a rather hidden aspect that I didn't even know about until making this PR, and it is easier to just select the block if you want to see its title. Additionally, it seems weird to keep the indicators now that the hover labels have been removed.
  • Removed the dashed outline from unselected reusable blocks. This was another thing that seemed to add unnecessary visual weight. In my opinion there's no reason to distinguish reusable blocks from other blocks when unselected.
  • Changed color of dashed outline for reusable blocks selected using the select tool. Previously, it was grey, but now it is blue to match how other blocks look when selected using the select tool.

I've considered changing reusable blocks to use solid outlines like every other block, but I'm not entirely sure about that change yet, so I'll leave it for another PR.

Screenshots

Note that when I took these screenshots, #18901 was not fixed in master, but it was in this branch. That's why the reusable blocks are taller in the "before" screenshots.

Unselected

Before:
image

After:
image

Selected (select tool)

Before:
image

After:
image

Selected (edit tool)

Before:
image

After (unchanged except for #18901 being fixed):
image

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.

@ZebulanStanphill ZebulanStanphill added the [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) label Dec 4, 2019
@youknowriad youknowriad requested a review from jasmussen December 4, 2019 07:48
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Very nice work, thank you! I left one question, but otherwise this seems good and tests well for me.

Reusable blocks as a whole provides an interesting design challenge worth exploring additionally, perhaps as part of efforts in #18667.

packages/block-library/src/block/edit-panel/editor.scss Outdated Show resolved Hide resolved
@ZebulanStanphill ZebulanStanphill force-pushed the update/reusable-block-outline-styles branch from 180dfb9 to ec82884 Compare December 4, 2019 14:57
@ZebulanStanphill
Copy link
Member Author

Addressed feedback.

@ZebulanStanphill
Copy link
Member Author

I should note that there is currently a styling issue where the blue select color is not applied in dark theme mode, but this issue is also present in master and will probably require some more complicated specificity changes to fix, so I'll try dealing with them in a separate PR.

@ZebulanStanphill ZebulanStanphill force-pushed the update/reusable-block-outline-styles branch from ec82884 to 61bcbf9 Compare December 5, 2019 15:17
@ZebulanStanphill
Copy link
Member Author

Rebased now that #18902 is merged. Will merge this PR after tests pass.

@ZebulanStanphill ZebulanStanphill merged commit e3e2091 into master Dec 5, 2019
@ZebulanStanphill ZebulanStanphill deleted the update/reusable-block-outline-styles branch December 5, 2019 15:47
@ZebulanStanphill
Copy link
Member Author

I created #18958 to fix the dark mode issue.

@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Synced Patterns Related to synced patterns (formerly reusable blocks)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants