>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3629679. --> Reported by: [marcofernandes](https://www.drupal.org/user/2127558) Related to !293 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>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:</p> <ul> <li><strong>Accordion</strong>: the items don't open or close on the page. The <code>gutenberg/interactivity</code> library points to <code>js/vendor/gutenberg/interactivity/index.min.js</code>, 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 <code>save()</code> wrote on it (e.g. <code>role="group"</code>).</li> <li><strong>Tabs</strong>: the module still targets the experimental blocks (<code>core/tab</code>, <code>core/tabs-menu</code>, <code>core/tabs-menu-item</code>), which upstream replaced with <code>core/tab-list</code>, <code>core/tab-panels</code> and <code>core/tab-panel</code>. The new child blocks aren't registered, so the block can't even be inserted.</li> <li><strong>Icon</strong>: the editor loads the icons from <code>/wp/v2/icons</code> and <code>/wp/v2/icon-collections</code>, 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.</li> <li><strong>Social Icons</strong>: 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.</li> <li><strong>Math</strong>: the block saves an empty formula. It loads <code>@wordpress/latex-to-mathml</code> with <code>import()</code>, and the vendor build exposes that package's global so that the editor gets an object instead of the conversion function.</li> <li>The <code>wp_should_skip_block_supports_serialization()</code> shim always returns <code>FALSE</code>, so blocks that apply some supports to an inner element (Button, Image, Table, Separator, Icon&hellip;) get those styles on their wrapper too.</li> <li>The base theme has no styles for Accordion and Tabs.</li> </ul> <h3 id="summary-steps-reproduce">Steps to reproduce</h3> <ol> <li>Allow Accordion, Tabs, Icon and Social icons on a content type (Manage Gutenberg).</li> <li>Add an accordion: on the page, clicking an item doesn't open it.</li> <li>Try to insert Tabs: the block can't be added with its tab list and panels.</li> <li>Add an Icon and open "Replace": the icon library is empty; the saved page shows no icon.</li> <li>Add Social icons with "Open links in new tab": the links open in the same tab.</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ul> <li>Point the <code>interactivity</code> library to <code>index.js</code>, and keep it (and <code>fit-text-view</code>, also lost in a regeneration) in the preserved libraries of <code>gutenberg-dependencies.php</code>.</li> <li><strong>Block context</strong>: <code>GutenbergFilter</code> gives inner blocks the context of their ancestors (<code>providesContext</code> in block.json, with defaults), in <code>$block['context']</code> and in a new <code>block_context</code> template variable. New <code>hook_gutenberg_block_context_alter()</code>, the counterpart of the <code>render_block_context</code> filter.</li> <li><strong>Accordion</strong>: port the upstream render of <code>core/accordion</code> and <code>core/accordion-item</code> onto the saved markup. As Drupal doesn't process directives on the server, also write their initial state (<code>aria-expanded</code>, <code>hidden="until-found"</code> on closed panels, so find in page still opens them).</li> <li><strong>Tabs</strong>: use the current block names in <code>gutenberg.blocks.yml</code> and the always-registered child blocks, port the upstream render of <code>core/tabs</code>, <code>core/tab-list</code> and <code>core/tab-panel</code> (tab IDs through block context), and remove the stale vendor directories. <code>copy-block-assets.js</code> now removes the directories of blocks that block-library no longer ships.</li> <li><strong>Icon</strong>: an icon registry service (<code>gutenberg.icon_registry</code>) with the public icons of <code>@wordpress/icons</code> (collection "Gutenberg", copied at <code>build:vendor</code> time by <code>scripts/copy-icons.js</code>) and the collections that themes and modules declare with a new <code>icons:</code> key in their <code>*.gutenberg.yml</code>. Editor routes <code>/editor/icon-collections</code> and <code>/editor/icons</code> back the mocked REST paths, and a preprocess renders the SVG with the block's color, border, padding and width.</li> <li><strong>Social Icons</strong>: the social link preprocess reads the block context of its Social Icons block; <code>core/social-link</code> becomes an always-allowed child block.</li> <li>Port <code>wp_should_skip_block_supports_serialization()</code> from upstream.</li> <li>Remove the experimental Form blocks, which block-library 11 no longer ships, from the allowed blocks list.</li> <li><strong>Base theme</strong>: style Accordion (the Details look) and Tabs in the design system, and add the theme's Lucide icons as an icon collection.</li> <li>Playwright tests for Accordion and Tabs, Icon, and Social Icons (and the skipped Button serialization).</li> </ul> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Review</li> <li>Sync the new design files to the design project</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <ul> <li>Accordion, Tabs, Icon and Social Icons work in the editor and on the page.</li> <li>The Icon library offers the "Gutenberg" icons and those of the default theme and modules ("Gutenberg Base" with the base theme).</li> <li>The Manage Gutenberg tab no longer offers the Form blocks, nor the old Tabs child blocks.</li> </ul> <h3 id="summary-api-changes">API changes</h3> <ul> <li>New <code>hook_gutenberg_block_context_alter(array &amp;amp;$context, array $block)</code>.</li> <li>New <code>block_context</code> variable in <code>gutenberg-block</code> templates.</li> <li>New <code>icons:</code> key in <code>*.gutenberg.yml</code>, and the <code>gutenberg.icon_registry</code> service.</li> <li>New routes <code>gutenberg.icon_collections</code>, <code>gutenberg.icons</code> and <code>gutenberg.icon</code>.</li> <li><code>wp_should_skip_block_supports_serialization()</code> now honors <code>__experimentalSkipSerialization</code>, so block processors no longer add skipped supports to the wrapper.</li> </ul> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None. Content saved with the experimental Tabs blocks (Gutenberg 23 and earlier) has no upstream migration and shows as unsupported blocks.</p> <h3 id="summary-release-notes">Release notes snippet</h3> <p>The Accordion, Tabs, Icon and Social Icons blocks now work. Themes and modules can add icon collections to the Icon block with <code>icons:</code> in their <code>*.gutenberg.yml</code>.</p>