@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

package/src/components/rich-text/file-paste-handler.js

@@ -5,7 +5,9 @@ import { createBlobURL } from '@wordpress/blob';
 
 export function filePasteHandler( files ) {
 	return files
-		.filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) )
+		.filter( ( { type } ) =>
+			/^image\/(?:jpe?g|png|gif|webp)$/.test( type )
+		)
 		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
 		.join( '' );
 }

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

@@ -400,6 +400,7 @@ function RichTextWrapper(
 	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
 		since: '5.4',
 		alternative: 'className prop or create your own wrapper div',
+		version: '6.2',
 	} );
 
 	const className = classnames( 'block-editor-rich-text', wrapperClassName );

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

@@ -696,6 +696,7 @@ function RichTextWrapper(
 	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
 		since: '5.4',
 		alternative: 'className prop or create your own wrapper div',
+		version: '6.2',
 	} );
 
 	return (

package/src/components/rich-text/prevent-event-discovery.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { insert } from '@wordpress/rich-text';
+
+export function preventEventDiscovery( value ) {
+	const searchText = 'tales of gutenberg';
+	const addText =
+		' 🐡🐢🦀🐤🦋🐘🐧🐹🦁🦄🦍🐼🐿🎃🐴🐝🐆🦕🦔🌱🍇π🍌🐉💧🥨🌌🍂🍠🥦🥚🥝🎟🥥🥒🛵🥖🍒🍯🎾🎲🐺🐚🐮⌛️';
+	const { start, text } = value;
+
+	if ( start < searchText.length ) {
+		return value;
+	}
+
+	const charactersBefore = text.slice( start - searchText.length, start );
+
+	if ( charactersBefore.toLowerCase() !== searchText ) {
+		return value;
+	}
+
+	return insert( value, addText );
+}

package/src/components/rich-text/use-input-rules.js

@@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { preventEventDiscovery } from './prevent-event-discovery';
 
 export function useInputRules( props ) {
 	const {
@@ -85,7 +86,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				value
+				preventEventDiscovery( value )
 			);
 
 			if ( transformed !== value ) {

package/src/components/rich-text/use-paste-handler.js

@@ -155,9 +155,22 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
-			// Only process file if no HTML is present.
-			// Note: a pasted file may have the URL as plain text.
-			if ( files && files.length && ! html ) {
+			// Process any attached files, unless we detect Microsoft Office as
+			// the source.
+			//
+			// When content is copied from Microsoft Office, an image of the
+			// content is rendered and attached to the clipboard along with the
+			// plain-text and HTML content. This artifact is a distraction from
+			// the relevant clipboard data, so we ignore it.
+			//
+			// Props https://github.com/pubpub/pubpub/commit/2f933277a15a263a1ab4bbd36b96d3a106544aec
+			if (
+				files &&
+				files.length &&
+				! html?.includes(
+					'xmlns:o="urn:schemas-microsoft-com:office:office'
+				)
+			) {
 				const content = pasteHandler( {
 					HTML: filePasteHandler( files ),
 					mode: 'BLOCKS',

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

@@ -54,6 +54,7 @@ export function getAllowedFormats( {
 	deprecated( 'wp.blockEditor.RichText formattingControls prop', {
 		since: '5.4',
 		alternative: 'allowedFormats',
+		version: '6.2',
 	} );
 
 	return formattingControls.map( ( name ) => `core/${ name }` );

package/src/components/selection-scroll-into-view/index.js

@@ -12,6 +12,7 @@ import deprecated from '@wordpress/deprecated';
 export function MultiSelectScrollIntoView() {
 	deprecated( 'wp.blockEditor.MultiSelectScrollIntoView', {
 		hint: 'This behaviour is now built-in.',
+		since: '5.8',
 	} );
 	return null;
 }

package/src/components/url-input/README.md

@@ -147,6 +147,11 @@ _Optional._ If this property is added, a label will be generated using label pro
 
 _Optional._ Adds and optional class to the parent `div` that wraps the URLInput field and popover
 
+### `placeholder: String`
+
+_Optional._ Placeholder text to show when the field is empty, similar to the
+[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
+
 ### `disableSuggestions: Boolean`
 
 _Optional._ Provides additional control over whether suggestions are disabled.

package/src/components/use-display-block-controls/index.native.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit/context';
+import { store as blockEditorStore } from '../../store';
+
+export default function useDisplayBlockControls() {
+	const { isSelected, clientId, name } = useBlockEditContext();
+	return useSelect(
+		( select ) => {
+			const { getBlockName, getBlockRootClientId } = select(
+				blockEditorStore
+			);
+
+			const parentId = getBlockRootClientId( clientId );
+			const parentBlockName = getBlockName( parentId );
+
+			const hideControls = hasBlockSupport(
+				parentBlockName,
+				'__experimentalHideChildBlockControls',
+				false
+			);
+
+			if ( ! hideControls && isSelected ) {
+				return true;
+			}
+
+			return false;
+		},
+		[ clientId, isSelected, name ]
+	);
+}

package/src/components/use-on-block-drop/index.js

@@ -256,10 +256,14 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		const files = getFilesFromDataTransfer( event.dataTransfer );
 		const html = event.dataTransfer.getData( 'text/html' );
 
-		if ( files.length ) {
-			_onFilesDrop( files );
-		} else if ( html ) {
+		/**
+		 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
+		 * The order of the checks is important to recognise the HTML drop.
+		 */
+		if ( html ) {
 			_onHTMLDrop( html );
+		} else if ( files.length ) {
+			_onFilesDrop( files );
 		} else {
 			_onDrop( event );
 		}

package/src/components/writing-flow/test/use-multi-selection.js

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { toggleRichText } from '../use-multi-selection';
+
+describe( 'toggleRichText', () => {
+	function getContainer( isContentEditible ) {
+		const container = document.createDocumentFragment();
+		[
+			'rich-text',
+			'rich-text editor-post-title__input',
+			'some-other-class',
+		].forEach( ( className ) => {
+			const element = document.createElement( 'div' );
+			element.setAttribute( 'class', className );
+			if ( isContentEditible ) {
+				element.setAttribute( 'contenteditable', true );
+			}
+			container.appendChild( element );
+		} );
+		return container;
+	}
+
+	it( 'should set the `contenteditable` attribute on eligible rich text nodes', () => {
+		const container = getContainer();
+		toggleRichText( container, true );
+		let nodes = container.querySelectorAll( '[contenteditable=true]' );
+
+		expect( nodes ).toHaveLength( 1 );
+		expect( nodes[ 0 ].className ).toBe( 'rich-text' );
+
+		toggleRichText( container, false );
+		nodes = container.querySelectorAll( '[contenteditable=true]' );
+		expect( nodes ).toHaveLength( 0 );
+	} );
+} );

package/src/components/writing-flow/use-multi-selection.js

@@ -15,16 +15,19 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-function toggleRichText( container, toggle ) {
-	Array.from( container.querySelectorAll( '.rich-text' ) ).forEach(
-		( node ) => {
-			if ( toggle ) {
-				node.setAttribute( 'contenteditable', true );
-			} else {
-				node.removeAttribute( 'contenteditable' );
-			}
+export function toggleRichText( container, toggle ) {
+	Array.from(
+		container.querySelectorAll(
+			// Exclude the Post Title from multi-select disable.
+			'.rich-text:not( .editor-post-title__input )'
+		)
+	).forEach( ( node ) => {
+		if ( toggle ) {
+			node.setAttribute( 'contenteditable', true );
+		} else {
+			node.removeAttribute( 'contenteditable' );
 		}
-	);
+	} );
 }
 
 /**

package/src/hooks/border-color.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,7 +22,11 @@ import {
 	getColorObjectByAttributeValues,
 } from '../components/colors';
 import useSetting from '../components/use-setting';
-import { hasBorderSupport, shouldSkipSerialization } from './border';
+import {
+	hasBorderSupport,
+	removeBorderAttribute,
+	shouldSkipSerialization,
+} from './border';
 import { cleanEmptyObject } from './utils';
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
@@ -52,15 +56,30 @@ export function BorderColorEdit( props ) {
 		( colors, origin ) => colors.concat( origin.colors ),
 		[]
 	);
+	const { color: customBorderColor } = style?.border || {};
 	const [ colorValue, setColorValue ] = useState(
 		() =>
 			getColorObjectByAttributeValues(
 				availableColors,
 				borderColor,
-				style?.border?.color
+				customBorderColor
 			)?.color
 	);
 
+	// Detect changes in the color attributes and update the colorValue to keep the
+	// UI in sync. This is necessary for situations when border controls interact with
+	// each other: eg, setting the border width to zero causes the color and style
+	// selections to be cleared.
+	useEffect( () => {
+		setColorValue(
+			getColorObjectByAttributeValues(
+				availableColors,
+				borderColor,
+				customBorderColor
+			)?.color
+		);
+	}, [ borderColor, customBorderColor, availableColors ] );
+
 	const onChangeColor = ( value ) => {
 		setColorValue( value );
 
@@ -106,6 +125,39 @@ export function BorderColorEdit( props ) {
 	);
 }
 
+/**
+ * Checks if there is a current value in the border color block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a border color value set.
+ */
+export function hasBorderColorValue( props ) {
+	const {
+		attributes: { borderColor, style },
+	} = props;
+
+	return !! borderColor || !! style?.border?.color;
+}
+
+/**
+ * Resets the border color block support attributes. This can be used when
+ * disabling the border color support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBorderColor( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		borderColor: undefined,
+		style: removeBorderAttribute( style, 'color' ),
+	} );
+}
+
 /**
  * Filters registered block settings, extending attributes to include
  * `borderColor` if needed.

package/src/hooks/border-radius.js

@@ -3,6 +3,7 @@
  */
 import BorderRadiusControl from '../components/border-radius-control';
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control panel containing the border radius related configuration.
@@ -40,3 +41,34 @@ export function BorderRadiusEdit( props ) {
 		/>
 	);
 }
+
+/**
+ * Checks if there is a current value in the border radius block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a border radius value set.
+ */
+export function hasBorderRadiusValue( props ) {
+	const borderRadius = props.attributes.style?.border?.radius;
+
+	if ( typeof borderRadius === 'object' ) {
+		return Object.entries( borderRadius ).some( Boolean );
+	}
+
+	return !! borderRadius;
+}
+
+/**
+ * Resets the border radius block support attributes. This can be used when
+ * disabling the border radius support controls for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBorderRadius( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+	setAttributes( { style: removeBorderAttribute( style, 'radius' ) } );
+}

package/src/hooks/border-style.js

@@ -3,6 +3,7 @@
  */
 import BorderStyleControl from '../components/border-style-control';
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control for configuring border style property.
@@ -36,3 +37,28 @@ export const BorderStyleEdit = ( props ) => {
 		/>
 	);
 };
+
+/**
+ * Checks if there is a current value in the border style block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a border style value set.
+ */
+export function hasBorderStyleValue( props ) {
+	return !! props.attributes.style?.border?.style;
+}
+
+/**
+ * Resets the border style block support attribute. This can be used when
+ * disabling the border style support control for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBorderStyle( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+	setAttributes( { style: removeBorderAttribute( style, 'style' ) } );
+}

package/src/hooks/border-width.js

@@ -5,13 +5,14 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 import useSetting from '../components/use-setting';
 
 const MIN_BORDER_WIDTH = 0;
@@ -31,25 +32,12 @@ export const BorderWidthEdit = ( props ) => {
 
 	const { width, color: customBorderColor, style: borderStyle } =
 		style?.border || {};
+
+	// Used to temporarily track previous border color & style selections to be
+	// able to restore them when border width changes from zero value.
 	const [ styleSelection, setStyleSelection ] = useState();
 	const [ colorSelection, setColorSelection ] = useState();
-
-	// Temporarily track previous border color & style selections to be able to
-	// restore them when border width changes from zero value.
-	useEffect( () => {
-		if ( borderStyle !== 'none' ) {
-			setStyleSelection( borderStyle );
-		}
-	}, [ borderStyle ] );
-
-	useEffect( () => {
-		if ( borderColor || customBorderColor ) {
-			setColorSelection( {
-				name: !! borderColor ? borderColor : undefined,
-				color: !! customBorderColor ? customBorderColor : undefined,
-			} );
-		}
-	}, [ borderColor, customBorderColor ] );
+	const [ customColorSelection, setCustomColorSelection ] = useState();
 
 	const onChange = ( newWidth ) => {
 		let newStyle = {
@@ -64,28 +52,39 @@ export const BorderWidthEdit = ( props ) => {
 		let borderPaletteColor = borderColor;
 
 		const hasZeroWidth = parseFloat( newWidth ) === 0;
+		const hadPreviousZeroWidth = parseFloat( width ) === 0;
 
 		// Setting the border width explicitly to zero will also set the
 		// border style to `none` and clear border color attributes.
-		if ( hasZeroWidth ) {
+		if ( hasZeroWidth && ! hadPreviousZeroWidth ) {
+			// Before clearing color and style selections, keep track of
+			// the current selections so they can be restored when the width
+			// changes to a non-zero value.
+			setColorSelection( borderColor );
+			setCustomColorSelection( customBorderColor );
+			setStyleSelection( borderStyle );
+
+			// Clear style and color attributes.
 			borderPaletteColor = undefined;
 			newStyle.border.color = undefined;
 			newStyle.border.style = 'none';
 		}
 
-		// Restore previous border style selection if width is now not zero and
-		// border style was 'none'. This is to support changes to the UI which
-		// change the border style UI to a segmented control without a "none"
-		// option.
-		if ( ! hasZeroWidth && borderStyle === 'none' ) {
-			newStyle.border.style = styleSelection;
-		}
-
-		// Restore previous border color selection if width is no longer zero
-		// and current border color is undefined.
-		if ( ! hasZeroWidth && borderColor === undefined ) {
-			borderPaletteColor = colorSelection?.name;
-			newStyle.border.color = colorSelection?.color;
+		if ( ! hasZeroWidth && hadPreviousZeroWidth ) {
+			// Restore previous border style selection if width is now not zero and
+			// border style was 'none'. This is to support changes to the UI which
+			// change the border style UI to a segmented control without a "none"
+			// option.
+			if ( borderStyle === 'none' ) {
+				newStyle.border.style = styleSelection;
+			}
+
+			// Restore previous border color selection if width is no longer zero
+			// and current border color is undefined.
+			if ( borderColor === undefined ) {
+				borderPaletteColor = colorSelection;
+				newStyle.border.color = customColorSelection;
+			}
 		}
 
 		// If width was reset, clean out undefined styles.
@@ -113,3 +112,28 @@ export const BorderWidthEdit = ( props ) => {
 		/>
 	);
 };
+
+/**
+ * Checks if there is a current value in the border width block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a border width value set.
+ */
+export function hasBorderWidthValue( props ) {
+	return !! props.attributes.style?.border?.width;
+}
+
+/**
+ * Resets the border width block support attribute. This can be used when
+ * disabling the border width support control for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBorderWidth( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+	setAttributes( { style: removeBorderAttribute( style, 'width' ) } );
+}