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%; } }