Blocks: Allow the Default Style selector to be hidden. #20620

pento · 2020-03-04T07:05:56Z

Description

While working on Automattic/jetpack#14852, I came across the Default Style dropdown. I don't think it's applicable to how this block uses styles, it would significantly reduce end user cognitive load if we had an option to hide it.

This PR adds such an option, giving blocks a new supports.defaultStyle setting to register with. Setting it to false will remove the default style dropdown.

How has this been tested?

Tested against the block in Automattic/jetpack#14852, and against core blocks which don't have this flag set.

Screenshots

A block with custom styles, and the default style dropdown removed:

A block with custom styles, and the default style dropdown kept:

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.

github-actions · 2020-03-04T07:10:05Z

Size Change: +31 B (0%)

Total Size: 857 kB

Filename	Size	Change
`build/block-editor/index.js`	100 kB	+31 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	998 B	0 B
`build/annotations/index.js`	3.43 kB	0 B
`build/api-fetch/index.js`	3.39 kB	0 B
`build/autop/index.js`	2.58 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	6.02 kB	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	760 B	0 B
`build/block-editor/style-rtl.css`	10.9 kB	0 B
`build/block-editor/style.css`	10.9 kB	0 B
`build/block-library/editor-rtl.css`	7.23 kB	0 B
`build/block-library/editor.css`	7.24 kB	0 B
`build/block-library/index.js`	111 kB	0 B
`build/block-library/style-rtl.css`	7.42 kB	0 B
`build/block-library/style.css`	7.43 kB	0 B
`build/block-library/theme-rtl.css`	669 B	0 B
`build/block-library/theme.css`	671 B	0 B
`build/block-serialization-default-parser/index.js`	1.65 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	57.6 kB	0 B
`build/components/index.js`	191 kB	0 B
`build/components/style-rtl.css`	15.7 kB	0 B
`build/components/style.css`	15.7 kB	0 B
`build/compose/index.js`	6.21 kB	0 B
`build/core-data/index.js`	10.6 kB	0 B
`build/data-controls/index.js`	1.04 kB	0 B
`build/data/index.js`	8.2 kB	0 B
`build/date/index.js`	5.37 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.06 kB	0 B
`build/edit-post/index.js`	91.2 kB	0 B
`build/edit-post/style-rtl.css`	8.52 kB	0 B
`build/edit-post/style.css`	8.51 kB	0 B
`build/edit-site/index.js`	5.07 kB	0 B
`build/edit-site/style-rtl.css`	2.53 kB	0 B
`build/edit-site/style.css`	2.53 kB	0 B
`build/edit-widgets/index.js`	4.43 kB	0 B
`build/edit-widgets/style-rtl.css`	2.58 kB	0 B
`build/edit-widgets/style.css`	2.58 kB	0 B
`build/editor/editor-styles-rtl.css`	381 B	0 B
`build/editor/editor-styles.css`	382 B	0 B
`build/editor/index.js`	44 kB	0 B
`build/editor/style-rtl.css`	3.97 kB	0 B
`build/editor/style.css`	3.96 kB	0 B
`build/element/index.js`	4.45 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.09 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	1.93 kB	0 B
`build/html-entities/index.js`	621 B	0 B
`build/i18n/index.js`	3.49 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.3 kB	0 B
`build/keycodes/index.js`	1.69 kB	0 B
`build/list-reusable-blocks/index.js`	2.99 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	4.84 kB	0 B
`build/notices/index.js`	1.58 kB	0 B
`build/nux/index.js`	3.01 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.54 kB	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/priority-queue/index.js`	780 B	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/rich-text/index.js`	14.3 kB	0 B
`build/server-side-render/index.js`	2.55 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4.01 kB	0 B
`build/viewport/index.js`	1.61 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

mkaz

Nice, this is a welcome change, in an example I was working with the extra selector confused things, this makes it cleaner for sure. 👍

A minor edit for the docs to include the default value is true

docs/designers-developers/developers/block-api/block-registration.md

scruffian · 2020-03-04T14:09:58Z

This looks good, but I'm not sure that having it as a new root level setting makes the most sense. There's a few other options I considered:

Change the definition of style settings to contain an object, something like this:

	options: [ ...put existing styles in here ],
	allowDefault: true | false
}```

2. Add it as another property of the `supports` attribute which currently contains similar things, like alignment settings etc...

youknowriad · 2020-03-04T16:00:05Z

Since this is a new block API let's give it some proper thoughts @WordPress/gutenberg-core

ZebulanStanphill · 2020-03-04T18:05:39Z

Personally, I think the default style select control should be moved to the Global Styles UI.

pento · 2020-03-04T23:36:55Z

Giving this some more thought, I agree with @scruffian's point that this isn't really appropriate for a top level setting.

I like the idea of putting it in supports.

scruffian

Well this definitely looks a lot simpler now!

aduth

I hadn't followed closely to the original implementation in #16465. It doesn't seem clear to me what guidelines a block developer might want to follow when considering whether to allow this option to be presented. Even in the case of the given "Map" block styles, I think it might be reasonable that a user would want to have a consistent default for the blocks they insert.

That said, I also don't feel particularly strongly that this not be within the control of the block to opt out. In that light, the implementation here seems sensible to me.

aduth · 2020-03-05T19:41:18Z

docs/designers-developers/developers/block-api/block-registration.md

@@ -716,6 +716,14 @@ attributes: {
 alignWide: false,
 ```

+-   `defaultStyle` (default `true`): When the style picker is shown, a dropdown is displayed so the user can select a default style for this block type. If you prefer not to show the dropdown, set this property to `false`.


Noting that the editor setting itself is still marked as experimental:

gutenberg/packages/block-editor/src/components/default-style-picker/index.js

Line 23 in 8a94254

settings.__experimentalPreferredStyleVariations;

Which leaves this in an awkward mix of semi-stable support.

Related: #16465

@jorgefilipecosta Do you have a sense whether this is something that will plan to be stabilized? Or at least that even if the setting shape itself changes, the desire for "default style" user control will remain?

@jorgefilipecosta: Pinging you on this question: is there any plan to stabilise this feature?

We still have a considerable amount of work to do on #7551. Allowing the user to change the default styles was just a step.
We also want to allow themes to change default styles #16532.
And we want to allow users to create their block styles from the UI. I think this API should not be stabilized before at least these two follow-ups are merged and tested (as the follow-up work may benefit from a better mechanism to store and pass default styles around the several artifacts we have). So there are no immediate plans for stabilization.

packages/blocks/CHANGELOG.md

docs/designers-developers/developers/block-api/block-registration.md

pablinos · 2020-03-06T11:38:00Z

I know this would involve a change to the DefaultSylePicker too, but would it be beneficial to be able to set the default style at registration? Make defaultStyle be either false to disable it, true to have no default set, and a string to set an initial default?

aduth · 2020-03-06T14:34:40Z

I know this would involve a change to the DefaultSylePicker too, but would it be beneficial to be able to set the default style at registration? Make defaultStyle be either false to disable it, true to have no default set, and a string to set an initial default?

If I understand correctly, this is already possible via the isDefault property of the registered block style.

https://developer.wordpress.org/block-editor/developers/filters/block-filters/#block-style-variations

At registration-time, it is achieved via the block setting styles property.

Related: #20620 (comment)

pento · 2020-03-10T02:13:40Z

I agree with @aduth's assessment on using defaultStyle to set the default style on registration: this duplicates the isDefault flag.

@aduth: Do you have any further thoughts on this?

pablinos · 2020-03-10T21:15:52Z

At registration-time, it is achieved via the block setting styles property.
Related: #20620 (comment)

Of course, I should have read that more closely. Sorry all!

I notice there aren't any safeguards against registering multiple defaults, but that's for another day.

pento · 2020-03-12T03:34:49Z

I'm not entirely sure what the deal is with the __experimentalPreferredStyleVariations flag: it's labelled as experimental, but it's available in stable WordPress releases, so there's a certain point where the "experimental" label becomes obsolete through general use in production.

It would probably be beneficial to formalise that, before it becomes locked in due to general use.

Co-Authored-By: Marcus Kazmierczak <[email protected]>

pento · 2020-03-17T04:06:37Z

@mtias: Can I get your thoughts on this? It's stalled a bit, particularly on what the future of block styles looks like.

pento added [Feature] Block API API that allows to express the block paradigm. Needs Design Feedback Needs general design feedback. [Feature] Theme Style Variations Related to style variations provided by block themes labels Mar 4, 2020

pento requested review from ajitbohra, chrisvanpatten, ellatrix, mkaz and youknowriad as code owners March 4, 2020 07:05

pento self-assigned this Mar 4, 2020

pento mentioned this pull request Mar 4, 2020

Map Block: Use the block styles API for choosing map themes Automattic/jetpack#14852

Merged

mkaz approved these changes Mar 4, 2020

View reviewed changes

docs/designers-developers/developers/block-api/block-registration.md Outdated Show resolved Hide resolved

scruffian mentioned this pull request Mar 4, 2020

Styles Panel: Don't force it to be closed by default. #20617

Merged

6 tasks

youknowriad requested review from jorgefilipecosta and mtias March 4, 2020 15:59

pento force-pushed the add/default-style-flag branch from 799ce62 to 0345223 Compare March 4, 2020 23:39

scruffian reviewed Mar 5, 2020

View reviewed changes

aduth reviewed Mar 5, 2020

View reviewed changes

pento and others added 3 commits March 17, 2020 14:22

Allow blocks to remove the Default Style selector when registered.

e6e0966

Fix failing JS unit tests.

290a4d1

Tweak the documentation.

e9b2b24

Co-Authored-By: Marcus Kazmierczak <[email protected]>

pento added 4 commits March 17, 2020 14:22

Switch the flag to being in the block supports section.

bba09f5

Don't try to apply default block styles to blocks that don't support it.

dbe203f

Fix the setting name in the changelog.

3eee013

Rename the flag to defaultStylePicker.

d48cdbc

pento force-pushed the add/default-style-flag branch from e769c12 to d48cdbc Compare March 17, 2020 03:22

pento removed the Needs Design Feedback Needs general design feedback. label Mar 19, 2020

pento added this to the Gutenberg 7.8 milestone Mar 19, 2020

pento merged commit df237e0 into master Mar 19, 2020

pento deleted the add/default-style-flag branch March 19, 2020 04:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks: Allow the Default Style selector to be hidden. #20620

Blocks: Allow the Default Style selector to be hidden. #20620

pento commented Mar 4, 2020 •

edited

Loading

github-actions bot commented Mar 4, 2020 •

edited

Loading

mkaz left a comment

scruffian commented Mar 4, 2020

youknowriad commented Mar 4, 2020

ZebulanStanphill commented Mar 4, 2020

pento commented Mar 4, 2020

scruffian left a comment

aduth left a comment

aduth Mar 5, 2020

pento Mar 10, 2020

jorgefilipecosta Mar 10, 2020

pablinos commented Mar 6, 2020

aduth commented Mar 6, 2020 •

edited

Loading

pento commented Mar 10, 2020

pablinos commented Mar 10, 2020

pento commented Mar 12, 2020

pento commented Mar 17, 2020

Blocks: Allow the Default Style selector to be hidden. #20620

Blocks: Allow the Default Style selector to be hidden. #20620

Conversation

pento commented Mar 4, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Checklist:

github-actions bot commented Mar 4, 2020 • edited Loading

mkaz left a comment

Choose a reason for hiding this comment

scruffian commented Mar 4, 2020

youknowriad commented Mar 4, 2020

ZebulanStanphill commented Mar 4, 2020

pento commented Mar 4, 2020

scruffian left a comment

Choose a reason for hiding this comment

aduth left a comment

Choose a reason for hiding this comment

aduth Mar 5, 2020

Choose a reason for hiding this comment

pento Mar 10, 2020

Choose a reason for hiding this comment

jorgefilipecosta Mar 10, 2020

Choose a reason for hiding this comment

pablinos commented Mar 6, 2020

aduth commented Mar 6, 2020 • edited Loading

pento commented Mar 10, 2020

pablinos commented Mar 10, 2020

pento commented Mar 12, 2020

pento commented Mar 17, 2020

pento commented Mar 4, 2020 •

edited

Loading

github-actions bot commented Mar 4, 2020 •

edited

Loading

aduth commented Mar 6, 2020 •

edited

Loading