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

Editor: Separate editor notices by border instead of margin #18871

Merged
merged 1 commit into from Dec 3, 2019

Conversation

@aduth
Copy link
Member

aduth commented Dec 2, 2019

Closes #18762

This pull request seeks to update the styling of editor notices, to use a border instead of margins to distinguish multiple stacked notices. As noted in #18762, this should help improve appearance when shown atop a themed editor background color. It also occupies less vertical space, in case there are many notices present.

Before After
Before After

Testing Instructions:

  1. Active a theme with background color (e.g. TwentyTwenty)
  2. Navigate to Posts > Add New
  3. Insert the following script in your Developer Tools Console to add a few notices to the screen:
[ 'info', 'warning', 'error', 'success' ].forEach( ( status ) => wp.data.dispatch( 'core/notices' ).createNotice( status, status ) )
  1. Verify notices appear nicely stacked
Copy link
Member

karmatosed left a comment

Great catch, although really wish we didn't end up in any situation with stacked messages. At least now they don't have margins :) Approving for design feedback and removing label.

Copy link
Contributor

richtabor left a comment

Works great!

@aduth aduth merged commit 3db68c3 into master Dec 3, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@aduth aduth deleted the update/notice-margins branch Dec 3, 2019
@aduth

This comment has been minimized.

Copy link
Member Author

aduth commented Dec 3, 2019

Great catch, although really wish we didn't end up in any situation with stacked messages.

Yeah, though this should at least be supported by the fact there's few enough default notices that it forced me to include JavaScript in the testing instructions 😄

The underlying problem still exists for a single notice though, seen in the white gap between the last notice and the top of the editor of the "Before" screenshot. This should make everything seamless now.

@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
Projects
None yet
4 participants
You can’t perform that action at this time.