Converts save functions to render a static version of the block

This allows the block to display content in non-browser contexts like email.
WordPress · Jul 30, 2024 · 90af81e · 90af81e
1 parent 6d4f386
commit 90af81e
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 85 deletions.
diff --git a/packages/block-library/src/tab/edit.js b/packages/block-library/src/tab/edit.js
@@ -42,9 +42,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		}
 	}, [ label, setAttributes, tabIndex ] );
 
-	const blockProps = useBlockProps( {
-		className: isActive ? 'is-active' : '',
-	} );
+	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: hasChildBlocks
 			? undefined
@@ -54,6 +52,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		<div
 			{ ...innerBlocksProps }
 			aria-labelledby={ tabLabelId }
+			hidden={ ! isActive }
 			id={ tabPanelId }
 			role="tabpanel"
 		/>

diff --git a/packages/block-library/src/tab/save.js b/packages/block-library/src/tab/save.js
@@ -4,23 +4,12 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { anchor, slug, tabIndex } = attributes;
+	const { anchor, slug } = attributes;
 	const tabPanelId = anchor || slug;
-	const tabLabelId = tabPanelId + '--tab';
 
 	// The first tab in the set is always active on initial load.
-	const blockProps = useBlockProps.save( {
-		className: tabIndex === 0 ? 'is-active' : '',
-	} );
+	const blockProps = useBlockProps.save();
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return (
-		<div
-			{ ...innerBlocksProps }
-			aria-labelledby={ tabLabelId }
-			data-wp-class--is-active={ `${ tabIndex } === context.activeTab` }
-			id={ tabPanelId }
-			role="tabpanel"
-		/>
-	);
+	return <section { ...innerBlocksProps } id={ tabPanelId } />;
 }
diff --git a/packages/block-library/src/tab/style.scss b/packages/block-library/src/tab/style.scss
@@ -1,13 +1,7 @@
 .wp-block-tab {
-	display: none;
 	padding: 1em 0;
 
-	&.is-active {
-		display: block;
-	}
-
 	> *:first-child {
 		margin-top: 0;
 	}
 }
-
diff --git a/packages/block-library/src/tabs/block.json b/packages/block-library/src/tabs/block.json
@@ -15,10 +15,10 @@
 			"source": "query",
 			"selector": ".wp-block-tabs__tab-label",
 			"query": {
-				"id": {
+				"href": {
 					"type": "string",
 					"source": "attribute",
-					"attribute": "aria-controls"
+					"attribute": "href"
 				},
 				"label": {
 					"type": "string",

diff --git a/packages/block-library/src/tabs/edit.js b/packages/block-library/src/tabs/edit.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -117,7 +112,8 @@ export default function Edit( { clientId, setAttributes } ) {
 		setAttributes( {
 			innerTabs: innerTabBlocks.map( ( block ) => ( {
 				label: block.attributes.label,
-				id: block.attributes.anchor || block.attributes.slug,
+				href:
+					'#' + ( block.attributes.anchor || block.attributes.slug ),
 			} ) ),
 		} );
 
@@ -134,7 +130,7 @@ export default function Edit( { clientId, setAttributes } ) {
 		updateBlockAttributes,
 	] );
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { className: 'interactive' } );
 	const innerBlockProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-tabs__content',
@@ -165,14 +161,12 @@ export default function Edit( { clientId, setAttributes } ) {
 							<a
 								aria-controls={ tabPanelId }
 								aria-selected={ isActive }
-								className={ clsx( 'wp-block-tabs__tab-label', {
-									'is-active': isActive,
-								} ) }
+								className="wp-block-tabs__tab-label"
 								href={ '#' + tabPanelId }
 								id={ tabLabelId }
 								onClick={ () => setActiveTab( block.clientId ) }
 								role="tab"
-								tab-index={ tabIndexAttr }
+								tabIndex={ tabIndexAttr }
 							>
 								<RichText
 									allowedFormats={ ALLOWED_FORMATS }

diff --git a/packages/block-library/src/tabs/save.js b/packages/block-library/src/tabs/save.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { innerTabs } = attributes;
@@ -20,34 +16,18 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<div
-			{ ...blockProps }
-			data-wp-interactive="core/tabs"
-			data-wp-context='{ "activeTab": 0 }'
-		>
-			<ul className="wp-block-tabs__list" role="tablist">
+		<div { ...blockProps }>
+			{ /* translators: Title for a list of content sections linked below. */ }
+			<h3 className="wp-block-tabs__title">{ __( 'Contents' ) }</h3>
+			<ul className="wp-block-tabs__list">
 				{ innerTabs.map( ( tab, index ) => {
-					const isActive = index === 0;
-					const tabIndexAttr = isActive ? 0 : -1;
-					const tabLabelId = tab.id + '--tab';
+					const tabId = tab.href.replace( '#', '' ) + '--tab';
 					return (
-						<li
-							className="wp-block-tabs__list-item"
-							key={ index }
-							role="presentation"
-						>
+						<li className="wp-block-tabs__list-item" key={ index }>
 							<RichText.Content
-								aria-controls={ tab.id }
-								data-wp-bind--aria-selected={ `${ index } === context.activeTab` }
-								data-wp-class--is-active={ `${ index } === context.activeTab` }
-								data-wp-on--click={ `actions.setActiveTab.bind( null, ${ index } )` }
-								className={ clsx( 'wp-block-tabs__tab-label', {
-									'is-active': isActive,
-								} ) }
-								href={ '#' + tab.id }
-								id={ tabLabelId }
-								role="tab"
-								tab-index={ tabIndexAttr }
+								id={ tabId }
+								className="wp-block-tabs__tab-label"
+								href={ tab.href }
 								tagName="a"
 								value={ tab.label }
 							/>

diff --git a/packages/block-library/src/tabs/style.scss b/packages/block-library/src/tabs/style.scss
@@ -1,24 +1,30 @@
-.wp-block-tabs__list {
-	display: flex;
-	gap: 10px;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
+.wp-block-tabs.interactive {
+	.wp-block-tabs__title {
+		display: none;
+	}
+
+	.wp-block-tabs__list {
+		display: flex;
+		gap: 10px;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
 
-.wp-block-tabs__tab-label {
-	display: block;
-	margin: 0;
-	opacity: 0.5;
-	padding: $grid-unit;
-	text-decoration: none;
+	.wp-block-tabs__tab-label {
+		display: block;
+		margin: 0;
+		opacity: 0.5;
+		padding: $grid-unit;
+		text-decoration: none;
 
-	&.is-active {
-		border-bottom: currentColor 2px solid;
-		opacity: 1;
+		&[aria-selected="true"] {
+			border-bottom: currentColor 2px solid;
+			opacity: 1;
+		}
 	}
-}
 
-.wp-block-tabs__content {
-	border-top: var(--wp--preset--color--accent) 2px solid;
+	.wp-block-tabs__content {
+		border-top: var(--wp--preset--color--accent) 2px solid;
+	}
 }