Refactor tabs, pulling the latest out of prc-block-library/tabs for G…

…utenberg Core.

These changes bring in the following functionality:
- Tab labels can contain richtext now. We strip html tags when adding these to the iAPI.
- Issues with React focus issues in the editor have been resolved.
- Added ContrastChecker support to all color pairings.
- Updated default styles for tabs, links, button
- Better styles support for colors and block gap
- Focus on making tabs as extensible by 3rd party devs as possible, added a browser event to signal to other js applications that tabs are initialized (we use this to add react component driven content to our IAPI driven tabs)

docs/reference-guides/core-blocks.md

@@ -903,7 +903,7 @@ Content for a tab in a tabbed interface. ([Source](https://github.com/WordPress/
 -	**Name:** core/tab
 -	**Category:** design
 -	**Parent:** core/tabs
--	**Supports:** anchor, layout (type, ~~allowEditing~~), typography (fontSize), ~~html~~, ~~reusable~~
+-	**Supports:** anchor, layout (allowJustification, allowOrientation, allowSizingOnChildren, allowSwitching, allowVerticalAlignment, ~~allowInheriting~~), spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Table
@@ -932,8 +932,8 @@ Display content in a tabbed interface to help users navigate detailed content wi
 -	**Name:** core/tabs
 -	**Category:** design
 -	**Allowed Blocks:** core/tab
--	**Supports:** align, color (~~background~~, ~~text~~), interactivity, spacing (blockGap, margin, ~~padding~~), typography (fontFamily, fontSize), ~~html~~
--	**Attributes:** activeTabIndex, customTabActiveColor, customTabActiveTextColor, customTabHoverColor, customTabHoverTextColor, customTabInactiveColor, customTabTextColor, orientation, tabActiveColor, tabActiveTextColor, tabHoverColor, tabHoverTextColor, tabInactiveColor, tabTextColor
+-	**Supports:** align, color (~~background~~, ~~text~~), interactivity, spacing (blockGap, margin, ~~padding~~), typography (fontSize), ~~html~~
+-	**Attributes:** activeTabIndex, customTabActiveColor, customTabActiveTextColor, customTabHoverColor, customTabHoverTextColor, customTabInactiveColor, customTabTextColor, orientation, tabActiveColor, tabActiveTextColor, tabHoverColor, tabHoverTextColor, tabInactiveColor, tabTextColor, tabsId
 
 ## Tag Cloud
 

packages/block-library/src/tab/add-tab-toolbar-control.js

@@ -0,0 +1,48 @@
+/**
+ * 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', {
+			label: __( 'New 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>
+	);
+}

packages/block-library/src/tab/block.json

@@ -6,6 +6,7 @@
 	"description": "Content for a tab in a tabbed interface.",
 	"version": "1.0.0",
 	"category": "design",
+	"textdomain": "default",
 	"attributes": {
 		"label": {
 			"type": "string",
@@ -18,8 +19,17 @@
 		"html": false,
 		"reusable": false,
 		"layout": {
-			"type": "constrained",
-			"allowEditing": false
+			"allowSwitching": true,
+			"allowInheriting": false,
+			"allowVerticalAlignment": true,
+			"allowJustification": true,
+			"allowOrientation": true,
+			"allowSizingOnChildren": true
+		},
+		"spacing": {
+			"blockGap": true,
+			"padding": true,
+			"margin": false
 		},
 		"typography": {
 			"fontSize": true,
@@ -32,10 +42,8 @@
 		}
 	},
 	"providesContext": {
-		"tab/label": "label",
-		"tab/slug": "slug"
+		"tab/label": "label"
 	},
-	"textdomain": "tab",
 	"editorScript": "file:./index.js",
 	"style": "file:./style-index.css"
 }

packages/block-library/src/tab/controls.js

@@ -13,6 +13,7 @@ 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( {
@@ -27,34 +28,40 @@ export default function Controls( {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	return (
-		<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={ __( 'Is 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>
+		<>
+			<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={ __( 'Is 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>
+		</>
 	);
 }

packages/block-library/src/tab/edit.js

@@ -39,6 +39,7 @@ export default function Edit( {
 	clientId,
 	isSelected,
 	setAttributes,
+	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
@@ -142,17 +143,6 @@ export default function Edit( {
 		tabsHasSelectedBlock,
 	] );
 
-	/**
-	 * This hook focuses the label when the block is selected and does not have any inner blocks selected, usually when the block is mounted by the user by clicking on the label.
-	 */
-	useEffect( () => {
-		if ( isSelected && ! hasInnerBlocksSelected ) {
-			timeoutRef.current = setTimeout( () => {
-				labelRef.current.focus();
-			}, 0 );
-		}
-	}, [ isSelected, hasInnerBlocksSelected ] );
-
 	// Use a custom anchor, if set. Otherwise fall back to the slug generated from the label text.
 	const tabPanelId = useMemo(
 		() => anchor || slugFromLabel( label, blockIndex ),
@@ -176,7 +166,8 @@ export default function Edit( {
 			tabIndex: isSelectedTab ? 0 : -1,
 			className: clsx(
 				tabContentTypographyProps.className,
-				'tabs__tab-editor-content'
+				'tabs__tab-editor-content',
+				layoutClassNames
 			),
 			style: {
 				...tabContentTypographyProps.style,
@@ -189,14 +180,14 @@ export default function Edit( {
 
 	return (
 		<>
-			<Controls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				tabsClientId={ tabsClientId }
-				blockIndex={ blockIndex }
-				isDefaultTab={ isDefaultTab }
-			/>
 			<div { ...blockProps }>
+				<Controls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					tabsClientId={ tabsClientId }
+					blockIndex={ blockIndex }
+					isDefaultTab={ isDefaultTab }
+				/>
 				<TabFill tabsClientId={ tabsClientId }>
 					<button
 						aria-controls={ tabPanelId }
@@ -216,7 +207,8 @@ export default function Edit( {
 							selectBlock( clientId );
 						} }
 						onKeyDown={ ( event ) => {
-							if ( event.key === 'Enter' ) {
+							// If shift is also pressed, do not select the block.
+							if ( event.key === 'Enter' && ! event.shiftKey ) {
 								event.preventDefault();
 								selectBlock( clientId );
 								timeoutRef.current = setTimeout( () => {
@@ -228,8 +220,11 @@ export default function Edit( {
 						<RichText
 							ref={ labelRef }
 							tagName="span"
-							allowedFormats={ [] }
-							withoutInteractiveFormatting
+							allowedFormats={ [
+								'core/bold',
+								'core/italic',
+								'core/strikethrough',
+							] }
 							placeholder={ __( 'Add tab label…' ) }
 							value={ decodeEntities( label ) }
 							onChange={ ( value ) =>

packages/block-library/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>
+);

packages/block-library/src/tab/index.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { tab as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import edit from './edit';
 import save from './save';
-import initBlock from '../utils/init-block';
 import metadata from './block.json';
+import icon from './icon';
 
 const { name } = metadata;
 
@@ -21,6 +21,4 @@ export const settings = {
 	save,
 };
 
-export const init = () => {
-	initBlock( { name, metadata, settings } );
-};
+export const init = () => initBlock( { name, metadata, settings } );