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

Show the block styles in the block inspector #10543

Merged
merged 4 commits into from Oct 15, 2018

Conversation

Projects
None yet
3 participants
@youknowriad
Contributor

youknowriad commented Oct 12, 2018

closes #10520

This PR adds the styles selector to the block inspector like shown in this screenshot.

screen shot 2018-10-12 at 10 22 06

@youknowriad youknowriad added this to the 4.1 milestone Oct 12, 2018

@youknowriad youknowriad self-assigned this Oct 12, 2018

@youknowriad youknowriad requested a review from WordPress/gutenberg-core Oct 12, 2018

@gziolo

gziolo approved these changes Oct 12, 2018

Code part looks great 💯, please wait for the design feedback before proceeding.

I love how composable Gutenberg is, one component which can be reused in so many places ❤️

{ ( fills ) => ! isEmpty( fills ) && (
<div><InspectorControls.Slot /></div>
{ !! blockType.styles && (
<div className="editor-block-inspector__styles">

This comment has been minimized.

@gziolo

gziolo Oct 12, 2018

Member

Minor: We put a class name inside div in here and inside PanelBody for the advanced controls. Is it possible to use a common approach? It would be nice to put it inside PabelBody as we probably will want to remove those wrapping div elements at some point. It's NOT a blocker :)

@@ -46,3 +46,7 @@
width: $icon-button-size;
height: $icon-button-size-small;
}
.editor-block-inspector__styles .editor-block-styles__item {
width: 100%;

This comment has been minimized.

@mtias

mtias Oct 12, 2018

Contributor

Glad it only took this to work :)

This comment has been minimized.

@gziolo

gziolo Oct 12, 2018

Member

I love how composable Gutenberg is, one component which can be reused in so many places ❤️

Yeah :)

@gziolo gziolo added the Blocks label Oct 12, 2018

@mtias

This comment has been minimized.

Contributor

mtias commented Oct 12, 2018

"Styles" should probably be placed at the top of all panels.

@mtias

This comment has been minimized.

Contributor

mtias commented Oct 12, 2018

After some testing decided to fit them in two columns as it makes a better use of space:

image

@youknowriad youknowriad force-pushed the add/editor-styles-inspector branch from 9c542bf to 4468a54 Oct 15, 2018

youknowriad added some commits Oct 15, 2018

@youknowriad youknowriad merged commit 1960a48 into master Oct 15, 2018

2 checks passed

codecov/project 49.53% remains the same compared to 36e2c84
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the add/editor-styles-inspector branch Oct 15, 2018

etoledom added a commit that referenced this pull request Oct 15, 2018

Show the block styles in the block inspector (#10543)
* Show the block styles in the block inspector

* Display style variations in two columns.

* Remove useless className

* Move the styles panel to the top
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment