Tracking: Style Book iterative tasks

[vcanales]

Part of:

• Global Styles Ongoing Roadmap #41232

Several pieces comprise the work required to iterate over the discussion in #53431, so I'm starting this tracking issue to compile the efforts:

TODO

• Implement layout/design in Style Book: Iterate on presentation and design #53431
• Create/collate example blocks for the landing category. Include said category. Add click events that open corresponding category tabs.
• Look at how themes can define their own examples for the "Overview" category.
• Come up with a way for the UI to display lots of categories.
• Create missing block examples where appropriate and possible.
  - Query Pagination Link (Previous)
  - Query Pagination Link (Next)
  - Post Comments Count
  - Post Comments Link
  The above blocks rely on block context data. Without that context they do not render anything.
• Editor Canvas Container: refactor and isolate to the site editor #62216
• Style Book: Integrate patterns #53437

In Progress

• Site editor: integrate global styles controls and style book preview into the styles panel  #65619
• Update stylebook designs #64705
• Style Book: Add color tab #65692
• Proposal: add subcategories to block.json #64706
• Style book: create static categories #65430
• Style book: display registered categories #65507
  Update block categories based on categories proposed via the Style Book refresh Exploration #64080

Misc bugs and enhancements

• Style Book: iframe brings an additional tab stop in between tablist and tabpanel #65065
• Direct URL to the style book #51121
• Style Book: Inconsistent preview of Custom HTML widget between styles variations #48152
• Separator Block: user colors styles are not merged with base theme.json correctly, style book CSS overrides user margin values #57297
• Style book and global styles revisions: zoomed out mode and device switching doesn't work #65630

Not planned

• Style Book: Ability to focus on individual block types. #53432

[ramonjd]

Come up with a way for the UI to display lots of categories.

Was playing around with something like this. Rough, but you get the idea:

2024-09-23.17.05.18.mp4

[ramonjd]

Look at how themes can define their own examples for the "Overview" category.

The MVP would be to create a static, curated list of Core blocks to display on the landing page. See: #53431 (comment)

The style book landing page would, however, provide a convenient space to feature a theme's custom blocks or (one day) patterns.

That means that Gutenberg would need to define a, or piggyback off an existing, API to allow themes et. al to register blocks/patterns that should feature on the landing page. Ideally, the order in which they appear should be configurable.

Some random thoughts/options:

• Create a new core category/taxonomy for the style book landing page - one that blocks and patterns could share. Patterns can have one or more categories. Block cannot. It might be useful for blocks to also support category lists, or subcategories so that they can "live" in two categories at once, for example, "text" and "featured/style-book/whatever"
• Build up on existing Block/Patterns API to support a flag during block registration, e.g., $config['featured'] = true.
• Create an interface/function/hook to add blocks/patterns to the style book landing page that would, behind the scenes, add a custom, but "hidden" category/taxonomy to the block/pattern. E.g., add_filter( 'add_to_style_book', $block_or_pattern_name, $order ).
• ??

[ramonjd]

Come up with a way for the UI to display lots of categories.

The tabs component is used to display the categories. The tab can display with horizontal scrolling —https://wordpress.github.io/gutenberg/?path=/story/components-tabs--size-and-overflow-playground — but it'd be good to be able scroll to the active tab.

[yogeshbhutkar]

Refactor Blocks for Translatable Text in block.json's example attribute

Refactor the following blocks to implement translatable text in contrast to static text in the block.json example. Ensure that the text strings are properly marked for translation, and all necessary fields in block.json's example attribute are updated accordingly to support internationalization (i18n).

Tracker

• comments-pagination-next
• comments-pagination-previous
• post-navigation-link
• query-no-results
• table-of-contents