Problem/Motivation

Gutenberg 24 (block-library 11) ships Accordion, Tabs, Icon and Social Icons as stable blocks, and the module lets editors allow them per content type, but none of them fully works:

  • Accordion: the items don't open or close on the page. The gutenberg/interactivity library points to js/vendor/gutenberg/interactivity/index.min.js, which no longer exists since the 23.0.1 update, so no view script that uses the Interactivity API runs (accordion, tabs, file, playlist). The accordion item preprocess also binds an action that upstream removed, and the templates rebuild the wrapper, which loses what save() wrote on it (e.g. role="group").
  • Tabs: the module still targets the experimental blocks (core/tab, core/tabs-menu, core/tabs-menu-item), which upstream replaced with core/tab-list, core/tab-panels and core/tab-panel. The new child blocks aren't registered, so the block can't even be inserted.
  • Icon: the editor loads the icons from /wp/v2/icons and /wp/v2/icon-collections, which the API mock doesn't handle, so the icon library is empty. The block has no saved markup and no Drupal render, so nothing shows on the page.
  • Social Icons: the links ignore the settings of the Social Icons block ("Open links in new tab", "Show text", icon colors), as Drupal doesn't pass block context to inner blocks.
  • Math: the block saves an empty formula. It loads @wordpress/latex-to-mathml with import(), and the vendor build exposes that package's global so that the editor gets an object instead of the conversion function.
  • The wp_should_skip_block_supports_serialization() shim always returns FALSE, so blocks that apply some supports to an inner element (Button, Image, Table, Separator, Icon…) get those styles on their wrapper too.
  • The base theme has no styles for Accordion and Tabs.

Steps to reproduce

  1. Allow Accordion, Tabs, Icon and Social icons on a content type (Manage Gutenberg).
  2. Add an accordion: on the page, clicking an item doesn't open it.
  3. Try to insert Tabs: the block can't be added with its tab list and panels.
  4. Add an Icon and open "Replace": the icon library is empty; the saved page shows no icon.
  5. Add Social icons with "Open links in new tab": the links open in the same tab.

Proposed resolution

  • Point the interactivity library to index.js, and keep it (and fit-text-view, also lost in a regeneration) in the preserved libraries of gutenberg-dependencies.php.
  • Block context: GutenbergFilter gives inner blocks the context of their ancestors (providesContext in block.json, with defaults), in $block['context'] and in a new block_context template variable. New hook_gutenberg_block_context_alter(), the counterpart of the render_block_context filter.
  • Accordion: port the upstream render of core/accordion and core/accordion-item onto the saved markup. As Drupal doesn't process directives on the server, also write their initial state (aria-expanded, hidden="until-found" on closed panels, so find in page still opens them).
  • Tabs: use the current block names in gutenberg.blocks.yml and the always-registered child blocks, port the upstream render of core/tabs, core/tab-list and core/tab-panel (tab IDs through block context), and remove the stale vendor directories. copy-block-assets.js now removes the directories of blocks that block-library no longer ships.
  • Icon: an icon registry service (gutenberg.icon_registry) with the public icons of @wordpress/icons (collection "Gutenberg", copied at build:vendor time by scripts/copy-icons.js) and the collections that themes and modules declare with a new icons: key in their *.gutenberg.yml. Editor routes /editor/icon-collections and /editor/icons back the mocked REST paths, and a preprocess renders the SVG with the block's color, border, padding and width.
  • Social Icons: the social link preprocess reads the block context of its Social Icons block; core/social-link becomes an always-allowed child block.
  • Port wp_should_skip_block_supports_serialization() from upstream.
  • Remove the experimental Form blocks, which block-library 11 no longer ships, from the allowed blocks list.
  • Base theme: style Accordion (the Details look) and Tabs in the design system, and add the theme's Lucide icons as an icon collection.
  • Playwright tests for Accordion and Tabs, Icon, and Social Icons (and the skipped Button serialization).

Remaining tasks

  • Review
  • Sync the new design files to the design project

User interface changes

  • Accordion, Tabs, Icon and Social Icons work in the editor and on the page.
  • The Icon library offers the "Gutenberg" icons and those of the default theme and modules ("Gutenberg Base" with the base theme).
  • The Manage Gutenberg tab no longer offers the Form blocks, nor the old Tabs child blocks.

API changes

  • New hook_gutenberg_block_context_alter(array &$context, array $block).
  • New block_context variable in gutenberg-block templates.
  • New icons: key in *.gutenberg.yml, and the gutenberg.icon_registry service.
  • New routes gutenberg.icon_collections, gutenberg.icons and gutenberg.icon.
  • wp_should_skip_block_supports_serialization() now honors __experimentalSkipSerialization, so block processors no longer add skipped supports to the wrapper.

Data model changes

None. Content saved with the experimental Tabs blocks (Gutenberg 23 and earlier) has no upstream migration and shows as unsupported blocks.

Release notes snippet

The Accordion, Tabs, Icon and Social Icons blocks now work. Themes and modules can add icon collections to the Icon block with icons: in their *.gutenberg.yml.

Issue fork gutenberg-3629679

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

marcofernandes created an issue. See original summary.

marcofernandes’s picture

Issue summary: View changes
marcofernandes’s picture

Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • marcofernandes committed 62387bdf on 4.0.x
    Issue #3629679: Make the Accordion, Tabs, Icon and Social Icons blocks...