Backport more fixes to WordPress 5.5 beta2 (#23905)

Co-authored-by: Nik Tsekouras <[email protected]>
Co-authored-by: Miguel Fonseca <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Ella van Durpe <[email protected]>
Co-authored-by: Joen A <[email protected]>
Co-authored-by: Q <[email protected]>
Co-authored-by: Nicolas Brown <[email protected]>

packages/base-styles/_mixins.scss

@@ -361,6 +361,9 @@
 		margin: 8px 0 0 8px;
 		background-color: $white;
 
+		// This border serves as a background color in Windows High Contrast mode.
+		border: 3px solid $white;
+
 		@include break-medium() {
 			width: 6px;
 			height: 6px;

packages/block-library/src/button/edit.js

@@ -41,9 +41,14 @@ const MAX_BORDER_RADIUS_VALUE = 50;
 const INITIAL_BORDER_RADIUS_POSITION = 5;
 
 function BorderPanel( { borderRadius = '', setAttributes } ) {
+	const initialBorderRadius = borderRadius;
 	const setBorderRadius = useCallback(
 		( newBorderRadius ) => {
-			setAttributes( { borderRadius: newBorderRadius } );
+			if ( newBorderRadius === undefined )
+				setAttributes( {
+					borderRadius: initialBorderRadius,
+				} );
+			else setAttributes( { borderRadius: newBorderRadius } );
 		},
 		[ setAttributes ]
 	);

packages/block-library/src/table/edit.js

@@ -291,14 +291,23 @@ export class TableEdit extends Component {
 
 		const { attributes, setAttributes } = this.props;
 		const { sectionName, rowIndex } = selectedCell;
+		const newRowIndex = rowIndex + delta;
 
-		this.setState( { selectedCell: null } );
 		setAttributes(
 			insertRow( attributes, {
 				sectionName,
-				rowIndex: rowIndex + delta,
+				rowIndex: newRowIndex,
 			} )
 		);
+		// Select the first cell of the new row
+		this.setState( {
+			selectedCell: {
+				sectionName,
+				rowIndex: newRowIndex,
+				columnIndex: 0,
+				type: 'cell',
+			},
+		} );
 	}
 
 	/**
@@ -346,13 +355,21 @@ export class TableEdit extends Component {
 
 		const { attributes, setAttributes } = this.props;
 		const { columnIndex } = selectedCell;
+		const newColumnIndex = columnIndex + delta;
 
-		this.setState( { selectedCell: null } );
 		setAttributes(
 			insertColumn( attributes, {
-				columnIndex: columnIndex + delta,
+				columnIndex: newColumnIndex,
 			} )
 		);
+		// Select the first cell of the new column
+		this.setState( {
+			selectedCell: {
+				rowIndex: 0,
+				columnIndex: newColumnIndex,
+				type: 'cell',
+			},
+		} );
 	}
 
 	/**

packages/components/src/unit-control/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +19,7 @@ import {
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
+import { useControlledState } from '../utils/hooks';
 
 function UnitControl(
 	{
@@ -43,7 +44,9 @@ function UnitControl(
 	ref
 ) {
 	const [ value, initialUnit ] = getParsedValue( valueProp, unitProp, units );
-	const [ unit, setUnit ] = useState( initialUnit );
+	const [ unit, setUnit ] = useControlledState( unitProp, {
+		initial: initialUnit,
+	} );
 
 	const classes = classnames( 'components-unit-control', className );
 

packages/components/src/unit-control/test/index.js

@@ -3,6 +3,7 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
+import { render as testRender } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -372,5 +373,19 @@ describe( 'UnitControl', () => {
 
 			expect( state ).toBe( '123rem' );
 		} );
+
+		it( 'should update unit after initial render and with new unit prop', () => {
+			const { container: testContainer, rerender } = testRender(
+				<UnitControl value={ '10%' } />
+			);
+
+			const select = testContainer.querySelector( 'select' );
+
+			expect( select.value ).toBe( '%' );
+
+			rerender( <UnitControl value={ state } unit="em" /> );
+
+			expect( select.value ).toBe( 'em' );
+		} );
 	} );
 } );

packages/dom/src/dom.js

@@ -448,25 +448,24 @@ export function placeCaretAtVerticalEdge(
  * @return {boolean} True if the element is an text field, false if not.
  */
 export function isTextField( element ) {
-	try {
-		const { nodeName, selectionStart, contentEditable } = element;
-
-		return (
-			( nodeName === 'INPUT' && selectionStart !== null ) ||
-			nodeName === 'TEXTAREA' ||
-			contentEditable === 'true'
-		);
-	} catch ( error ) {
-		// Safari throws an exception when trying to get `selectionStart`
-		// on non-text <input> elements (which, understandably, don't
-		// have the text selection API). We catch this via a try/catch
-		// block, as opposed to a more explicit check of the element's
-		// input types, because of Safari's non-standard behavior. This
-		// also means we don't have to worry about the list of input
-		// types that support `selectionStart` changing as the HTML spec
-		// evolves over time.
-		return false;
-	}
+	const { nodeName, contentEditable } = element;
+	const nonTextInputs = [
+		'button',
+		'checkbox',
+		'hidden',
+		'file',
+		'radio',
+		'image',
+		'range',
+		'reset',
+		'submit',
+		'number',
+	];
+	return (
+		( nodeName === 'INPUT' && ! nonTextInputs.includes( element.type ) ) ||
+		nodeName === 'TEXTAREA' ||
+		contentEditable === 'true'
+	);
 }
 
 /**

packages/dom/src/test/dom.js

@@ -107,9 +107,12 @@ describe( 'DOM', () => {
 		const NON_TEXT_INPUT_TYPES = [
 			'button',
 			'checkbox',
-			'image',
 			'hidden',
+			'file',
 			'radio',
+			'image',
+			'range',
+			'reset',
 			'submit',
 		];
 
@@ -118,7 +121,13 @@ describe( 'DOM', () => {
 		 *
 		 * @type {string[]}
 		 */
-		const TEXT_INPUT_TYPES = [ 'text', 'password', 'search', 'url' ];
+		const TEXT_INPUT_TYPES = [
+			'text',
+			'password',
+			'search',
+			'url',
+			'email',
+		];
 
 		it( 'should return false for non-text input elements', () => {
 			NON_TEXT_INPUT_TYPES.forEach( ( type ) => {

packages/edit-post/src/components/sidebar/post-schedule/style.scss

@@ -5,7 +5,7 @@
 
 	span {
 		display: block;
-		width: 35%;
+		width: 45%;
 	}
 }
 

packages/edit-post/src/components/sidebar/post-visibility/style.scss

@@ -4,7 +4,7 @@
 
 	span {
 		display: block;
-		width: 35%;
+		width: 45%;
 	}
 }