Loading
Issue #3629679: Make the Accordion, Tabs, Icon and Social Icons blocks work
Closes #3629679
Accordion, Tabs, Icon and Social Icons are stable blocks in Gutenberg 24, but didn't work on Drupal.
Changes
- Interactivity API:
fit-text-viewstays in the preserved libraries ofgutenberg-dependencies.php, next tointeractivity. (#3628775 already pointedgutenberg/interactivitytoindex.json 4.0.x, so the view scripts of accordion, tabs, file and playlist run.) - Block context:
GutenbergFiltergives inner blocks the context of their ancestors (providesContextin block.json, with defaults). It's in$block['context']and in a newblock_contexttemplate variable, andhook_gutenberg_block_context_alter()is the counterpart ofrender_block_context. - Accordion: ports the upstream render onto the saved markup, so the templates keep what
save()wrote (e.g.role="group"). Drupal doesn't process directives on the server, so the preprocess also writes their initial state (aria-expanded,hidden="until-found"on closed panels). - Tabs:
- Uses the current blocks (
core/tab-list,core/tab-panels,core/tab-panel) ingutenberg.blocks.ymland the always-registered child blocks. - Ports their render, with the tab IDs passed through block context.
copy-block-assets.jsremoves the vendor directories of blocks that block-library no longer ships: the old Tabs blocks and the Form blocks, which are also gone from the allowed blocks.
- Uses the current blocks (
- Icon:
gutenberg.icon_registryserves the public icons of@wordpress/icons, labelled "Gutenberg" and copied byscripts/copy-icons.jsduringbuild:vendor, plus the collections that themes and modules declare withicons:in their*.gutenberg.yml./editor/icon-collectionsand/editor/iconsback the mocked/wp/v2/icon*paths.- A preprocess renders the SVG with the color, border, padding and width of the block.
- Sizes: themes can offer sizes with
dimensions.dimensionSizes, for one block in__experimentalFeatures.blocks.core/icon.PresetCssGeneratornow defines the--wp--preset--dimension--*variables, and the presets of blocks on the block's.wp-block-*class. Editors can still enter a custom width; upstream has no setting to prevent it. Without a width, an icon is 24px, the default of thetheme.jsonof WordPress (:root :where(.wp-block-icon svg)incss/blocks-view.cssand the editor styles); block-library alone makes it as wide as the content.
- Social Icons: links follow "Open links in new tab", "Show text" and the icon colors of their Social Icons block.
- Math: the block saved an empty
<math>. It loads@wordpress/latex-to-mathmlwithimport(), which wraps thewindow.wp.latexToMathmlglobal in a namespace whosedefaultis the global itself, so the editor threwe.default is not a function.latex-to-mathmlis now inDEFAULT_EXPORT_PACKAGESofwebpack.vendor.config.js, likeapi-fetch. This also fixes the inline math format. Math blocks saved before get their MathML back when they are edited and saved again. - Skipped serialization:
wp_should_skip_block_supports_serialization()is ported from upstream, so Button, Image, Table, Separator and Icon no longer get their skipped supports on the wrapper. - Base theme:
- Styles Accordion (the Details look) and Tabs in the design system.
- Registers its Lucide icons as the "Gutenberg Base" icon collection, and offers four icon sizes from its spacing scale.
- Turns on the dimension controls that
appearanceToolsof itstheme.jsonimplies; without them the Icon block had no Width control. - Keeps social icons as tall as the icon (the link was
inline-flexin a line box). - Centers the accordion chevron on the title.
Content saved with the experimental Tabs blocks (Gutenberg 23 and earlier) has no upstream migration and shows as unsupported blocks.
Testing
- New Playwright specs:
accordion-tabs,icon,mathandsocial-links(the last also covers Button serialization). - Manually: allow the blocks on a content type, then add them with the base theme as default theme.
Edited by Marco Fernandes