Skip to content

Tabs: Fix saved HTML #75580

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.

Sign up for GitHub

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

Merged
mikachan merged 4 commits into from
Feb 17, 2026
Merged

Tabs: Fix saved HTML #75580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9481b74
Remove span element from tabs-menu-item
mikachan Feb 16, 2026
f5257a2
Remove hidden attr
mikachan Feb 16, 2026
2336e7f
Add tabpanel role
mikachan Feb 16, 2026
39a5e00
Update test fixtures
mikachan Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/block-library/src/tab/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ export default function save( { attributes } ) {

const tabPanelId = anchor;

const blockProps = useBlockProps.save();
const blockProps = useBlockProps.save( {
role: 'tabpanel',
} );
const innerBlocksProps = useInnerBlocksProps.save( blockProps );

return <section { ...innerBlocksProps } id={ tabPanelId } />;
Expand Down
13 changes: 3 additions & 10 deletions packages/block-library/src/tabs-menu-item/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
Expand All @@ -27,20 +26,14 @@ export default function save( { attributes } ) {
}

// useBlockProps.save includes all core style engine classes and styles
// We add our custom classes and the hidden attribute for PHP template extraction
// The button content is replaced by PHP during rendering, so we output
// an empty button as a template.
const blockProps = useBlockProps.save( {
className: 'wp-block-tabs-menu-item__template',
style: customColorStyles,
hidden: true,
type: 'button',
role: 'tab',
} );

return (
<button { ...blockProps }>
<span className="screen-reader-text">
{ __( 'Tab menu item' ) }
</span>
</button>
);
return <button { ...blockProps } />;
}
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__tab-panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!-- wp:tab-panel -->
<div class="wp-block-tab-panel">
<!-- wp:tab {"label":"Tab 1"} -->
<section class="wp-block-tab">
<section role="tabpanel" class="wp-block-tab">
<!-- wp:paragraph -->
<p>Content inside the tab panel.</p>
<!-- /wp:paragraph -->
Expand Down
4 changes: 2 additions & 2 deletions test/integration/fixtures/blocks/core__tab-panel.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
]
}
],
"innerHTML": "\n\t<section class=\"wp-block-tab\">\n\t\t\n\t</section>\n\t",
"innerHTML": "\n\t<section role=\"tabpanel\" class=\"wp-block-tab\">\n\t\t\n\t</section>\n\t",
"innerContent": [
"\n\t<section class=\"wp-block-tab\">\n\t\t",
"\n\t<section role=\"tabpanel\" class=\"wp-block-tab\">\n\t\t",
null,
"\n\t</section>\n\t"
]
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__tab-panel.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- wp:tab-panel -->
<div class="wp-block-tab-panel"><!-- wp:tab {"label":"Tab 1"} -->
<section class="wp-block-tab"><!-- wp:paragraph -->
<section role="tabpanel" class="wp-block-tab"><!-- wp:paragraph -->
<p>Content inside the tab panel.</p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab --></div>
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__tab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:tab {"label":"Tab Label"} -->
<section class="wp-block-tab">
<section role="tabpanel" class="wp-block-tab">
<!-- wp:paragraph -->
<p>Tab content goes here.</p>
<!-- /wp:paragraph -->
Expand Down
4 changes: 2 additions & 2 deletions test/integration/fixtures/blocks/core__tab.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
"innerContent": [ "\n\t<p>Tab content goes here.</p>\n\t" ]
}
],
"innerHTML": "\n<section class=\"wp-block-tab\">\n\t\n</section>\n",
"innerHTML": "\n<section role=\"tabpanel\" class=\"wp-block-tab\">\n\t\n</section>\n",
"innerContent": [
"\n<section class=\"wp-block-tab\">\n\t",
"\n<section role=\"tabpanel\" class=\"wp-block-tab\">\n\t",
null,
"\n</section>\n"
]
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__tab.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:tab {"label":"Tab Label"} -->
<section class="wp-block-tab"><!-- wp:paragraph -->
<section role="tabpanel" class="wp-block-tab"><!-- wp:paragraph -->
<p>Tab content goes here.</p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab -->
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__tabs-menu-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item -->
4 changes: 2 additions & 2 deletions test/integration/fixtures/blocks/core__tabs-menu-item.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
"blockName": "core/tabs-menu-item",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n",
"innerHTML": "\n<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n",
"innerContent": [
"\n<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n"
"\n<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n"
]
}
]
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__tabs-menu-item.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item -->
4 changes: 2 additions & 2 deletions test/integration/fixtures/blocks/core__tabs-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!-- wp:tabs-menu -->
<div class="wp-block-tabs-menu" role="tablist">
<!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item -->

<!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item -->
</div>
<!-- /wp:tabs-menu -->
8 changes: 4 additions & 4 deletions test/integration/fixtures/blocks/core__tabs-menu.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@
"blockName": "core/tabs-menu-item",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n\t",
"innerHTML": "\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n\t",
"innerContent": [
"\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n\t"
"\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n\t"
]
},
{
"blockName": "core/tabs-menu-item",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n\t",
"innerHTML": "\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n\t",
"innerContent": [
"\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n\t"
"\n\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n\t"
]
}
],
Expand Down
4 changes: 2 additions & 2 deletions test/integration/fixtures/blocks/core__tabs-menu.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- wp:tabs-menu -->
<div role="tablist" class="wp-block-tabs-menu"><!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item -->

<!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item --></div>
<!-- /wp:tabs-menu -->
8 changes: 4 additions & 4 deletions test/integration/fixtures/blocks/core__tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,27 @@
<!-- wp:tabs-menu -->
<div class="wp-block-tabs-menu" role="tablist">
<!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item -->
</div>
<!-- /wp:tabs-menu -->

<!-- wp:tab-panel -->
<div class="wp-block-tab-panel">
<!-- wp:tab {"label":"Tab 1"} -->
<section class="wp-block-tab">
<section role="tabpanel" class="wp-block-tab">
<!-- wp:paragraph -->
<p>Pariatur commodo sint mollit. Veniam Lorem labore voluptate fugiat. Ad nulla est labore cillum cillum qui nostrud do incididunt eiusmod.</p>
<!-- /wp:paragraph -->
</section>
<!-- /wp:tab -->

<!-- wp:tab {"label":"Tab 2"} -->
<section class="wp-block-tab"></section>
<section role="tabpanel" class="wp-block-tab"></section>
<!-- /wp:tab -->

<!-- wp:tab {"label":"Tab 3"} -->
<section class="wp-block-tab"></section>
<section role="tabpanel" class="wp-block-tab"></section>
<!-- /wp:tab -->
</div>
<!-- /wp:tab-panel -->
Expand Down
16 changes: 8 additions & 8 deletions test/integration/fixtures/blocks/core__tabs.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
"blockName": "core/tabs-menu-item",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n\t\t",
"innerHTML": "\n\t\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n\t\t",
"innerContent": [
"\n\t\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" hidden type=\"button\" role=\"tab\"><span class=\"screen-reader-text\">Tab menu item</span></button>\n\t\t"
"\n\t\t<button class=\"wp-block-tabs-menu-item wp-block-tabs-menu-item__template\" type=\"button\" role=\"tab\"></button>\n\t\t"
]
}
],
Expand Down Expand Up @@ -44,9 +44,9 @@
]
}
],
"innerHTML": "\n\t\t<section class=\"wp-block-tab\">\n\t\t\t\n\t\t</section>\n\t\t",
"innerHTML": "\n\t\t<section role=\"tabpanel\" class=\"wp-block-tab\">\n\t\t\t\n\t\t</section>\n\t\t",
"innerContent": [
"\n\t\t<section class=\"wp-block-tab\">\n\t\t\t",
"\n\t\t<section role=\"tabpanel\" class=\"wp-block-tab\">\n\t\t\t",
null,
"\n\t\t</section>\n\t\t"
]
Expand All @@ -57,9 +57,9 @@
"label": "Tab 2"
},
"innerBlocks": [],
"innerHTML": "\n\t\t<section class=\"wp-block-tab\"></section>\n\t\t",
"innerHTML": "\n\t\t<section role=\"tabpanel\" class=\"wp-block-tab\"></section>\n\t\t",
"innerContent": [
"\n\t\t<section class=\"wp-block-tab\"></section>\n\t\t"
"\n\t\t<section role=\"tabpanel\" class=\"wp-block-tab\"></section>\n\t\t"
]
},
{
Expand All @@ -68,9 +68,9 @@
"label": "Tab 3"
},
"innerBlocks": [],
"innerHTML": "\n\t\t<section class=\"wp-block-tab\"></section>\n\t\t",
"innerHTML": "\n\t\t<section role=\"tabpanel\" class=\"wp-block-tab\"></section>\n\t\t",
"innerContent": [
"\n\t\t<section class=\"wp-block-tab\"></section>\n\t\t"
"\n\t\t<section role=\"tabpanel\" class=\"wp-block-tab\"></section>\n\t\t"
]
}
],
Expand Down
8 changes: 4 additions & 4 deletions test/integration/fixtures/blocks/core__tabs.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<!-- wp:tabs -->
<div class="wp-block-tabs"><!-- wp:tabs-menu -->
<div role="tablist" class="wp-block-tabs-menu"><!-- wp:tabs-menu-item -->
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" hidden type="button" role="tab"><span class="screen-reader-text">Tab menu item</span></button>
<button class="wp-block-tabs-menu-item wp-block-tabs-menu-item__template" type="button" role="tab"></button>
<!-- /wp:tabs-menu-item --></div>
<!-- /wp:tabs-menu -->

<!-- wp:tab-panel -->
<div class="wp-block-tab-panel"><!-- wp:tab {"label":"Tab 1"} -->
<section class="wp-block-tab"><!-- wp:paragraph -->
<section role="tabpanel" class="wp-block-tab"><!-- wp:paragraph -->
<p>Pariatur commodo sint mollit. Veniam Lorem labore voluptate fugiat. Ad nulla est labore cillum cillum qui nostrud do incididunt eiusmod.</p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab -->

<!-- wp:tab {"label":"Tab 2"} -->
<section class="wp-block-tab"></section>
<section role="tabpanel" class="wp-block-tab"></section>
<!-- /wp:tab -->

<!-- wp:tab {"label":"Tab 3"} -->
<section class="wp-block-tab"></section>
<section role="tabpanel" class="wp-block-tab"></section>
<!-- /wp:tab --></div>
<!-- /wp:tab-panel --></div>
<!-- /wp:tabs -->
Loading