@wordpress/block-editor 14.3.3 → 14.3.5

package/src/components/link-control/index.js

@@ -475,16 +475,14 @@ function LinkControl( {
 					className="block-editor-link-control__search-actions"
 				>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ handleCancel }
 					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
 						className="block-editor-link-control__search-submit"

package/src/components/link-control/settings-drawer.js

@@ -25,8 +25,7 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	return (
 		<>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }

package/src/components/list-view/block-select-button.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
@@ -82,9 +81,7 @@ function ListViewBlockSelectButton(
 	}
 
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+		<a
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className
@@ -156,7 +153,7 @@ function ListViewBlockSelectButton(
 					</span>
 				) }
 			</HStack>
-		</Button>
+		</a>
 	);
 }
 

package/src/components/list-view/style.scss

@@ -216,6 +216,15 @@
 		text-align: left;
 		position: relative;
 		white-space: nowrap;
+		border-radius: 2px;
+		box-sizing: border-box;
+		color: inherit;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 400;
+		margin: 0;
+		text-decoration: none;
+		transition: box-shadow 0.1s linear;
 
 		&.is-dropping-before::before {
 			content: "";

package/src/components/media-placeholder/content.scss

@@ -1,27 +1,11 @@
 .block-editor-media-placeholder__url-input-form {
-	display: flex;
-
-	// Selector requires a lot of specificity to override base styles.
-	input[type="url"].block-editor-media-placeholder__url-input-field {
-		width: 100%;
-		min-width: 200px;
-
-		@include break-small() {
-			width: 300px;
-		}
-
-		flex-grow: 1;
-		border: none;
-		border-radius: 0;
-		margin: 2px;
+	min-width: 260px;
 
+	@include break-small() {
+		width: 300px;
 	}
 }
 
-.block-editor-media-placeholder__url-input-submit-button {
-	flex-shrink: 1;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;

package/src/components/media-placeholder/index.js

@@ -11,6 +11,8 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -42,21 +44,23 @@ const InsertFromURLPopover = ( {
 			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
 		>
-			<input
-				className="block-editor-media-placeholder__url-input-field"
-				type="text"
-				aria-label={ __( 'URL' ) }
+			<InputControl
+				__next40pxDefaultSize
+				label={ __( 'URL' ) }
+				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }
 				value={ src }
-			/>
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				className="block-editor-media-placeholder__url-input-submit-button"
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
+				suffix={
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							size="small"
+							icon={ keyboardReturn }
+							label={ __( 'Apply' ) }
+							type="submit"
+						/>
+					</InputControlSuffixWrapper>
+				}
 			/>
 		</form>
 	</URLPopover>
@@ -87,8 +91,7 @@ const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	return (
 		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
@@ -167,10 +170,6 @@ export function MediaPlaceholder( {
 		);
 	};
 
-	const onChangeSrc = ( event ) => {
-		setSrc( event.target.value );
-	};
-
 	const onFilesUpload = ( files ) => {
 		if (
 			! handleUpload ||
@@ -389,8 +388,7 @@ export function MediaPlaceholder( {
 		return (
 			onCancel && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
 					variant="link"
@@ -407,7 +405,7 @@ export function MediaPlaceholder( {
 			onSelectURL && (
 				<URLSelectionUI
 					src={ src }
-					onChangeSrc={ onChangeSrc }
+					onChangeSrc={ setSrc }
 					onSelectURL={ onSelectURL }
 				/>
 			)
@@ -419,8 +417,7 @@ export function MediaPlaceholder( {
 			onToggleFeaturedImage && (
 				<div className="block-editor-media-placeholder__url-input-container">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
 						variant="secondary"
@@ -436,8 +433,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						open();
@@ -477,8 +473,7 @@ export function MediaPlaceholder( {
 							const content = (
 								<>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										variant="primary"
 										className={ clsx(
 											'block-editor-media-placeholder__button',
@@ -508,8 +503,7 @@ export function MediaPlaceholder( {
 					<FormFileUpload
 						render={ ( { openFileDialog } ) => (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								onClick={ openFileDialog }
 								variant="primary"
 								className={ clsx(

package/src/components/rich-text/index.js

@@ -20,7 +20,7 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -39,7 +39,6 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { unlock } from '../../lock-unlock';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
 import BlockContext from '../block-context';
 
@@ -175,7 +174,6 @@ export function RichTextWrapper(
 			}
 
 			const relatedBinding = blockBindings[ identifier ];
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const blockBindingsSource = getBlockBindingsSource(
 				relatedBinding.source
 			);
@@ -188,7 +186,7 @@ export function RichTextWrapper(
 
 			const _disableBoundBlock =
 				! blockBindingsSource?.canUserEditValue?.( {
-					registry,
+					select,
 					context: blockBindingsContext,
 					args: relatedBinding.args,
 				} );
@@ -206,7 +204,7 @@ export function RichTextWrapper(
 			const { getBlockAttributes } = select( blockEditorStore );
 			const blockAttributes = getBlockAttributes( clientId );
 			const fieldsList = blockBindingsSource?.getFieldsList?.( {
-				registry,
+				select,
 				context: blockBindingsContext,
 			} );
 			const bindingKey =
@@ -235,14 +233,7 @@ export function RichTextWrapper(
 				bindingsLabel: _bindingsLabel,
 			};
 		},
-		[
-			blockBindings,
-			identifier,
-			blockName,
-			blockContext,
-			registry,
-			adjustedValue,
-		]
+		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
 	);
 
 	const shouldDisableEditing = readOnly || disableBoundBlock;

package/src/components/skip-to-selected-block/index.js

@@ -28,8 +28,7 @@ export default function SkipToSelectedBlock() {
 
 	return selectedBlockClientId ? (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			variant="secondary"
 			className="block-editor-skip-to-selected-block"
 			onClick={ onClick }

package/src/components/skip-to-selected-block/style.scss

@@ -3,18 +3,9 @@
 	top: -9999em;
 
 	&:focus {
-		height: auto;
-		width: auto;
-		display: block;
 		font-size: 14px;
 		font-weight: 600;
-		padding: 15px 23px 14px;
 		background: #f1f1f1;
-		color: var(--wp-admin-theme-color);
-		line-height: normal;
-		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-		text-decoration: none;
-		outline: none;
 		z-index: z-index(".skip-to-selected-block");
 	}
 }

package/src/components/tool-selector/index.js

@@ -44,8 +44,7 @@ function ToolSelector( props, ref ) {
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					{ ...props }
 					ref={ ref }
 					icon={ mode === 'navigation' ? selectIcon : editIcon }

package/src/components/url-input/button.js

@@ -3,7 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
 import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
 
 /**
@@ -38,8 +41,7 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
@@ -53,8 +55,7 @@ class URLInputButton extends Component {
 					>
 						<div className="block-editor-url-input__button-modal-line">
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="block-editor-url-input__back"
 								icon={ arrowLeft }
 								label={ __( 'Close' ) }
@@ -63,13 +64,16 @@ class URLInputButton extends Component {
 							<URLInput
 								value={ url || '' }
 								onChange={ onChange }
-							/>
-							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
-								icon={ keyboardReturn }
-								label={ __( 'Submit' ) }
-								type="submit"
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											size="small"
+											icon={ keyboardReturn }
+											label={ __( 'Submit' ) }
+											type="submit"
+										/>
+									</InputControlSuffixWrapper>
+								}
 							/>
 						</div>
 					</form>

package/src/components/url-input/index.js

@@ -540,8 +540,7 @@ class URLInput extends Component {
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
 							className={ clsx(

package/src/components/url-input/style.scss

@@ -109,10 +109,4 @@ $input-size: 300px;
 	flex-shrink: 1;
 	min-width: 0;
 	align-items: flex-start;
-
-	.components-button {
-		flex-shrink: 0;
-		width: $button-size;
-		height: $button-size;
-	}
 }

package/src/hooks/block-bindings.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
+import {
+	getBlockBindingsSource,
+	getBlockBindingsSources,
+} from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -12,7 +15,7 @@ import {
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useRegistry, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useContext, Fragment } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -47,7 +50,6 @@ const useToolsPanelDropdownMenuProps = () => {
 };
 
 function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
-	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
 	const registeredSources = getBlockBindingsSources();
 	const { updateBlockBindings } = useBlockBindingsUtils();
 	const currentKey = binding?.args?.key;
@@ -96,8 +98,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 
 function BlockBindingsAttribute( { attribute, binding, fieldsList } ) {
 	const { source: sourceName, args } = binding || {};
-	const sourceProps =
-		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
+	const sourceProps = getBlockBindingsSource( sourceName );
 	const isSourceInvalid = ! sourceProps;
 	return (
 		<VStack className="block-editor-bindings__item" spacing={ 0 }>
@@ -186,7 +187,6 @@ function EditableBlockBindingsPanelItems( {
 }
 
 export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
-	const registry = useRegistry();
 	const blockContext = useContext( BlockContext );
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const bindableAttributes = getBindableAttributes( blockName );
@@ -194,14 +194,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	// `useSelect` is used purposely here to ensure `getFieldsList`
 	// is updated whenever there are updates in block context.
-	// `source.getFieldsList` may also call a selector via `registry.select`.
+	// `source.getFieldsList` may also call a selector via `select`.
 	const _fieldsList = {};
 	const { fieldsList, canUpdateBlockBindings } = useSelect(
 		( select ) => {
 			if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
 				return EMPTY_OBJECT;
 			}
-			const { getBlockBindingsSources } = unlock( blocksPrivateApis );
 			const registeredSources = getBlockBindingsSources();
 			Object.entries( registeredSources ).forEach(
 				( [ sourceName, { getFieldsList, usesContext } ] ) => {
@@ -214,7 +213,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 							}
 						}
 						const sourceList = getFieldsList( {
-							registry,
+							select,
 							context,
 						} );
 						// Only add source if the list is not empty.
@@ -234,7 +233,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 						.canUpdateBlockBindings,
 			};
 		},
-		[ blockContext, bindableAttributes, registry ]
+		[ blockContext, bindableAttributes ]
 	);
 	// Return early if there are no bindable attributes.
 	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {

package/src/hooks/use-bindings-attributes.js

@@ -118,79 +118,81 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		// there are attribute updates.
 		// `source.getValues` may also call a selector via `registry.select`.
 		const updatedContext = {};
-		const boundAttributes = useSelect( () => {
-			if ( ! blockBindings ) {
-				return;
-			}
+		const boundAttributes = useSelect(
+			( select ) => {
+				if ( ! blockBindings ) {
+					return;
+				}
 
-			const attributes = {};
+				const attributes = {};
 
-			const blockBindingsBySource = new Map();
+				const blockBindingsBySource = new Map();
 
-			for ( const [ attributeName, binding ] of Object.entries(
-				blockBindings
-			) ) {
-				const { source: sourceName, args: sourceArgs } = binding;
-				const source = sources[ sourceName ];
-				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
-					continue;
-				}
+				for ( const [ attributeName, binding ] of Object.entries(
+					blockBindings
+				) ) {
+					const { source: sourceName, args: sourceArgs } = binding;
+					const source = sources[ sourceName ];
+					if (
+						! source ||
+						! canBindAttribute( name, attributeName )
+					) {
+						continue;
+					}
 
-				// Populate context.
-				for ( const key of source.usesContext || [] ) {
-					updatedContext[ key ] = blockContext[ key ];
-				}
+					// Populate context.
+					for ( const key of source.usesContext || [] ) {
+						updatedContext[ key ] = blockContext[ key ];
+					}
 
-				blockBindingsBySource.set( source, {
-					...blockBindingsBySource.get( source ),
-					[ attributeName ]: {
-						args: sourceArgs,
-					},
-				} );
-			}
+					blockBindingsBySource.set( source, {
+						...blockBindingsBySource.get( source ),
+						[ attributeName ]: {
+							args: sourceArgs,
+						},
+					} );
+				}
 
-			if ( blockBindingsBySource.size ) {
-				for ( const [ source, bindings ] of blockBindingsBySource ) {
-					// Get values in batch if the source supports it.
-					let values = {};
-					if ( ! source.getValues ) {
-						Object.keys( bindings ).forEach( ( attr ) => {
-							// Default to the the source label when `getValues` doesn't exist.
-							values[ attr ] = source.label;
-						} );
-					} else {
-						values = source.getValues( {
-							registry,
-							context: updatedContext,
-							clientId,
-							bindings,
-						} );
-					}
-					for ( const [ attributeName, value ] of Object.entries(
-						values
-					) ) {
-						if (
-							attributeName === 'url' &&
-							( ! value || ! isURLLike( value ) )
-						) {
-							// Return null if value is not a valid URL.
-							attributes[ attributeName ] = null;
+				if ( blockBindingsBySource.size ) {
+					for ( const [
+						source,
+						bindings,
+					] of blockBindingsBySource ) {
+						// Get values in batch if the source supports it.
+						let values = {};
+						if ( ! source.getValues ) {
+							Object.keys( bindings ).forEach( ( attr ) => {
+								// Default to the the source label when `getValues` doesn't exist.
+								values[ attr ] = source.label;
+							} );
 						} else {
-							attributes[ attributeName ] = value;
+							values = source.getValues( {
+								select,
+								context: updatedContext,
+								clientId,
+								bindings,
+							} );
+						}
+						for ( const [ attributeName, value ] of Object.entries(
+							values
+						) ) {
+							if (
+								attributeName === 'url' &&
+								( ! value || ! isURLLike( value ) )
+							) {
+								// Return null if value is not a valid URL.
+								attributes[ attributeName ] = null;
+							} else {
+								attributes[ attributeName ] = value;
+							}
 						}
 					}
 				}
-			}
 
-			return attributes;
-		}, [
-			blockBindings,
-			name,
-			clientId,
-			updatedContext,
-			registry,
-			sources,
-		] );
+				return attributes;
+			},
+			[ blockBindings, name, clientId, updatedContext, sources ]
+		);
 
 		const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
 		const hasPatternOverridesDefaultBinding =
@@ -240,7 +242,8 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 							bindings,
 						] of blockBindingsBySource ) {
 							source.setValues( {
-								registry,
+								select: registry.select,
+								dispatch: registry.dispatch,
 								context: updatedContext,
 								clientId,
 								bindings,