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

Add a minimal multi-selection block panel #12050

Merged
merged 5 commits into from Nov 19, 2018

Conversation

Projects
None yet
4 participants
@youknowriad
Contributor

youknowriad commented Nov 19, 2018

Let's avoid the "coming soon" message in the RC and replace the multi-selection inspector panel with a minimal panel with some numbers.

screen shot 2018-11-19 at 10 44 45

@youknowriad youknowriad added this to the 4.5 milestone Nov 19, 2018

@youknowriad youknowriad self-assigned this Nov 19, 2018

@youknowriad youknowriad requested review from jasmussen and WordPress/gutenberg-core Nov 19, 2018

@gziolo

This comment has been minimized.

Member

gziolo commented Nov 19, 2018

Code wise, it looks good. My concern is that we repeat 3 blocks in the tab's title and the body of the tab.

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 19, 2018

Let me try and push a little change.

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 19, 2018

Okay, I pushed a little change:

screenshot 2018-11-19 at 11 11 30

This makes it look more like the normal inspector card:

screenshot 2018-11-19 at 11 12 16

I agree, when seeing this, with Gzregorz — can we make it so the "Block" tab title never changes? I.e. it should be this:

screenshot 2018-11-19 at 11 12 57

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 19, 2018

I love it 👍


function MultiSelectionInspector( { blocks } ) {
return (
<div className="editor-block-inspector__card">

This comment has been minimized.

@youknowriad

youknowriad Nov 19, 2018

Contributor

Instead of reusing a className, I'd just duplicate this style in a style.scss file specific to this component and rename this class editor-multi-selection-inspector__card.

Later, we should think at a generic card component or something.

This comment has been minimized.

@youknowriad

youknowriad Nov 19, 2018

Contributor

The other classNames should also be renamed.

This comment has been minimized.

@jasmussen

jasmussen Nov 19, 2018

Contributor

The other classNames should also be renamed.

Which ones? Did I miss any?

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 19, 2018

Thanks for the tweaks 👍

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 19, 2018

Forgot one, that I just pushed.

I'll need help changing the tab label, though — so it always says "Block".

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 19, 2018

Okay I fixed the block tab:

screenshot 2018-11-19 at 11 28 02

I think this is good.

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 19, 2018

There's still some things we can remove :) I'm pushing a commit

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 19, 2018

Thanks, Riad. I'm done with my changes. You can take it from here.

Here's why I think the block tab change is good, just for posterity:

multiselect

It's less jumpy, simpler, more consistent.

@youknowriad youknowriad force-pushed the add/mimimal-multiselection-inspector branch from 1a34599 to edfd969 Nov 19, 2018

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 19, 2018

I tweaked the last commit, we just need a now :)

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 19, 2018

@gziolo, you're up! :D

@gziolo

gziolo approved these changes Nov 19, 2018

Looks great, thanks for addressing my comment and adding more visual tweaks. I like that we use this icon to look more similar to the regular block 👍

@gziolo gziolo merged commit b198e5c into master Nov 19, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@gziolo gziolo deleted the add/mimimal-multiselection-inspector branch Nov 19, 2018

{ sprintf( __( '%d blocks' ), blocks.length ) }
</div>
<div className="editor-multi-selection-inspector__card-description">
{ sprintf( __( '%d words.' ), wordCount( serialize( blocks ), 'words' ) ) }

This comment has been minimized.

@swissspidy

swissspidy Nov 19, 2018

Member

This needs to use _n() instead of __(). Also, there is no translators comment.

} showColors />
<div className="editor-multi-selection-inspector__card-content">
<div className="editor-multi-selection-inspector__card-title">
{ sprintf( __( '%d blocks' ), blocks.length ) }

This comment has been minimized.

@swissspidy

swissspidy Nov 19, 2018

Member

This needs to use _n() instead of __(). Also, there is no translators comment.

swissspidy added a commit that referenced this pull request Nov 19, 2018

Improve i18n negligence in MultiSelectionInspector
Addresses an issue introduced in #12050.

@swissspidy swissspidy referenced this pull request Nov 19, 2018

Merged

Improve i18n negligence in MultiSelectionInspector #12054

4 of 4 tasks complete
@swissspidy

This comment has been minimized.

Member

swissspidy commented Nov 19, 2018

Created #12054 to fix this.

gziolo added a commit that referenced this pull request Nov 19, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Add a minimal multi-selection block panel (WordPress#12050)
* Add a minimal multi-selection block panel

* Polish a little bit.

* Address feedback.

* Add missing style for icon.

* Change the block tab.

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment