@wordpress/block-library 9.25.0 → 9.26.1-next.719a03cbe.0

package/src/site-logo/edit.js

@@ -14,7 +14,6 @@ import {
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	PanelBody,
 	RangeControl,
 	ResizableBox,
 	Spinner,
@@ -24,6 +23,8 @@ import {
 	Button,
 	DropZone,
 	FlexItem,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
@@ -47,6 +48,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { MIN_SIZE } from '../image/constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const ACCEPT_MEDIA_STRING = 'image/*';
@@ -70,6 +72,7 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -276,31 +279,61 @@ const SiteLogo = ( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						isShownByDefault
+						hasValue={ () => !! width }
 						label={ __( 'Image width' ) }
-						onChange={ ( newWidth ) =>
-							setAttributes( { width: newWidth } )
+						onDeselect={ () =>
+							setAttributes( { width: undefined } )
 						}
-						min={ minWidth }
-						max={ maxWidthBuffer }
-						initialPosition={ Math.min(
-							defaultWidth,
-							maxWidthBuffer
-						) }
-						value={ width || '' }
-						disabled={ ! isResizable }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Image width' ) }
+							onChange={ ( newWidth ) =>
+								setAttributes( { width: newWidth } )
+							}
+							min={ minWidth }
+							max={ maxWidthBuffer }
+							initialPosition={ Math.min(
+								defaultWidth,
+								maxWidthBuffer
+							) }
+							value={ width || '' }
+							disabled={ ! isResizable }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						isShownByDefault
+						hasValue={ () => ! isLink }
 						label={ __( 'Link image to home' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
+						onDeselect={ () => setAttributes( { isLink: true } ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link image to home' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
+
 					{ isLink && (
-						<>
+						<ToolsPanelItem
+							isShownByDefault
+							hasValue={ () => linkTarget === '_blank' }
+							label={ __( 'Open in new tab' ) }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -311,10 +344,19 @@ const SiteLogo = ( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
+
 					{ canUserEdit && (
-						<>
+						<ToolsPanelItem
+							isShownByDefault
+							hasValue={ () => !! shouldSyncIcon }
+							label={ __( 'Use as Site Icon' ) }
+							onDeselect={ () => {
+								setAttributes( { shouldSyncIcon: false } );
+								setIcon( undefined );
+							} }
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Use as Site Icon' ) }
@@ -325,9 +367,9 @@ const SiteLogo = ( {
 								checked={ !! shouldSyncIcon }
 								help={ syncSiteIconHelpText }
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			<BlockControls group="block">
 				{ canEditImage && ! isEditingImage && (
@@ -433,6 +475,7 @@ export default function LogoEdit( {
 	}, [] );
 	const { getSettings } = useSelect( blockEditorStore );
 	const [ temporaryURL, setTemporaryURL ] = useState();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -590,9 +633,15 @@ export default function LogoEdit( {
 
 	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
 		<InspectorControls>
-			<PanelBody title={ __( 'Media' ) }>
-				<div className="block-library-site-logo__inspector-media-replace-container">
-					{ ! canUserEdit ? (
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				{ ! canUserEdit ? (
+					<div
+						className="block-library-site-logo__inspector-media-replace-container"
+						style={ { gridColumn: '1 / -1' } }
+					>
 						<InspectorLogoPreview
 							media={ mediaItemData }
 							itemGroupProps={ {
@@ -601,8 +650,14 @@ export default function LogoEdit( {
 									'block-library-site-logo__inspector-readonly-logo-preview',
 							} }
 						/>
-					) : (
-						<>
+					</div>
+				) : (
+					<ToolsPanelItem
+						hasValue={ () => !! logoUrl }
+						label={ __( 'Logo' ) }
+						isShownByDefault
+					>
+						<div className="block-library-site-logo__inspector-media-replace-container">
 							<SiteLogoReplaceFlow
 								{ ...mediaReplaceFlowProps }
 								name={
@@ -625,10 +680,10 @@ export default function LogoEdit( {
 								) }
 							/>
 							<DropZone onFilesDrop={ onFilesDrop } />
-						</>
-					) }
-				</div>
-			</PanelBody>
+						</div>
+					</ToolsPanelItem>
+				) }
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

package/src/social-link/edit.js

@@ -7,8 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
-import { useDispatch } from '@wordpress/data';
-
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorControls,
@@ -20,6 +19,7 @@ import {
 } from '@wordpress/block-editor';
 import { useState, useRef } from '@wordpress/element';
 import {
+	Icon,
 	Button,
 	Dropdown,
 	TextControl,
@@ -31,11 +31,12 @@ import {
 import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getSocialService } from './social-list';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const SocialLinkURLPopover = ( {
@@ -108,6 +109,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	setAttributes,
 	clientId,
+	name,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -138,8 +140,17 @@ const SocialLinkEdit = ( {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
 
-	const IconComponent = getIconBySite( service );
-	const socialLinkName = getNameBySite( service );
+	const { activeVariation } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation } = select( blocksStore );
+			return {
+				activeVariation: getActiveBlockVariation( name, attributes ),
+			};
+		},
+		[ name, attributes ]
+	);
+
+	const { icon, label: socialLinkName } = getSocialService( activeVariation );
 	// The initial label (ie. the link text) is an empty string.
 	// We want to prevent empty links so that the link text always fallbacks to
 	// the social name, even when users enter and save an empty string or only
@@ -167,7 +178,7 @@ const SocialLinkEdit = ( {
 				// to edit this attribute.
 				<BlockControls group="other">
 					<Dropdown
-						popoverProps={ { position: 'bottom right' } }
+						popoverProps={ { placement: 'bottom-start' } }
 						renderToggle={ ( { isOpen, onToggle } ) => (
 							<ToolbarButton
 								onClick={ onToggle }
@@ -258,7 +269,7 @@ const SocialLinkEdit = ( {
 				 */
 				/* eslint-disable jsx-a11y/no-redundant-roles */ }
 				<button aria-haspopup="dialog" { ...blockProps } role="button">
-					<IconComponent />
+					<Icon icon={ icon } />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
 							'screen-reader-text': ! showLabels,

package/src/social-link/edit.native.js

@@ -20,10 +20,12 @@ import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { link, Icon } from '@wordpress/icons';
 import { withSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getSocialService } from './social-list';
 import styles from './editor.scss';
 
 const DEFAULT_ACTIVE_ICON_STYLES = {
@@ -54,6 +56,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	onFocus,
 	name,
+	activeVariation,
 } ) => {
 	const { url, service = name } = attributes;
 	const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
@@ -64,8 +67,7 @@ const SocialLinkEdit = ( {
 		DEFAULT_ACTIVE_ICON_STYLES;
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
-	const IconComponent = getIconBySite( service )();
-	const socialLinkName = getNameBySite( service );
+	const { icon, label: socialLinkName } = getSocialService( activeVariation );
 
 	// When new social icon is added link sheet is opened automatically.
 	useEffect( () => {
@@ -190,7 +192,7 @@ const SocialLinkEdit = ( {
 				>
 					<Icon
 						animated
-						icon={ IconComponent }
+						icon={ icon() }
 						style={ { color: activeIcon.color } }
 					/>
 				</Animated.View>
@@ -202,12 +204,16 @@ const SocialLinkEdit = ( {
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const { getBlock } = select( blockEditorStore );
+		const { getActiveBlockVariation } = select( blocksStore );
 
 		const block = getBlock( clientId );
 		const name = block?.name.substring( 17 );
 
 		return {
 			name,
+			activeVariation: block
+				? getActiveBlockVariation( block.name, block.attributes )
+				: undefined,
 		};
 	} ),
 ] )( SocialLinkEdit );

package/src/social-link/index.php

@@ -335,6 +335,19 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 	);
 
+	/**
+	 * Filter the list of available social service.
+	 *
+	 * This can be used to change icons or add custom icons (additionally to variations in the editor).
+	 * Icons should be directly renderable - therefore SVGs work best.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @param array $services_data The list of services. Each item is an array containing a 'name' and 'icon' key.
+	 * @return array The list of social services.
+	 */
+	$services_data = apply_filters( 'block_core_social_link_get_services', $services_data );
+
 	if ( ! empty( $service )
 		&& ! empty( $field )
 		&& isset( $services_data[ $service ] )

package/src/social-link/social-list.js

@@ -6,29 +6,24 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import variations from './variations';
 import { ChainIcon } from './icons';
 
 /**
- * Retrieves the social service's icon component.
+ * Retrieves the social service's icon component and label.
  *
- * @param {string} name key for a social service (lowercase slug)
- *
- * @return {Component} Icon component for social service.
+ * @param {Object} variation The object of the social service variation.
+ * @return {Object} An object containing the Icon component for social service and label.
  */
-export const getIconBySite = ( name ) => {
-	const variation = variations.find( ( v ) => v.name === name );
-	return variation ? variation.icon : ChainIcon;
-};
+export function getSocialService( variation ) {
+	if ( ! variation?.name ) {
+		return {
+			icon: ChainIcon,
+			label: __( 'Social Icon' ),
+		};
+	}
 
-/**
- * Retrieves the display name for the social service.
- *
- * @param {string} name key for a social service (lowercase slug)
- *
- * @return {string} Display name for social service
- */
-export const getNameBySite = ( name ) => {
-	const variation = variations.find( ( v ) => v.name === name );
-	return variation ? variation.title : __( 'Social Icon' );
-};
+	return {
+		icon: variation?.icon ?? ChainIcon,
+		label: variation?.title ?? __( 'Social Icon' ),
+	};
+}

package/src/social-links/edit.js

@@ -33,6 +33,7 @@ import { useSelect } from '@wordpress/data';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const sizeOptions = [
+	{ label: __( 'Default' ), value: '' },
 	{ label: __( 'Small' ), value: 'has-small-icon-size' },
 	{ label: __( 'Normal' ), value: 'has-normal-icon-size' },
 	{ label: __( 'Large' ), value: 'has-large-icon-size' },
@@ -166,19 +167,17 @@ export function SocialLinksEdit( props ) {
 						setAttributes( {
 							openInNewTab: false,
 							showLabels: false,
-							size: 'has-normal-icon-size',
+							size: undefined,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						isShownByDefault
-						hasValue={ () =>
-							!! size && size !== 'has-normal-icon-size'
-						}
+						hasValue={ () => !! size }
 						label={ __( 'Icon size' ) }
 						onDeselect={ () =>
-							setAttributes( { size: 'has-normal-icon-size' } )
+							setAttributes( { size: undefined } )
 						}
 					>
 						<SelectControl
@@ -187,10 +186,10 @@ export function SocialLinksEdit( props ) {
 							label={ __( 'Icon Size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {
-									size: newSize,
+									size: newSize === '' ? undefined : newSize,
 								} );
 							} }
-							value={ size ?? 'has-normal-icon-size' }
+							value={ size ?? '' }
 							options={ sizeOptions }
 						/>
 					</ToolsPanelItem>

package/src/video/tracks-editor.js

@@ -24,8 +24,9 @@ import {
 	MediaUploadCheck,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
 import { upload, media } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 
@@ -212,12 +213,27 @@ function SingleTrackEditor( {
 }
 
 export default function TracksEditor( { tracks = [], onChange } ) {
+	const { createNotice } = useDispatch( noticesStore );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const [ trackBeingEdited, setTrackBeingEdited ] = useState( null );
 	const dropdownPopoverRef = useRef();
 
+	const handleTrackSelect = ( { title, url } ) => {
+		if ( tracks.some( ( track ) => track.src === url ) ) {
+			createNotice( 'error', __( 'This track already exists.' ), {
+				isDismissible: true,
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		const trackIndex = tracks.length;
+		onChange( [ ...tracks, { label: title || '', src: url } ] );
+		setTrackBeingEdited( trackIndex );
+	};
+
 	useEffect( () => {
 		dropdownPopoverRef.current?.focus();
 	}, [ trackBeingEdited ] );
@@ -306,11 +322,7 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 								label={ __( 'Add tracks' ) }
 							>
 								<MediaUpload
-									onSelect={ ( { url } ) => {
-										const trackIndex = tracks.length;
-										onChange( [ ...tracks, { src: url } ] );
-										setTrackBeingEdited( trackIndex );
-									} }
+									onSelect={ handleTrackSelect }
 									allowedTypes={ ALLOWED_TYPES }
 									render={ ( { open } ) => (
 										<MenuItem

package/build-style/post-author/editor-rtl.css

@@ -1,140 +0,0 @@
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Colors
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
- * Colors
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Typography
- */
-/**
- * Breakpoint mixins
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-.wp-block-post-author__inspector-settings .components-base-control,
-.wp-block-post-author__inspector-settings .components-base-control:last-child {
-  margin-bottom: 0;
-}