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

Extend complete styling support on core blocks #63050

Closed
markhowellsmead opened this issue Jul 2, 2024 · 13 comments
Closed

Extend complete styling support on core blocks #63050

markhowellsmead opened this issue Jul 2, 2024 · 13 comments
Labels
[Type] Enhancement A suggestion for improvement.

Comments

@markhowellsmead
Copy link

markhowellsmead commented Jul 2, 2024

What problem does this address?

Based on https://make.wordpress.org/core/2024/06/20/roster-of-design-tools-per-block-wordpress-6-6-edition/, there are still many core blocks for which essential controls are missing. For example link (and state) colours on e.g. the archives block and navigation block, typography on login/logout, read more, navigation submenu, etc.

For this reason, extenders have to continue to use a notable amount of custom CSS, which both needs maintenance, and goes against the principle of being able to control as much as possible through the Styles Editor or theme.json.

What is your proposed solution?

Review the list of block supports in the above linked list and allow users and extenders access to the full range of controls on every block. There are hardly any where it makes sense to suppress options which some extenders and users find necessary.

Specifics

Align

  • Button
  • Comment Author Avatar
  • Comment Author Name
  • Comment Content
  • Comment Date
  • Comment Edit Link
  • Comment Reply Link
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Footnotes
  • Home Link – Navigation
  • HTML
  • List
  • List Item
  • Login/logout
  • More (Read More)
  • Navigation
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Paragraph
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Form
  • Post Comments Link
  • Post Date
  • Post Excerpt
  • Post Navigation Link
  • Post Terms
  • Preformatted
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Quote
  • Read More
  • RSS
  • Search
  • Social Link
  • Spacer
  • Verse
  • Video

Typography

  • Audio
  • Avatar
  • Comment Author Avatar
  • Embed
  • File
  • Gallery
  • HTML
  • Image
  • Login/logout
  • More (Read More)
  • Navigation Submenu
  • Next Page (Page Break)
  • Post Featured Image
  • Query
  • RSS
  • Separator
  • Site Logo
  • Social Link
  • Social Links
  • Spacer
  • Template Part
  • Video

Color

  •  Archives
  • Audio
  • Avatar
  • Buttons
  • Categories
  • Comment Template
  • Embed
  • Home Link – Navigation
  • HTML
  • Image
  • Latest Comments
  • List Item
  • Login/logout
  • More (Read More)
  • Navigation
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Post Featured Image
  • Query
  • RSS
  • Social Link
  • Spacer
  • Tag Cloud
  • Template Part

Dimension

  • Calendar
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Home Link – Navigation
  • HTML
  • Image
  • Latest Posts
  • Login/logout
  • More (Read More)
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Post Navigation Link
  • Query
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Quote
  • RSS
  • Search
  • Social Link
  • Template Part
  • Video

Border

  • Archives
  • Audio
  • Buttons
  • Calendar
  • Categories
  • Comment Author Name
  • Comment Content
  • Comment Date
  • Comment Edit Link
  • Comment Reply Link
  • Comment Template
  • Comments
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Cover
  • Embed
  • File
  • Gallery
  • Heading
  • Home Link – Navigation
  • HTML
  • Latest Comments
  • List
  • List Item
  • Login/logout
  • Media & Text
  • More (Read More)
  • Navigation
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Paragraph
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Form
  • Post Comments Link
  • Post Date
  • Post Excerpt
  • Post Navigation Link
  • Post Template
  • Post Terms
  • Post Title
  • Preformatted
  • Query
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Quote
  • RSS
  • Separator
  • Site Logo
  • Site Tagline
  • Site Title
  • Social Link
  • Social Links
  • Spacer
  • Tag Cloud
  • Template Part
  • Term Description
  • Video

Layout

  • Archives
  • Audio
  • Avatar
  • Button
  • Calendar
  • Categories
  • Code
  • Comment Author Avatar
  • Comment Author Name
  • Comment Content
  • Comment Date
  • Comment Edit Link
  • Comment Reply Link
  • Comment Template
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Comments Title
  • Cover
  • Details
  • Embed
  • File
  • Footnotes
  • Heading
  • Home Link – Navigation
  • HTML
  • Image
  • Latest Comments
  • Latest Posts
  • List
  • List Item
  • Login/logout
  • Media & Text
  • More (Read More)
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Paragraph
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Form
  • Post Comments Link
  • Post Date
  • Post Excerpt
  • Post Featured Image
  • Post Navigation Link
  • Post Terms
  • Post Title
  • Preformatted
  • Pullquote
  • Query No Results
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Quote
  • Read More
  • RSS
  • Search
  • Separator
  • Site Logo
  • Site Tagline
  • Site Title
  • Social Link
  • Spacer
  • Table
  • Tag Cloud
  • Template Part
  • Term Description
  • Verse
  • Video

Gradient

  • Archives
  • Audio
  • Avatar
  • Buttons
  • Calendar
  • Categories
  • Code
  • Comment Author Avatar
  • Comment Date
  • Comment Edit Link
  • Comment Reply Link
  • Comment Template
  • Comments
  • Comments Pagination
  • Embed
  • File
  • Footnotes
  • Heading
  • Home Link – Navigation
  • HTML
  • Image
  • Latest Comments
  • List
  • List Item
  • Login/logout
  • More (Read More)
  • Navigation
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Post Comments Form
  • Post Comments Link
  • Post Featured Image
  • Post Navigation Link
  • Post Terms
  • Query
  • Query Pagination
  • Quote
  • Read More
  • RSS
  • Site Logo
  • Site Tagline
  • Site Title
  • Social Link
  • Spacer
  • Tag Cloud
  • Template Part
  • Term Description
  • Video

Duotone

  • Video

Shadow

  • Archives
  • Audio
  • Avatar
  • Calendar
  • Categories
  • Code
  • Comment Author Avatar
  • Comment Author Name
  • Comment Content
  • Comment Date
  • Comment Edit Link
  • Comment Reply Link
  • Comment Template
  • Comments
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Comments Title
  • Cover
  • Details
  • Embed
  • File
  • Footnotes
  • Gallery
  • Group
  • Heading
  • Home Link – Navigation
  • HTML
  • Latest Comments
  • Latest Posts
  • List
  • List Item
  • Login/logout
  • Media & Text
  • More (Read More)
  • Navigation
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Paragraph
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Form
  • Post Comments Link
  • Post Date
  • Post Excerpt
  • Post Navigation Link
  • Post Template
  • Post Terms
  • Post Title
  • Preformatted
  • Pullquote
  • Query
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Quote
  • Read More
  • RSS
  • Search
  • Separator
  • Site Logo
  • Site Tagline
  • Site Title
  • Social Link
  • Social Links
  • Spacer
  • Table
  • Tag Cloud
  • Template Part
  • Term Description
  • Verse
  • Video

Background image

  • Archives
  • Audio
  • Avatar
  • Button
  • Buttons
  • Calendar
  • Categories
  • Code
  • Column
  • Columns
  • Comment Author Avatar
  • Comment Author Name
  • Comment Content
  • Comment Date
  • Comment Edit Link
  • Comment Reply Link
  • Comment Template
  • Comments
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Comments Title
  • Cover
  • Details
  • Embed
  • File
  • Footnotes
  • Gallery
  • Home Link – Navigation
  • HTML
  • Image
  • Latest Comments
  • Latest Posts
  • List
  • List Item
  • Login/logout
  • Media & Text
  • More (Read More)
  • Navigation
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Form
  • Post Comments Link
  • Post Content
  • Post Date
  • Post Excerpt
  • Post Featured Image
  • Post Navigation Link
  • Post Template
  • Post Terms
  • Post Title
  • Preformatted
  • Query
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Read More
  • RSS
  • Search
  • Separator
  • Site Tagline
  • Site Title
  • Social Link
  • Social Links
  • Spacer
  • Table
  • Tag Cloud
  • Template Part
  • Term Description
  • Video

PO/BB

(I'm unsure what this relates to: feedback welcome.)

  • Archives
  • Audio
  • Avatar
  • Buttons
  • Calendar
  • Categories
  • Code
  • Column
  • Columns
  • Comment Author Avatar
  • Comment Author Name
  • Comment Content
  • Comment Date
  • Comment Edit Link
  • Comment Reply Link
  • Comment Template
  • Comments
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Comments Title
  • Cover
  • Details
  • Embed
  • File
  • Footnotes
  • Gallery
  • Group
  • Heading
  • Home Link – Navigation
  • HTML
  • Latest Comments
  • Latest Posts
  • List
  • List Item
  • Login/logout
  • Media & Text
  • More (Read More)
  • Navigation
  • Navigation Link
  • Navigation Submenu
  • Next Page (Page Break)
  • Page List
  • Paragraph
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Form
  • Post Comments Link
  • Post Content
  • Post Date
  • Post Excerpt
  • Post Featured Image
  • Post Navigation Link
  • Post Template
  • Post Terms
  • Post Title
  • Preformatted
  • Pullquote
  • Query
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Quote
  • Read More
  • RSS
  • Search
  • Separator
  • Site Logo
  • Site Tagline
  • Site Title
  • Social Link
  • Social Links
  • Spacer
  • Table
  • Tag Cloud
  • Template Part
  • Term Description
  • Verse
  • Video
@markhowellsmead markhowellsmead added the [Type] Enhancement A suggestion for improvement. label Jul 2, 2024
@markhowellsmead
Copy link
Author

Cross-referencing #63001, #62693, #62258. If there are other issues open for this subject, then I'd be happy if they were referenced here.

@markhowellsmead
Copy link
Author

I've updated my original comment to include a task list of all the missing functionality.

@fabiankaegy
Copy link
Member

I think easy wins to start would be the dimension & border controls as they pretty much can apply to any block.

A lot of the other design tools like background image or layout are much more complex and don't really apply to everything

@markhowellsmead
Copy link
Author

I agree that a pragmatic approach is best; the way that the overall development of the blocks has been plans precludes a simpler approach in some cases. Can you expand on your comment, how some features “don’t apply”?

@fabiankaegy
Copy link
Member

fabiankaegy commented Jul 2, 2024

The layout design tool for example is only useful if your block is a grid / flex container. I'm not sure how that would apply to the image block for example 🤔

@t-hamano
Copy link
Contributor

t-hamano commented Jul 2, 2024

How about moving this proposal forward in #43241? There is also a linked sub-issue about individual block support.

@markhowellsmead
Copy link
Author

The layout design tool for example is only useful if your block is a grid / flex container. I'm not sure how that would apply to the image block for example 🤔

I agree, there are some which might not match with the requirements. I wanted to ensure that all of the specific tool are tracked, so it would be good for a second point-of-view for each control and its applicability for each block. I can then update the initial list.

@markhowellsmead
Copy link
Author

As mentioned in #43241: I imagine that a revised list would make sense once 6.6 drops. Does the task list belong here or there? I would imagine that having one issue per requirement would lead to them all receiving very little attention in the wider context.

@annezazu
Copy link
Contributor

annezazu commented Jul 2, 2024

Thanks for kicking this off! Like you, I want to see both styling support completed and items moved out of experimental. For now, let's consolidate. My preference would be to close this issue out and instead update this prior one for continuity: #43241.

Alongside the above, there's also work to stabilize typography supports which also helps this broader styling cause: #63001

@aaronrobertshaw
Copy link
Contributor

Does the task list belong here or there?

Some blocks deliberately omit a particular block support, for example, the Audio or Post Featured Image blocks and the typography support.

You'll find the design tooling tracking issues also indicate this via the 🚫 emoji. The legend on each issue will explain the other uses of emojis in their tables.

I've not had a chance to give the proposed list here much of a look but it does appear to retread a lot of old ground. I'd suggest that the existing tracking issues be used as the source of truth and updated with any new blocks and supports e.g. align and shadow.

To be eligible for the Layout support, blocks must be containers for other blocks. For example, if the block uses useInnerBlocksProps then it is a likely candidate for benefiting from the layout support. The blocks that appear to use this hook are below.

It's also worth noting that Layout support can't be as broadly adopted as this issue would suggest. A deliberate subset of blocks that were suitable candidates were identified on the Layout tracking issue. Any new blocks or candidates can be added there too.

My preference would be to close this issue out and instead update this prior one for continuity

+1 to closing this issue out in favour of the existing ones.

@andrewserong
Copy link
Contributor

+1 to the enthusiasm here and to consolidating with the existing tracking issue.

I would imagine that having one issue per requirement would lead to them all receiving very little attention in the wider context.

One thing to watch out for with task lists is ensuring that they're easy enough to update in an iterative way. My main concern with a comprehensive list as in this issue description is that it's many pages long, so could be hard to work with at a glance if someone goes to edit it. I'd recommend where possible using and/or updating the existing sub issues in #43241, in part because of:

Can you expand on your comment, how some features “don’t apply”?

It can sometimes be difficult to predict how and why a support might be hard to implement for a particular block. I.e. the block might have a particular markup structure or server-rendering that means it isn't very straightforward. So, it can be useful to contain the discussion to an issue that's related to that particular block support.

Another approach if there is a particular sub-set of features that folks would like to work on, is to create a more granular task issue of just the particular bit of work you'd like to see land in time for a release. I've tried to do that with #63001 as it seems fairly self-contained while still advancing a set of changes that should hopefully make a positive impact.

@markhowellsmead
Copy link
Author

Closing in favour of #43241.

@markhowellsmead
Copy link
Author

Additional comment: an overview of the individual design tasks as they apply to specific core blocks are summarised in #43241 under the sub-heading Tracking Issues for Individual Block Supports.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
6 participants