@wordpress/block-editor 9.1.0 → 9.2.0

package/src/components/media-upload/test/index.native.js

@@ -20,6 +20,7 @@ import {
 	OPTION_TAKE_VIDEO,
 	OPTION_TAKE_PHOTO,
 	OPTION_INSERT_FROM_URL,
+	OPTION_WORDPRESS_MEDIA_LIBRARY,
 } from '../index';
 
 const MEDIA_URL = 'http://host.media.type';
@@ -33,8 +34,11 @@ describe( 'MediaUpload component', () => {
 		expect( wrapper ).toBeTruthy();
 	} );
 
-	it( 'shows right media capture option for media type', () => {
-		const expectOptionForMediaType = ( mediaType, expectedOption ) => {
+	describe( 'Media capture options for different media block types', () => {
+		const expectOptionForMediaType = async (
+			mediaType,
+			expectedOptions
+		) => {
 			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
@@ -52,11 +56,32 @@ describe( 'MediaUpload component', () => {
 			);
 			fireEvent.press( wrapper.getByText( 'Open Picker' ) );
 
-			wrapper.getByText( expectedOption );
+			expectedOptions.forEach( ( item ) => {
+				const option = wrapper.getByText( item );
+				expect( option ).toBeVisible();
+			} );
 		};
-		expectOptionForMediaType( MEDIA_TYPE_IMAGE, OPTION_TAKE_PHOTO );
-		expectOptionForMediaType( MEDIA_TYPE_VIDEO, OPTION_TAKE_VIDEO );
-		expectOptionForMediaType( MEDIA_TYPE_AUDIO, OPTION_INSERT_FROM_URL );
+
+		it( 'shows the correct media capture options for the Image block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_IMAGE, [
+				OPTION_TAKE_PHOTO,
+				OPTION_WORDPRESS_MEDIA_LIBRARY,
+				OPTION_INSERT_FROM_URL,
+			] );
+		} );
+
+		it( 'shows the correct media capture options for the Video block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_VIDEO, [
+				OPTION_TAKE_VIDEO,
+				OPTION_WORDPRESS_MEDIA_LIBRARY,
+			] );
+		} );
+
+		it( 'shows the correct media capture options for the Audio block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_AUDIO, [
+				OPTION_INSERT_FROM_URL,
+			] );
+		} );
 	} );
 
 	const expectMediaPickerForOption = (

package/src/components/plain-text/index.native.js

@@ -7,7 +7,7 @@ import { TextInput, Platform, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { getPxFromCssUnit } from '@wordpress/block-editor';
+import { RichText, getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,6 +18,9 @@ export default class PlainText extends Component {
 	constructor() {
 		super( ...arguments );
 		this.isAndroid = Platform.OS === 'android';
+
+		this.onChangeTextInput = this.onChangeTextInput.bind( this );
+		this.onChangeRichText = this.onChangeRichText.bind( this );
 	}
 
 	componentDidMount() {
@@ -44,7 +47,7 @@ export default class PlainText extends Component {
 
 	componentDidUpdate( prevProps ) {
 		if ( ! this.props.isSelected && prevProps.isSelected ) {
-			this._input.blur();
+			this._input?.blur();
 		}
 	}
 
@@ -55,11 +58,11 @@ export default class PlainText extends Component {
 	}
 
 	focus() {
-		this._input.focus();
+		this._input?.focus();
 	}
 
 	blur() {
-		this._input.blur();
+		this._input?.blur();
 	}
 
 	getFontSize() {
@@ -79,20 +82,73 @@ export default class PlainText extends Component {
 		};
 	}
 
+	replaceLineBreakTags( value ) {
+		return value?.replace( RegExp( '<br>', 'gim' ), '\n' );
+	}
+
+	onChangeTextInput( event ) {
+		const { onChange } = this.props;
+		onChange( event.nativeEvent.text );
+	}
+
+	onChangeRichText( value ) {
+		const { onChange } = this.props;
+		// The <br> tags have to be replaced with new line characters
+		// as the content of plain text shouldn't contain HTML tags.
+		onChange( this.replaceLineBreakTags( value ) );
+	}
+
 	render() {
-		const { style } = this.props;
+		const {
+			style,
+			__experimentalVersion,
+			onFocus,
+			...otherProps
+		} = this.props;
 		const textStyles = [
 			style || styles[ 'block-editor-plain-text' ],
 			this.getFontSize(),
 		];
 
+		if ( __experimentalVersion === 2 ) {
+			const disableFormattingProps = {
+				withoutInteractiveFormatting: true,
+				disableEditingMenu: true,
+				__unstableDisableFormats: true,
+				disableSuggestions: true,
+			};
+
+			const forcePlainTextProps = {
+				preserveWhiteSpace: true,
+				__unstablePastePlainText: true,
+				multiline: false,
+			};
+
+			const fontProps = {
+				fontFamily: style?.fontFamily,
+				fontSize: style?.fontSize,
+				fontWeight: style?.fontWeight,
+			};
+
+			return (
+				<RichText
+					{ ...otherProps }
+					{ ...disableFormattingProps }
+					{ ...forcePlainTextProps }
+					{ ...fontProps }
+					identifier="content"
+					style={ style }
+					onChange={ this.onChangeRichText }
+					unstableOnFocus={ onFocus }
+				/>
+			);
+		}
+
 		return (
 			<TextInput
 				{ ...this.props }
 				ref={ ( x ) => ( this._input = x ) }
-				onChange={ ( event ) => {
-					this.props.onChange( event.nativeEvent.text );
-				} }
+				onChange={ this.onChangeTextInput }
 				onFocus={ this.props.onFocus } // Always assign onFocus as a props.
 				onBlur={ this.props.onBlur } // Always assign onBlur as a props.
 				fontFamily={

package/src/components/publish-date-time-picker/README.md

@@ -0,0 +1,52 @@
+# `PublishDateTimePicker`
+
+`<PublishDateTimePicker />` is a component used to select the date and time that
+a post will be published. It wraps the `<DateTimePicker />` component found in
+`@wordpress/components` and adds additional post-specific controls.
+
+See [the documentation for DateTimePicker](/packages/components/src/date-time)
+for more information.
+
+## Usage
+
+```jsx
+import { Dropdown, Button } from '@wordpress/components';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+const MyDateTimePicker = () => {
+	const [ date, setDate ] = useState( new Date() );
+
+	return (
+		<Dropdown
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+				>
+					Select post date
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<PublishDateTimePicker
+					currentDate={ date }
+					onChange={ ( newDate ) => setDate( newDate ) }
+					onClose={ onClose }
+				/>
+			) }
+		/>
+	);
+};
+```
+
+## Props
+
+`PublishDateTimePicker` supports all of the props that
+[`DateTimePicker`](/packages/components/src/date-time#Props) supports, plus:
+
+### onClose
+
+Called when the user presses the close button.
+
+- Type: `Function`
+- Required: Yes

package/src/components/publish-date-time-picker/index.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	DateTimePicker,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	Button,
+} from '@wordpress/components';
+import { closeSmall } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+
+function PublishDateTimePicker(
+	{ onClose, onChange, ...additionalProps },
+	ref
+) {
+	return (
+		<div ref={ ref } className="block-editor-publish-date-time-picker">
+			{ /* TODO: This header is essentially the same as the one in <PostVisiblity />. DRY it up. */ }
+			<HStack className="block-editor-publish-date-time-picker__header">
+				<h2 className="block-editor-publish-date-time-picker__heading">
+					{ __( 'Publish' ) }
+				</h2>
+				<Spacer />
+				<Button
+					className="block-editor-publish-date-time-picker__reset"
+					variant="tertiary"
+					onClick={ () => onChange?.( null ) }
+				>
+					{ __( 'Now' ) }
+				</Button>
+				<Button
+					className="block-editor-publish-date-time-picker__close"
+					icon={ closeSmall }
+					label={ __( 'Close' ) }
+					onClick={ onClose }
+				/>
+			</HStack>
+			<DateTimePicker
+				__nextRemoveHelpButton
+				__nextRemoveResetButton
+				onChange={ onChange }
+				{ ...additionalProps }
+			/>
+		</div>
+	);
+}
+
+export default forwardRef( PublishDateTimePicker );

package/src/components/publish-date-time-picker/style.scss

@@ -0,0 +1,20 @@
+.block-editor-publish-date-time-picker__header {
+	margin-bottom: 1em;
+}
+
+.block-editor-publish-date-time-picker__heading {
+	font-size: $default-font-size;
+	margin: 0;
+}
+
+.block-editor-publish-date-time-picker__reset {
+	height: $icon-size;
+	margin: 0;
+	text-decoration: underline;
+}
+
+[class].block-editor-publish-date-time-picker__close {
+	height: $icon-size;
+	min-width: $icon-size;
+	padding: 0;
+}

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

@@ -76,6 +76,8 @@ function removeNativeProps( props ) {
 		'minWidth',
 		'maxWidth',
 		'setRef',
+		'disableSuggestions',
+		'disableAutocorrection',
 	] );
 }
 

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

@@ -111,6 +111,8 @@ function RichTextWrapper(
 		maxWidth,
 		onBlur,
 		setRef,
+		disableSuggestions,
+		disableAutocorrection,
 		...props
 	},
 	forwardedRef
@@ -635,6 +637,8 @@ function RichTextWrapper(
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
 			setRef={ setRef }
+			disableSuggestions={ disableSuggestions }
+			disableAutocorrection={ disableAutocorrection }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

package/src/components/writing-flow/use-input.js

@@ -30,6 +30,16 @@ export default function useInput() {
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
+		function onBeforeInput( event ) {
+			if ( ! hasMultiSelection() ) {
+				return;
+			}
+			// Prevent the browser to format something when we have multiselection.
+			if ( event.inputType?.startsWith( 'format' ) ) {
+				event.preventDefault();
+			}
+		}
+
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented ) {
 				return;
@@ -102,9 +112,11 @@ export default function useInput() {
 			}
 		}
 
+		node.addEventListener( 'beforeinput', onBeforeInput );
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'compositionstart', onCompositionStart );
 		return () => {
+			node.removeEventListener( 'beforeinput', onBeforeInput );
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'compositionstart', onCompositionStart );
 		};

package/src/elements/index.js

@@ -0,0 +1 @@
+export const __experimentalElementButtonClassName = 'wp-element-button';

package/src/hooks/color.js

@@ -76,34 +76,6 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
-/**
- * Checks whether a color has been set either with a named preset color in
- * a top level block attribute or as a custom value within the style attribute
- * object.
- *
- * @param {string} name Name of the color to check.
- * @return {boolean} Whether or not a color has a value.
- */
-const hasColor = ( name ) => ( props ) => {
-	if ( name === 'background' ) {
-		return (
-			!! props.attributes.backgroundColor ||
-			!! props.attributes.style?.color?.background ||
-			!! props.attributes.gradient ||
-			!! props.attributes.style?.color?.gradient
-		);
-	}
-
-	if ( name === 'link' ) {
-		return !! props.attributes.style?.elements?.link?.color?.text;
-	}
-
-	return (
-		!! props.attributes[ `${ name }Color` ] ||
-		!! props.attributes.style?.color?.[ name ]
-	);
-};
-
 /**
  * Clears a single color property from a style object.
  *
@@ -114,20 +86,6 @@ const hasColor = ( name ) => ( props ) => {
 const clearColorFromStyles = ( path, style ) =>
 	cleanEmptyObject( immutableSet( style, path, undefined ) );
 
-/**
- * Resets the block attributes for text color.
- *
- * @param {Object}   props               Current block props.
- * @param {Object}   props.attributes    Block attributes.
- * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
- */
-const resetTextColor = ( { attributes, setAttributes } ) => {
-	setAttributes( {
-		textColor: undefined,
-		style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-	} );
-};
-
 /**
  * Clears text color related properties from supplied attributes.
  *
@@ -139,18 +97,6 @@ const resetAllTextFilter = ( attributes ) => ( {
 	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
 } );
 
-/**
- * Resets the block attributes for link color.
- *
- * @param {Object}   props               Current block props.
- * @param {Object}   props.attributes    Block attributes.
- * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
- */
-const resetLinkColor = ( { attributes, setAttributes } ) => {
-	const path = [ 'elements', 'link', 'color', 'text' ];
-	setAttributes( { style: clearColorFromStyles( path, attributes.style ) } );
-};
-
 /**
  * Clears link color related properties from supplied attributes.
  *
@@ -184,17 +130,6 @@ const clearBackgroundAndGradient = ( attributes ) => ( {
 	},
 } );
 
-/**
- * Resets the block attributes for both background color and gradient.
- *
- * @param {Object}   props               Current block props.
- * @param {Object}   props.attributes    Block attributes.
- * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
- */
-const resetBackgroundAndGradient = ( { attributes, setAttributes } ) => {
-	setAttributes( clearBackgroundAndGradient( attributes ) );
-};
-
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -496,12 +431,16 @@ export function ColorEdit( props ) {
 
 		const newStyle = cleanEmptyObject(
 			immutableSet(
-				style,
+				localAttributes.current?.style,
 				[ 'elements', 'link', 'color', 'text' ],
 				newLinkColorValue
 			)
 		);
 		props.setAttributes( { style: newStyle } );
+		localAttributes.current = {
+			...localAttributes.current,
+			...{ style: newStyle },
+		};
 	};
 
 	const enableContrastChecking =
@@ -529,8 +468,6 @@ export function ColorEdit( props ) {
 									style?.color?.text
 								).color,
 								isShownByDefault: defaultColorControls?.text,
-								hasValue: () => hasColor( 'text' )( props ),
-								onDeselect: () => resetTextColor( props ),
 								resetAllFilter: resetAllTextFilter,
 							},
 					  ]
@@ -553,10 +490,6 @@ export function ColorEdit( props ) {
 									: undefined,
 								isShownByDefault:
 									defaultColorControls?.background,
-								hasValue: () =>
-									hasColor( 'background' )( props ),
-								onDeselect: () =>
-									resetBackgroundAndGradient( props ),
 								resetAllFilter: clearBackgroundAndGradient,
 							},
 					  ]
@@ -573,8 +506,6 @@ export function ColorEdit( props ) {
 								clearable: !! style?.elements?.link?.color
 									?.text,
 								isShownByDefault: defaultColorControls?.link,
-								hasValue: () => hasColor( 'link' )( props ),
-								onDeselect: () => resetLinkColor( props ),
 								resetAllFilter: resetAllLinkFilter,
 							},
 					  ]

package/src/hooks/color.scss

@@ -20,4 +20,13 @@
 			row-gap: 0;
 		}
 	}
+
+	/**
+	 * After converting PanelColorGradientSettings to render as a ToolsPanel
+	 * we need to remove the top margin when wrapping inner content due to
+	 * rendering via SlotFills.
+	 */
+	.block-editor-tools-panel-color-gradient-settings__item.first {
+		margin-top: 0;
+	}
 }

package/src/hooks/dimensions.js

@@ -153,7 +153,7 @@ const useIsDimensionsDisabled = ( props = {} ) => {
 };
 
 /**
- * Custom hook to retrieve which padding/margin is supported
+ * Custom hook to retrieve which padding/margin/blockGap is supported
  * e.g. top, right, bottom or left.
  *
  * Sides are opted into by default. It is only if a specific side is set to
@@ -162,7 +162,7 @@ const useIsDimensionsDisabled = ( props = {} ) => {
  * @param {string} blockName Block name.
  * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
  *
- * @return {Object} Sides supporting custom margin.
+ * @return {?string[]} Strings representing the custom sides available.
  */
 export function useCustomSides( blockName, feature ) {
 	const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
@@ -172,7 +172,15 @@ export function useCustomSides( blockName, feature ) {
 		return;
 	}
 
-	return support[ feature ];
+	// Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).
+	if ( Array.isArray( support[ feature ] ) ) {
+		return support[ feature ];
+	}
+
+	// Finally, attempt to return `.sides` if the setting is an object.
+	if ( support[ feature ]?.sides ) {
+		return support[ feature ].sides;
+	}
 }
 
 /**

package/src/index.js

@@ -13,6 +13,7 @@ export {
 	useCachedTruthy,
 } from './hooks';
 export * from './components';
+export * from './elements';
 export * from './utils';
 export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';

package/src/layouts/flex.js

@@ -11,6 +11,7 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
+import { getBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -109,14 +110,21 @@ export default {
 	save: function FlexLayoutStyle( { selector, layout, style, blockName } ) {
 		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const fallbackValue =
+			getBlockSupport( blockName, [
+				'spacing',
+				'blockGap',
+				'__experimentalDefault',
+			] ) || '0.5em';
+
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
 		const blockGapValue =
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
-				: 'var( --wp--style--block-gap, 0.5em )';
+				? getGapCSSValue( style?.spacing?.blockGap, fallbackValue )
+				: `var( --wp--style--block-gap, ${ fallbackValue } )`;
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
@@ -143,7 +151,7 @@ export default {
 				${ appendSelectors( selector ) } {
 					display: flex;
 					flex-wrap: ${ flexWrap };
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : fallbackValue };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 

package/src/store/actions.js

@@ -1603,3 +1603,15 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
+
+/**
+ * Action that sets whether given blocks are visible on the canvas.
+ *
+ * @param {Record<string,boolean>} updates For each block's clientId, its new visibility setting.
+ */
+export function setBlockVisibility( updates ) {
+	return {
+		type: 'SET_BLOCK_VISIBILITY',
+		updates,
+	};
+}

package/src/store/reducer.js

@@ -606,6 +606,7 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 			order: mapBlockOrder( action.blocks ),
 			parents: mapBlockParents( action.blocks ),
 			controlledInnerBlocks: {},
+			visibility: {},
 		};
 
 		const subTree = buildBlockTree( newState, action.blocks );
@@ -1139,6 +1140,17 @@ export const blocks = flow(
 		}
 		return state;
 	},
+
+	visibility( state = {}, action ) {
+		if ( action.type === 'SET_BLOCK_VISIBILITY' ) {
+			return {
+				...state,
+				...action.updates,
+			};
+		}
+
+		return state;
+	},
 } );
 
 /**
@@ -1678,7 +1690,8 @@ export function automaticChangeStatus( state, action ) {
 
 			return;
 		// Undoing an automatic change should still be possible after mouse
-		// move.
+		// move or after visibility change.
+		case 'SET_BLOCK_VISIBILITY':
 		case 'START_TYPING':
 		case 'STOP_TYPING':
 			return state;

package/src/store/selectors.js

@@ -2651,3 +2651,31 @@ export function wasBlockJustInserted( state, clientId, source ) {
 		lastBlockInserted.source === source
 	);
 }
+
+/**
+ * Tells if the block is visible on the canvas or not.
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} clientId Client Id of the block.
+ * @return {boolean} True if the block is visible.
+ */
+export function isBlockVisible( state, clientId ) {
+	return state.blocks.visibility?.[ clientId ] ?? true;
+}
+
+/**
+ * Returns the list of all hidden blocks.
+ *
+ * @param {Object} state Global application state.
+ * @return {[string]} List of hidden blocks.
+ */
+export const __unstableGetVisibleBlocks = createSelector(
+	( state ) => {
+		return new Set(
+			Object.keys( state.blocks.visibility ).filter(
+				( key ) => state.blocks.visibility[ key ]
+			)
+		);
+	},
+	( state ) => [ state.blocks.visibility ]
+);