@wordpress/block-library 9.12.0 → 9.13.0

package/src/social-link/edit.js

@@ -6,24 +6,29 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 
 import {
+	BlockControls,
 	InspectorControls,
 	URLPopover,
 	URLInput,
+	useBlockEditingMode,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	Button,
+	Dropdown,
 	PanelBody,
 	PanelRow,
 	TextControl,
+	ToolbarButton,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
@@ -112,16 +117,24 @@ const SocialLinkEdit = ( {
 		iconBackgroundColorValue,
 	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = clsx( 'wp-social-link', 'wp-social-link-' + service, {
-		'wp-social-link__is-incomplete': ! url,
-		[ `has-${ iconColor }-color` ]: iconColor,
-		[ `has-${ iconBackgroundColor }-background-color` ]:
-			iconBackgroundColor,
-	} );
+	const wrapperClasses = clsx(
+		'wp-social-link',
+		// Manually adding this class for backwards compatibility of CSS when moving the
+		// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883
+		'wp-block-social-link',
+		'wp-social-link-' + service,
+		{
+			'wp-social-link__is-incomplete': ! url,
+			[ `has-${ iconColor }-color` ]: iconColor,
+			[ `has-${ iconBackgroundColor }-background-color` ]:
+				iconBackgroundColor,
+		}
+	);
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
@@ -131,16 +144,56 @@ const SocialLinkEdit = ( {
 	// spaces. The PHP render callback fallbacks to the social name as well.
 	const socialLinkText = label.trim() === '' ? socialLinkName : label;
 
+	const ref = useRef();
 	const blockProps = useBlockProps( {
-		className: classes,
-		style: {
-			color: iconColorValue,
-			backgroundColor: iconBackgroundColorValue,
+		className: 'wp-block-social-link-anchor',
+		ref: useMergeRefs( [ setPopoverAnchor, ref ] ),
+		onClick: () => setPopover( true ),
+		onKeyDown: ( event ) => {
+			if ( event.keyCode === ENTER ) {
+				event.preventDefault();
+				setPopover( true );
+			}
 		},
 	} );
 
 	return (
 		<>
+			{ isContentOnlyMode && showLabels && (
+				// Add an extra control to modify the label attribute when content only mode is active.
+				// With content only mode active, the inspector is hidden, so users need another way
+				// to edit this attribute.
+				<BlockControls group="other">
+					<Dropdown
+						popoverProps={ { position: 'bottom right' } }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<ToolbarButton
+								onClick={ onToggle }
+								aria-haspopup="true"
+								aria-expanded={ isOpen }
+							>
+								{ __( 'Text' ) }
+							</ToolbarButton>
+						) }
+						renderContent={ () => (
+							<TextControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								className="wp-block-social-link__toolbar_content_text"
+								label={ __( 'Text' ) }
+								help={ __(
+									'Provide a text label or use the default.'
+								) }
+								value={ label }
+								onChange={ ( value ) =>
+									setAttributes( { label: value } )
+								}
+								placeholder={ socialLinkName }
+							/>
+						) }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
@@ -169,13 +222,27 @@ const SocialLinkEdit = ( {
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
-			<li { ...blockProps }>
-				<button
-					className="wp-block-social-link-anchor"
-					ref={ setPopoverAnchor }
-					onClick={ () => setPopover( true ) }
-					aria-haspopup="dialog"
-				>
+			{ /*
+			 * Because the `<ul>` element has a role=document, the `<li>` is
+			 * not semantically correct, so adding role=presentation is cleaner.
+			 * https://github.com/WordPress/gutenberg/pull/64883#issuecomment-2472874551
+			 */ }
+			<li
+				role="presentation"
+				className={ wrapperClasses }
+				style={ {
+					color: iconColorValue,
+					backgroundColor: iconBackgroundColorValue,
+				} }
+			>
+				{ /*
+				 * Disable reason: The `button` ARIA role is redundant but
+				 * blockProps has a role of `document` automatically applied
+				 * which breaks the semantics of this button since it removes
+				 * the information about the popover.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */ }
+				<button aria-haspopup="dialog" { ...blockProps } role="button">
 					<IconComponent />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
@@ -185,6 +252,7 @@ const SocialLinkEdit = ( {
 						{ socialLinkText }
 					</span>
 				</button>
+				{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 				{ isSelected && showURLPopover && (
 					<SocialLinkURLPopover
 						url={ url }

package/src/social-link/editor.scss

@@ -14,6 +14,8 @@
 	font-size: inherit;
 	color: currentColor;
 	height: auto;
+	font-weight: inherit;
+	font-family: inherit;
 
 	// This rule ensures social link buttons display correctly in template parts.
 	opacity: 1;
@@ -21,13 +23,10 @@
 	// This rule is duplicated from the style.scss and needs to be the same as there.
 	padding: 0.25em;
 
-	// Focus styles replicate the `@wordpress/components` button component.
-	&:focus:not(:disabled) {
-		border-radius: 2px;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 3px solid transparent;
+	// Override the shared `.wp-block-social-link` class used on both the li and button
+	// due to backwards compatibility from moving the blockProps from the li to the button.
+	&:hover {
+		transform: none;
 	}
 }
 
@@ -39,3 +38,8 @@
 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
 	padding: 0;
 }
+
+.wp-block-social-link__toolbar_content_text {
+	// Corresponds to the size of the text control input in the block inspector.
+	width: 250px;
+}

package/src/template-part/edit/advanced-controls.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -54,19 +54,19 @@ export function TemplatePartAdvancedControls( {
 		templatePartId
 	);
 
-	const definedAreas = useSelect( ( select ) => {
-		// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-		// Blocks can be loaded into a *non-post* block editor.
-		/* eslint-disable-next-line @wordpress/data-no-store-string-literals */
-		return select(
-			'core/editor'
-		).__experimentalGetDefaultTemplatePartAreas();
-	}, [] );
+	const defaultTemplatePartAreas = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
+		[]
+	);
 
-	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
-		label,
-		value: _area,
-	} ) );
+	const areaOptions = defaultTemplatePartAreas.map(
+		( { label, area: _area } ) => ( {
+			label,
+			value: _area,
+		} )
+	);
 
 	return (
 		<>

package/src/template-part/edit/utils/get-template-part-icon.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	header as headerIcon,
+	footer as footerIcon,
+	sidebar as sidebarIcon,
+	symbolFilled as symbolFilledIcon,
+} from '@wordpress/icons';
+
+export const getTemplatePartIcon = ( iconName ) => {
+	if ( 'header' === iconName ) {
+		return headerIcon;
+	} else if ( 'footer' === iconName ) {
+		return footerIcon;
+	} else if ( 'sidebar' === iconName ) {
+		return sidebarIcon;
+	}
+	return symbolFilledIcon;
+};

package/src/template-part/edit/utils/hooks.js

@@ -136,14 +136,9 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) {
 export function useTemplatePartArea( area ) {
 	return useSelect(
 		( select ) => {
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor.
-			/* eslint-disable @wordpress/data-no-store-string-literals */
 			const definedAreas =
-				select(
-					'core/editor'
-				).__experimentalGetDefaultTemplatePartAreas();
-			/* eslint-enable @wordpress/data-no-store-string-literals */
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
 
 			const selectedArea = definedAreas.find(
 				( definedArea ) => definedArea.area === area

package/src/template-part/variations.js

@@ -3,23 +3,11 @@
  */
 import { store as coreDataStore } from '@wordpress/core-data';
 import { select } from '@wordpress/data';
-import {
-	header as headerIcon,
-	footer as footerIcon,
-	sidebar as sidebarIcon,
-	symbolFilled as symbolFilledIcon,
-} from '@wordpress/icons';
 
-function getTemplatePartIcon( iconName ) {
-	if ( 'header' === iconName ) {
-		return headerIcon;
-	} else if ( 'footer' === iconName ) {
-		return footerIcon;
-	} else if ( 'sidebar' === iconName ) {
-		return sidebarIcon;
-	}
-	return symbolFilledIcon;
-}
+/**
+ * Internal dependencies
+ */
+import { getTemplatePartIcon } from './edit/utils/get-template-part-icon';
 
 export function enhanceTemplatePartVariations( settings, name ) {
 	if ( name !== 'core/template-part' ) {

package/src/video/editor.scss

@@ -37,6 +37,7 @@
 	max-width: 240px;
 }
 
+.block-library-video-tracks-editor__tracks-informative-message-title,
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
 	margin-top: $grid-unit-05;
 	color: $gray-700;
@@ -56,3 +57,11 @@
 		padding: 0;
 	}
 }
+
+.block-library-video-tracks-editor__tracks-informative-message {
+	padding: $grid-unit-10;
+
+	&-description {
+		margin-bottom: 0;
+	}
+}

package/src/video/tracks-editor.js

@@ -24,7 +24,7 @@ import {
 } from '@wordpress/block-editor';
 import { upload, media } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 
 const ALLOWED_TYPES = [ 'text/vtt' ];
@@ -40,39 +40,29 @@ const KIND_OPTIONS = [
 ];
 
 function TrackList( { tracks, onEditPress } ) {
-	let content;
-	if ( tracks.length === 0 ) {
-		content = (
-			<p className="block-library-video-tracks-editor__tracks-informative-message">
-				{ __(
-					'Tracks can be subtitles, captions, chapters, or descriptions. They help make your content more accessible to a wider range of users.'
-				) }
-			</p>
-		);
-	} else {
-		content = tracks.map( ( track, index ) => {
-			return (
-				<HStack
-					key={ index }
-					className="block-library-video-tracks-editor__track-list-track"
+	const content = tracks.map( ( track, index ) => {
+		return (
+			<HStack
+				key={ index }
+				className="block-library-video-tracks-editor__track-list-track"
+			>
+				<span>{ track.label }</span>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ () => onEditPress( index ) }
+					aria-label={ sprintf(
+						/* translators: %s: Label of the video text track e.g: "French subtitles". */
+						_x( 'Edit %s', 'text tracks' ),
+						track.label
+					) }
 				>
-					<span>{ track.label } </span>
-					<Button
-						__next40pxDefaultSize
-						variant="tertiary"
-						onClick={ () => onEditPress( index ) }
-						aria-label={ sprintf(
-							/* translators: %s: Label of the video text track e.g: "French subtitles" */
-							_x( 'Edit %s', 'text tracks' ),
-							track.label
-						) }
-					>
-						{ __( 'Edit' ) }
-					</Button>
-				</HStack>
-			);
-		} );
-	}
+					{ __( 'Edit' ) }
+				</Button>
+			</HStack>
+		);
+	} );
+
 	return (
 		<MenuGroup
 			label={ __( 'Text tracks' ) }
@@ -87,105 +77,100 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 	const { src = '', label = '', srcLang = '', kind = DEFAULT_KIND } = track;
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
-		<NavigableMenu>
-			<VStack
-				className="block-library-video-tracks-editor__single-track-editor"
-				spacing="4"
-			>
-				<span className="block-library-video-tracks-editor__single-track-editor-edit-track-label">
-					{ __( 'Edit track' ) }
-				</span>
-				<span>
-					{ __( 'File' ) }: <b>{ fileName }</b>
-				</span>
-				<Grid columns={ 2 } gap={ 4 }>
-					<TextControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						/* eslint-disable jsx-a11y/no-autofocus */
-						autoFocus
-						/* eslint-enable jsx-a11y/no-autofocus */
-						onChange={ ( newLabel ) =>
-							onChange( {
-								...track,
-								label: newLabel,
-							} )
-						}
-						label={ __( 'Label' ) }
-						value={ label }
-						help={ __( 'Title of track' ) }
-					/>
-					<TextControl
+		<VStack
+			className="block-library-video-tracks-editor__single-track-editor"
+			spacing="4"
+		>
+			<span className="block-library-video-tracks-editor__single-track-editor-edit-track-label">
+				{ __( 'Edit track' ) }
+			</span>
+			<span>
+				{ __( 'File' ) }: <b>{ fileName }</b>
+			</span>
+			<Grid columns={ 2 } gap={ 4 }>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					onChange={ ( newLabel ) =>
+						onChange( {
+							...track,
+							label: newLabel,
+						} )
+					}
+					label={ __( 'Label' ) }
+					value={ label }
+					help={ __( 'Title of track' ) }
+				/>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					onChange={ ( newSrcLang ) =>
+						onChange( {
+							...track,
+							srcLang: newSrcLang,
+						} )
+					}
+					label={ __( 'Source language' ) }
+					value={ srcLang }
+					help={ __( 'Language tag (en, fr, etc.)' ) }
+				/>
+			</Grid>
+			<VStack spacing="8">
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					className="block-library-video-tracks-editor__single-track-editor-kind-select"
+					options={ KIND_OPTIONS }
+					value={ kind }
+					label={ __( 'Kind' ) }
+					onChange={ ( newKind ) => {
+						onChange( {
+							...track,
+							kind: newKind,
+						} );
+					} }
+				/>
+				<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
+					<Button
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						onChange={ ( newSrcLang ) =>
-							onChange( {
-								...track,
-								srcLang: newSrcLang,
-							} )
-						}
-						label={ __( 'Source language' ) }
-						value={ srcLang }
-						help={ __( 'Language tag (en, fr, etc.)' ) }
-					/>
-				</Grid>
-				<VStack spacing="8">
-					<SelectControl
+						isDestructive
+						variant="link"
+						onClick={ onRemove }
+					>
+						{ __( 'Remove track' ) }
+					</Button>
+					<Button
 						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						className="block-library-video-tracks-editor__single-track-editor-kind-select"
-						options={ KIND_OPTIONS }
-						value={ kind }
-						label={ __( 'Kind' ) }
-						onChange={ ( newKind ) => {
-							onChange( {
-								...track,
-								kind: newKind,
-							} );
+						variant="primary"
+						onClick={ () => {
+							const changes = {};
+							let hasChanges = false;
+							if ( label === '' ) {
+								changes.label = __( 'English' );
+								hasChanges = true;
+							}
+							if ( srcLang === '' ) {
+								changes.srcLang = 'en';
+								hasChanges = true;
+							}
+							if ( track.kind === undefined ) {
+								changes.kind = DEFAULT_KIND;
+								hasChanges = true;
+							}
+							if ( hasChanges ) {
+								onChange( {
+									...track,
+									...changes,
+								} );
+							}
+							onClose();
 						} }
-					/>
-					<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							onClick={ () => {
-								const changes = {};
-								let hasChanges = false;
-								if ( label === '' ) {
-									changes.label = __( 'English' );
-									hasChanges = true;
-								}
-								if ( srcLang === '' ) {
-									changes.srcLang = 'en';
-									hasChanges = true;
-								}
-								if ( track.kind === undefined ) {
-									changes.kind = DEFAULT_KIND;
-									hasChanges = true;
-								}
-								if ( hasChanges ) {
-									onChange( {
-										...track,
-										...changes,
-									} );
-								}
-								onClose();
-							} }
-						>
-							{ __( 'Close' ) }
-						</Button>
-						<Button
-							__next40pxDefaultSize
-							isDestructive
-							variant="link"
-							onClick={ onRemove }
-						>
-							{ __( 'Remove track' ) }
-						</Button>
-					</HStack>
-				</VStack>
+					>
+						{ __( 'Apply' ) }
+					</Button>
+				</HStack>
 			</VStack>
-		</NavigableMenu>
+		</VStack>
 	);
 }
 
@@ -194,6 +179,11 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const [ trackBeingEdited, setTrackBeingEdited ] = useState( null );
+	const dropdownPopoverRef = useRef();
+
+	useEffect( () => {
+		dropdownPopoverRef.current?.focus();
+	}, [ trackBeingEdited ] );
 
 	if ( ! mediaUpload ) {
 		return null;
@@ -201,17 +191,32 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 	return (
 		<Dropdown
 			contentClassName="block-library-video-tracks-editor"
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarGroup>
-					<ToolbarButton
-						aria-expanded={ isOpen }
-						aria-haspopup="true"
-						onClick={ onToggle }
-					>
-						{ __( 'Text tracks' ) }
-					</ToolbarButton>
-				</ToolbarGroup>
-			) }
+			focusOnMount
+			popoverProps={ {
+				ref: dropdownPopoverRef,
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				const handleOnToggle = () => {
+					if ( ! isOpen ) {
+						// When the Popover opens make sure the initial view is
+						// always the track list rather than the edit track UI.
+						setTrackBeingEdited( null );
+					}
+					onToggle();
+				};
+
+				return (
+					<ToolbarGroup>
+						<ToolbarButton
+							aria-expanded={ isOpen }
+							aria-haspopup="true"
+							onClick={ handleOnToggle }
+						>
+							{ __( 'Text tracks' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				);
+			} }
 			renderContent={ () => {
 				if ( trackBeingEdited !== null ) {
 					return (
@@ -235,8 +240,21 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 						/>
 					);
 				}
+
 				return (
 					<>
+						{ tracks.length === 0 && (
+							<div className="block-library-video-tracks-editor__tracks-informative-message">
+								<h2 className="block-library-video-tracks-editor__tracks-informative-message-title">
+									{ __( 'Text tracks' ) }
+								</h2>
+								<p className="block-library-video-tracks-editor__tracks-informative-message-description">
+									{ __(
+										'Tracks can be subtitles, captions, chapters, or descriptions. They help make your content more accessible to a wider range of users.'
+									) }
+								</p>
+							</div>
+						) }
 						<NavigableMenu>
 							<TrackList
 								tracks={ tracks }