diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 8cf1b97045367b..ecbdfb029ffa9b 100644
--- a/packages/base-styles/_mixins.scss
+++ b/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;
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 02f5497560a9d6..48fbbeb820d184 100644
--- a/packages/block-library/src/button/edit.js
+++ b/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 ]
);
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 49f3149b6cde08..4bc6ca81bbdb38 100644
--- a/packages/block-library/src/table/edit.js
+++ b/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',
+ },
+ } );
}
/**
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 39137c6c132a7a..06f3f9a84d5c6d 100644
--- a/packages/components/src/unit-control/index.js
+++ b/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 );
diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
index c6b0431c968474..f78abf47781c62 100644
--- a/packages/components/src/unit-control/test/index.js
+++ b/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(
+
+ );
+
+ const select = testContainer.querySelector( 'select' );
+
+ expect( select.value ).toBe( '%' );
+
+ rerender( );
+
+ expect( select.value ).toBe( 'em' );
+ } );
} );
} );
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
index e16cd41e709661..0a9b51d8b4f0ef 100644
--- a/packages/dom/src/dom.js
+++ b/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 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'
+ );
}
/**
diff --git a/packages/dom/src/test/dom.js b/packages/dom/src/test/dom.js
index eabb2ed968bd1a..42dc2ae36912e9 100644
--- a/packages/dom/src/test/dom.js
+++ b/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 ) => {
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
index 1ef9b26554eba6..c19896af20ab63 100644
--- a/packages/edit-post/src/components/sidebar/post-schedule/style.scss
+++ b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
@@ -5,7 +5,7 @@
span {
display: block;
- width: 35%;
+ width: 45%;
}
}
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss
index 1597025d088b07..7b6be785146639 100644
--- a/packages/edit-post/src/components/sidebar/post-visibility/style.scss
+++ b/packages/edit-post/src/components/sidebar/post-visibility/style.scss
@@ -4,7 +4,7 @@
span {
display: block;
- width: 35%;
+ width: 45%;
}
}