@wordpress/block-editor 12.3.1 → 12.3.3

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

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+const DEFAULT_SIZE_OPTIONS = [
+	{
+		label: _x( 'Thumbnail', 'Image size option for resolution control' ),
+		value: 'thumbnail',
+	},
+	{
+		label: _x( 'Medium', 'Image size option for resolution control' ),
+		value: 'medium',
+	},
+	{
+		label: _x( 'Large', 'Image size option for resolution control' ),
+		value: 'large',
+	},
+	{
+		label: _x( 'Full Size', 'Image size option for resolution control' ),
+		value: 'full',
+	},
+];
+
+export default function ResolutionTool( {
+	panelId,
+	value,
+	onChange,
+	options = DEFAULT_SIZE_OPTIONS,
+	defaultValue = DEFAULT_SIZE_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	const displayValue = value ?? defaultValue;
+	return (
+		<ToolsPanelItem
+			hasValue={ () => displayValue !== defaultValue }
+			label={ __( 'Resolution' ) }
+			onDeselect={ () => onChange( defaultValue ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				label={ __( 'Resolution' ) }
+				value={ displayValue }
+				options={ options }
+				onChange={ onChange }
+				help={ __( 'Select the size of the source image.' ) }
+				size={ '__unstable-large' }
+			/>
+		</ToolsPanelItem>
+	);
+}

package/src/components/resolution-tool/stories/index.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ResolutionTool from '..';
+
+export default {
+	title: 'BlockEditor (Private APIs)/ResolutionControl',
+	component: ResolutionTool,
+	argTypes: {
+		panelId: { control: { type: null } },
+		onChange: { action: 'changed' },
+	},
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+	const [ resolution, setResolution ] = useState( undefined );
+	const resetAll = () => {
+		setResolution( undefined );
+		onChangeProp( undefined );
+	};
+	return (
+		<Panel>
+			<ToolsPanel panelId={ panelId } resetAll={ resetAll }>
+				<ResolutionTool
+					panelId={ panelId }
+					onChange={ ( newValue ) => {
+						setResolution( newValue );
+						onChangeProp( newValue );
+					} }
+					value={ resolution }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};

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

@@ -434,6 +434,7 @@ class URLInput extends Component {
 			placeholder = __( 'Paste URL or type to search' ),
 			__experimentalRenderControl: renderControl,
 			value = '',
+			hideLabelFromVision = false,
 		} = this.props;
 
 		const {
@@ -452,6 +453,7 @@ class URLInput extends Component {
 			className: classnames( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
 			} ),
+			hideLabelFromVision,
 		};
 
 		const inputProps = {

package/src/private-apis.js

@@ -16,6 +16,8 @@ import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
 import { useLayoutClasses, useLayoutStyles } from './hooks';
+import DimensionsTool from './components/dimensions-tool';
+import ResolutionTool from './components/resolution-tool';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -37,4 +39,6 @@ lock( privateApis, {
 	BlockRemovalWarningModal,
 	useLayoutClasses,
 	useLayoutStyles,
+	DimensionsTool,
+	ResolutionTool,
 } );

package/src/store/defaults.js

@@ -18,6 +18,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {number}        maxWidth                               Max width to constraint resizing
  * @property {boolean|Array} allowedBlockTypes                      Allowed block types
  * @property {boolean}       hasFixedToolbar                        Whether or not the editor toolbar is fixed
+ * @property {boolean}       distractionFree                        Whether or not the editor UI is distraction free
  * @property {boolean}       focusMode                              Whether the focus mode is enabled or not
  * @property {Array}         styles                                 Editor Styles
  * @property {boolean}       keepCaretInsideBlock                   Whether caret should move between blocks in edit mode