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
Contributor

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.
Copy link
Contributor

jasmussen left a comment

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.

@ZebulanStanphill ZebulanStanphill force-pushed the update/reusable-block-outline-styles branch from 180dfb9 to ec82884 Dec 4, 2019
@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor Author

ZebulanStanphill commented Dec 4, 2019

Addressed feedback.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor Author

ZebulanStanphill commented Dec 4, 2019

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 Dec 5, 2019
@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor Author

ZebulanStanphill commented Dec 5, 2019

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

@ZebulanStanphill ZebulanStanphill merged commit e3e2091 into master Dec 5, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@ZebulanStanphill ZebulanStanphill deleted the update/reusable-block-outline-styles branch Dec 5, 2019
@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor Author

ZebulanStanphill commented Dec 5, 2019

I created #18958 to fix the dark mode issue.

@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
scruffian added a commit to scruffian/gutenberg that referenced this pull request Dec 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.