@wordpress/block-library 9.33.4 → 9.34.1-next.2f1c7c01b.0

package/src/navigation-submenu/edit.js

@@ -391,9 +391,7 @@ export default function NavigationSubmenuEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
-				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<ParentElement className="wp-block-navigation-item__content">
-					{ /* eslint-enable */ }
 					<RichText
 						ref={ ref }
 						identifier="label"
@@ -447,7 +445,7 @@ export default function NavigationSubmenuEdit( {
 								if ( isEntityLink ) {
 									createBinding( updatedAttributes );
 								} else {
-									clearBinding( updatedAttributes );
+									clearBinding();
 								}
 							} }
 						/>

package/src/site-logo/edit.js

@@ -133,12 +133,8 @@ const SiteLogo = ( {
 	);
 
 	let imgWrapper = img;
-
-	// Disable reason: Image itself is not meant to be interactive, but
-	// should direct focus to block.
 	if ( isLink ) {
 		imgWrapper = (
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<a
 				href={ siteUrl }
 				className="custom-logo-link"
@@ -148,7 +144,6 @@ const SiteLogo = ( {
 			>
 				{ img }
 			</a>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 		);
 	}
 

package/src/style.scss

@@ -69,8 +69,10 @@
 @use "./social-links/style.scss" as *;
 @use "./spacer/style.scss" as *;
 @use "./tag-cloud/style.scss" as *;
+@use "./tab/style.scss" as *;
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
+@use "./tabs/style.scss" as *;
 @use "./term-count/style.scss" as *;
 @use "./term-description/style.scss" as *;
 @use "./term-name/style.scss" as *;

package/src/tab/add-tab-toolbar-control.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * "Add Tab" button in the block toolbar for the tab block.
+ * @param {Object} props
+ * @param {Object} props.attributes   The block attributes.
+ * @param {string} props.tabsClientId The client ID of the parent tabs block.
+ * @return {JSX.Element} The toolbar control element.
+ */
+export default function AddTabToolbarControl( { attributes, tabsClientId } ) {
+	const { insertBlock } = useDispatch( blockEditorStore );
+
+	const { className, fontFamily, fontSize } = attributes;
+
+	const addTab = () => {
+		const newTabBlock = createBlock( 'core/tab', {
+			className,
+			fontFamily,
+			fontSize,
+		} );
+		insertBlock( newTabBlock, undefined, tabsClientId );
+	};
+
+	return (
+		<BlockControls group="block">
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control"
+					label={ __( 'Add Tab' ) }
+					onClick={ addTab }
+					showTooltip
+					text={ __( 'Add Tab' ) }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

package/src/tab/block.json

@@ -0,0 +1,50 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"__experimental": true,
+	"apiVersion": 3,
+	"name": "core/tab",
+	"title": "Tab",
+	"description": "Content for a tab in a tabbed interface.",
+	"version": "1.0.0",
+	"category": "design",
+	"textdomain": "default",
+	"attributes": {
+		"label": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "core/tabs" ],
+	"supports": {
+		"anchor": true,
+		"html": false,
+		"reusable": false,
+		"layout": {
+			"allowSwitching": true,
+			"allowInheriting": false,
+			"allowVerticalAlignment": true,
+			"allowJustification": true,
+			"allowOrientation": true,
+			"allowSizingOnChildren": true
+		},
+		"spacing": {
+			"blockGap": true,
+			"padding": true,
+			"margin": false
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"__experimentalFontFamily": true
+			},
+			"__experimentalSkipSerialization": true
+		}
+	},
+	"providesContext": {
+		"core/tab-label": "label"
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}

package/src/tab/controls.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import AddTabToolbarControl from './add-tab-toolbar-control';
+import slugFromLabel from './slug-from-label';
+
+export default function Controls( {
+	attributes,
+	setAttributes,
+	tabsClientId,
+	blockIndex,
+	isDefaultTab,
+} ) {
+	const { label } = attributes;
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	return (
+		<>
+			<AddTabToolbarControl
+				tabsClientId={ tabsClientId }
+				attributes={ attributes }
+			/>
+			<InspectorControls>
+				<PanelBody title={ __( 'Tab Settings' ) }>
+					<TextControl
+						label={ __( 'Tab Label' ) }
+						value={ decodeEntities( label ) }
+						onChange={ ( value ) => {
+							setAttributes( {
+								label: value,
+								anchor: slugFromLabel( value, blockIndex ),
+							} );
+						} }
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					/>
+					<ToggleControl
+						label={ __( 'Default Tab' ) }
+						checked={ isDefaultTab }
+						onChange={ ( value ) => {
+							updateBlockAttributes( tabsClientId, {
+								activeTabIndex: value ? blockIndex : 0,
+							} );
+						} }
+						help={ __(
+							'If toggled, this tab will be selected when the page loads.'
+						) }
+						__nextHasNoMarginBottom
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</>
+	);
+}

package/src/tab/edit.js

@@ -0,0 +1,248 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	getTypographyClassesAndStyles as useTypographyProps,
+	__experimentalUseColorProps as useColorProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useMemo,
+	useRef,
+	useEffect,
+	useCallback,
+	useState,
+} from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import Controls from './controls';
+import slugFromLabel from './slug-from-label';
+import TabsList from './tabs-list';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __( 'Type / to add a block to tab' ),
+		},
+	],
+];
+
+const { requestAnimationFrame, cancelAnimationFrame } = window;
+
+export default function Edit( {
+	attributes,
+	clientId,
+	isSelected,
+	setAttributes,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	const innerBlocksRef = useRef( null );
+	const focusRef = useRef();
+	const [ isInitialMount, setIsInitialMount ] = useState( true );
+	const labelElementRef = useRef( null );
+
+	const { anchor, label } = attributes;
+
+	// Callback ref that stores the element and focuses on initial mount.
+	const labelRef = useCallback(
+		( node ) => {
+			labelElementRef.current = node;
+			if ( node && isInitialMount ) {
+				// Focus immediately when ref is set on initial mount.
+				const animationId = requestAnimationFrame( () => {
+					if ( node ) {
+						node.focus();
+					}
+				} );
+				focusRef.current = animationId;
+				setIsInitialMount( false );
+			}
+		},
+		[ isInitialMount ]
+	);
+
+	// Focus the label RichText component when no label exists (after initial mount).
+	useEffect( () => {
+		if ( ! label && ! isInitialMount && labelElementRef.current ) {
+			const animationId = requestAnimationFrame( () => {
+				if ( labelElementRef.current ) {
+					labelElementRef.current.focus();
+				}
+			} );
+			focusRef.current = animationId;
+			return () => cancelAnimationFrame( focusRef.current );
+		}
+	}, [ label, isInitialMount ] );
+
+	// Clean up animation frames on unmount.
+	useEffect( () => {
+		return () => {
+			if ( focusRef.current ) {
+				cancelAnimationFrame( focusRef.current );
+			}
+		};
+	}, [] );
+
+	const {
+		blockIndex,
+		hasInnerBlocksSelected,
+		tabsHasSelectedBlock,
+		tabsClientId,
+		tabsAttributes,
+		forceDisplay,
+		isTabsClientSelected,
+		isDefaultTab,
+		siblingTabs,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockIndex,
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				getBlockAttributes,
+				getBlocks,
+			} = select( blockEditorStore );
+
+			// Get data from core/tabs.
+			const rootClientId = getBlockRootClientId( clientId );
+			const hasTabSelected = hasSelectedInnerBlock( rootClientId, true );
+			const rootAttributes = getBlockAttributes( rootClientId );
+			const { activeTabIndex } = rootAttributes;
+			const _isTabsClientSelected = isBlockSelected( rootClientId );
+
+			// Get data about this instance of core/tab.
+			const _blockIndex = getBlockIndex( clientId );
+			const _isDefaultTab = activeTabIndex === _blockIndex;
+			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
+				clientId,
+				true
+			);
+
+			// Get all sibling tabs from parent.
+			const _siblingTabs = getBlocks( rootClientId );
+
+			return {
+				blockIndex: _blockIndex,
+				hasInnerBlocksSelected: _hasInnerBlocksSelected,
+				tabsClientId: rootClientId,
+				forceDisplay: _isDefaultTab && _isTabsClientSelected,
+				tabsHasSelectedBlock: hasTabSelected,
+				isTabsClientSelected: _isTabsClientSelected,
+				isDefaultTab: _isDefaultTab,
+				tabsAttributes: rootAttributes,
+				siblingTabs: _siblingTabs,
+			};
+		},
+		[ clientId ]
+	);
+
+	/**
+	 * This hook determines if the current tab is selected. This is true if it is the active tab, or if it is selected directly.
+	 */
+	const isSelectedTab = useMemo( () => {
+		if ( isSelected || hasInnerBlocksSelected || forceDisplay ) {
+			return true;
+		}
+		if (
+			isDefaultTab &&
+			! isTabsClientSelected &&
+			! isSelected &&
+			! tabsHasSelectedBlock
+		) {
+			return true;
+		}
+		return false;
+	}, [
+		isSelected,
+		hasInnerBlocksSelected,
+		forceDisplay,
+		isDefaultTab,
+		isTabsClientSelected,
+		tabsHasSelectedBlock,
+	] );
+
+	// Use a custom anchor, if set. Otherwise fall back to the slug generated from the label text.
+	const tabPanelId = useMemo(
+		() => anchor || slugFromLabel( label, blockIndex ),
+		[ anchor, label, blockIndex ]
+	);
+	const tabLabelId = useMemo( () => `${ tabPanelId }--tab`, [ tabPanelId ] );
+
+	const tabItemColorProps = useColorProps( tabsAttributes );
+	const tabContentTypographyProps = useTypographyProps( attributes );
+
+	const blockProps = useBlockProps( {
+		hidden: ! isSelectedTab,
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			'aria-labelledby': tabLabelId,
+			id: tabPanelId,
+			role: 'tabpanel',
+			ref: innerBlocksRef,
+			tabIndex: isSelectedTab ? 0 : -1,
+			className: clsx(
+				tabContentTypographyProps.className,
+				'tabs__tab-editor-content',
+				layoutClassNames
+			),
+			style: {
+				...tabContentTypographyProps.style,
+			},
+		},
+		{
+			template: TEMPLATE,
+		}
+	);
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<Controls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					tabsClientId={ tabsClientId }
+					blockIndex={ blockIndex }
+					isDefaultTab={ isDefaultTab }
+				/>
+				{ isSelectedTab && (
+					<>
+						<TabsList
+							siblingTabs={ siblingTabs }
+							currentClientId={ clientId }
+							currentBlockIndex={ blockIndex }
+							currentLabel={ label }
+							tabItemColorProps={ tabItemColorProps }
+							onSelectTab={ selectBlock }
+							onLabelChange={ ( value ) =>
+								setAttributes( {
+									label: value,
+									anchor: slugFromLabel( value, blockIndex ),
+								} )
+							}
+							labelRef={ labelRef }
+							focusRef={ focusRef }
+							labelElementRef={ labelElementRef }
+						/>
+						<section { ...innerBlocksProps } />
+					</>
+				) }
+			</div>
+		</>
+	);
+}

package/src/tab/icon.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.5498 10.3501V6.3501H9.8498V10.3501H11.3498V6.1001C11.3498 5.40974 10.7902 4.8501 10.0998 4.8501H5.2998C4.60945 4.8501 4.0498 5.40974 4.0498 6.1001V10.3501H5.5498ZM20 12.6001H4V14.1001L20 14.1001V12.6001ZM14 17.1001H4V18.6001H14V17.1001Z"
+		/>
+	</SVG>
+);

package/src/tab/index.js

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import icon from './icon';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/tab/index.php

@@ -0,0 +1,128 @@
+<?php
+/**
+ * Tabs Block
+ *
+ * @package WordPress
+ */
+
+/**
+ * Build typography classnames from named size/family.
+ *
+ * @param array $attributes Block attributes.
+ * @return string Classnames.
+ */
+function block_core_tab_get_typography_classes( array $attributes ): string {
+	$typography_classes    = array();
+	$has_named_font_family = ! empty( $attributes['fontFamily'] );
+	$has_named_font_size   = ! empty( $attributes['fontSize'] );
+
+	if ( $has_named_font_size ) {
+		$typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( (string) $attributes['fontSize'] ) );
+	}
+
+	if ( $has_named_font_family ) {
+		$typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( (string) $attributes['fontFamily'] ) );
+	}
+
+	return implode( ' ', $typography_classes );
+}
+
+/**
+ * Build inline typography styles.
+ *
+ * @param array $attributes Block attributes.
+ * @return string Inline CSS.
+ */
+function block_core_tab_get_typography_styles( array $attributes ): string {
+	$typography_styles = array();
+
+	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
+		$typography_styles[] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $attributes['style']['typography']['fontSize'],
+				)
+			)
+		);
+	}
+
+	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
+		$typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
+	}
+
+	return implode( '', $typography_styles );
+}
+
+/**
+ * Render callback for core/tab.
+ *
+ * @param array     $attributes Block attributes.
+ * @param string    $content    Block content.
+ *
+ * @return string Updated HTML.
+ */
+function block_core_tab_render( array $attributes, string $content ): string {
+	$tag_processor = new WP_HTML_Tag_Processor( $content );
+	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) );
+	$tab_id = (string) $tag_processor->get_attribute( 'id' );
+
+	/**
+	 * Add interactivity to the tab element.
+	 */
+	$tag_processor->set_attribute(
+		'data-wp-interactive',
+		'core/tabs/private'
+	);
+	$tag_processor->set_attribute(
+		'data-wp-context',
+		wp_json_encode(
+			array(
+				'tab' => array(
+					'id' => $tab_id,
+				),
+			)
+		)
+	);
+
+	/**
+	 * Process style classnames.
+	 */
+	$classname  = (string) $tag_processor->get_attribute( 'class' );
+	$classname .= ' ' . block_core_tab_get_typography_classes( $attributes );
+	$tag_processor->set_attribute( 'class', $classname );
+
+	/**
+	 * Process accessibility and interactivity attributes.
+	 */
+	$tag_processor->set_attribute( 'role', 'tabpanel' );
+	$tag_processor->set_attribute( 'aria-labelledby', 'tab__' . $tab_id );
+	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
+	$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
+
+	/**
+	 * Process style attribute.
+	 */
+	$style  = (string) $tag_processor->get_attribute( 'style' );
+	$style .= block_core_tab_get_typography_styles( $attributes );
+	$tag_processor->set_attribute( 'style', $style );
+
+	return (string) $tag_processor->get_updated_html();
+}
+
+/**
+ * Registers the `core/tab` block on the server.
+ *
+ * @hook init
+ *
+ * @since 6.9.0
+ */
+function register_block_core_tab() {
+	register_block_type_from_metadata(
+		__DIR__ . '/tab',
+		array(
+			'render_callback' => 'block_core_tab_render',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_tab' );

package/src/tab/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/tab/save.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function Save( { attributes } ) {
+	const { anchor } = attributes;
+
+	const tabPanelId = anchor;
+
+	// eslint-disable-next-line react-compiler/react-compiler
+	const blockProps = useBlockProps.save();
+	// eslint-disable-next-line react-compiler/react-compiler
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <section { ...innerBlocksProps } id={ tabPanelId } />;
+}

package/src/tab/slug-from-label.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { cleanForSlug } from '@wordpress/url';
+
+/**
+ * Generates a slug from a tab's text label.
+ *
+ * @param {string} label    Tab label RichText value.
+ * @param {number} tabIndex Tab index value.
+ *
+ * @return {string} The generated slug with HTML stripped out.
+ */
+export default function slugFromLabel( label, tabIndex ) {
+	// Get just the text content, filtering out any HTML tags from the RichText value.
+	const htmlDocument = new window.DOMParser().parseFromString(
+		label,
+		'text/html'
+	);
+	if ( htmlDocument.body?.textContent ) {
+		return cleanForSlug( htmlDocument.body.textContent );
+	}
+
+	// Fall back to using the tab index if the label is empty.
+	return `tab-panel-${ tabIndex }`;
+}