From 44131df84a0d773f6dda429839ddc3921bd372d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <4710635+ellatrix@users.noreply.github.com> Date: Tue, 19 Jul 2022 17:19:40 +0200 Subject: [PATCH 001/104] Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection (#42530) --- .../block-tools/block-selection-button.js | 5 ----- .../src/components/block-tools/index.js | 5 ++++- .../components/writing-flow/use-tab-nav.js | 2 +- packages/components/src/popover/index.js | 22 +++++++++++-------- .../various/multi-block-selection.test.js | 5 ++--- 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js index 7ed09d31cd7ea8..9dfb7ce9772abb 100644 --- a/packages/block-editor/src/components/block-tools/block-selection-button.js +++ b/packages/block-editor/src/components/block-tools/block-selection-button.js @@ -102,7 +102,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) { getMultiSelectedBlocksEndClientId, getPreviousBlockClientId, getNextBlockClientId, - isNavigationMode, } = useSelect( blockEditorStore ); const { selectBlock, @@ -160,10 +159,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) { selectedBlockClientId; } const startingBlockClientId = hasBlockMovingClientId(); - if ( isEscape && isNavigationMode() ) { - clearSelectedBlock(); - event.preventDefault(); - } if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) { setBlockMovingClientId( null ); event.preventDefault(); diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index 58f9f714c0af37..cf03e19083ebdd 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -53,6 +53,8 @@ export default function BlockTools( { } = useDispatch( blockEditorStore ); function onKeyDown( event ) { + if ( event.defaultPrevented ) return; + if ( isMatch( 'core/block-editor/move-up', event ) ) { const clientIds = getSelectedBlockClientIds(); if ( clientIds.length ) { @@ -93,12 +95,13 @@ export default function BlockTools( { } } else if ( isMatch( 'core/block-editor/unselect', event ) ) { const clientIds = getSelectedBlockClientIds(); - if ( clientIds.length > 1 ) { + if ( clientIds.length ) { event.preventDefault(); clearSelectedBlock(); event.target.ownerDocument.defaultView .getSelection() .removeAllRanges(); + __unstableContentRef?.current.focus(); } } } diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js index 54cc49e7615f35..fccc9132bf98e5 100644 --- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js +++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js @@ -75,7 +75,7 @@ export default function useTabNav() { return; } - if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) { + if ( event.keyCode === ESCAPE ) { event.preventDefault(); setNavigationMode( true ); return; diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index e93442a70f1b20..c7f8428b00f557 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -210,15 +210,19 @@ const Popover = ( const slotName = useContext( slotNameContext ) || __unstableSlotName; const slot = useSlot( slotName ); - const onDialogClose = ( type, event ) => { - // Ideally the popover should have just a single onClose prop and - // not three props that potentially do the same thing. - if ( type === 'focus-outside' && onFocusOutside ) { - onFocusOutside( event ); - } else if ( onClose ) { - onClose(); - } - }; + let onDialogClose; + + if ( onClose || onFocusOutside ) { + onDialogClose = ( type, event ) => { + // Ideally the popover should have just a single onClose prop and + // not three props that potentially do the same thing. + if ( type === 'focus-outside' && onFocusOutside ) { + onFocusOutside( event ); + } else if ( onClose ) { + onClose(); + } + }; + } const [ dialogRef, dialogProps ] = useDialog( { focusOnMount, diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js index c9d633a521a4da..2d1360e9b46335 100644 --- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js +++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js @@ -718,9 +718,8 @@ describe( 'Multi-block selection', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); // Clear the selected block. - const paragraph = await page.$( '[data-type="core/paragraph"]' ); - const box = await paragraph.boundingBox(); - await page.mouse.click( box.x - 1, box.y ); + await page.keyboard.press( 'Escape' ); + await page.keyboard.press( 'Escape' ); await pressKeyWithModifier( 'primary', 'a' ); From c92be64e9af6df41c07805a55f07540ac374c484 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Tue, 19 Jul 2022 11:24:10 -0400 Subject: [PATCH 002/104] fix: Workaround Android 12 webview crash (#42517) * fix: Workaround Android 12 webview crash A crash occurred due to combining webviews with Android 12's new scroll overflow behavior. Applying `opacity: 0.99` prevents the crash from occurring. This change should be viewed as a temporary fix while we await a more appropriate solution for the `react-native-webview` library. https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253 * docs: Add change log entry --- packages/components/src/sandbox/index.native.js | 15 ++++++++++++++- packages/react-native-editor/CHANGELOG.md | 1 + 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js index 844997779e3e6a..df5f0138fb95f8 100644 --- a/packages/components/src/sandbox/index.native.js +++ b/packages/components/src/sandbox/index.native.js @@ -1,13 +1,14 @@ /** * External dependencies */ -import { Dimensions, Platform } from 'react-native'; +import { Dimensions, StyleSheet } from 'react-native'; import { WebView } from 'react-native-webview'; /** * WordPress dependencies */ import { + Platform, renderToString, memo, useRef, @@ -307,6 +308,7 @@ function Sandbox( { style={ [ sandboxStyles[ 'sandbox-webview__content' ], getSizeStyle(), + Platform.isAndroid && workaroundStyles.webView, ] } onMessage={ checkMessageForResize } scrollEnabled={ false } @@ -317,4 +319,15 @@ function Sandbox( { ); } +const workaroundStyles = StyleSheet.create( { + webView: { + /** + * The slight opacity below is a workaround for an Android crash caused from combining Android + * 12's new scroll overflow behavior and webviews. + * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253 + */ + opacity: 0.99, + }, +} ); + export default memo( Sandbox ); diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index bb401e0ec9984a..11d2ed3a45c172 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label to i - [*] Add React Native FastImage [#42009] - [*] Block inserter displays block collections [#42405] +- [**] Fix a crash when scrolling posts containing Embed blocks (Android 12 only) [#42514] ## 1.79.0 - [*] Add 'Insert from URL' option to Video block [#41493] From ca9ece20cd7a4c954845034f18a505a10e745025 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 20 Jul 2022 01:26:07 +0900 Subject: [PATCH 003/104] CustomSelectControl: Use styles from SelectControl (#42460) * CustomSelectControl: Use styles from SelectControl * Add flag for width back-compat * Add changelog --- packages/components/CHANGELOG.md | 5 +- .../src/custom-select-control/index.js | 70 ++++++++++++------- .../custom-select-control/stories/index.js | 9 ++- .../src/custom-select-control/style.scss | 33 ++------- 4 files changed, 59 insertions(+), 58 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5845aba6df6a77..9a37d3f95fd0da 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,8 +2,9 @@ ## Unreleased -## Bug Fix +### Bug Fix +- `CustomSelectControl`: Fix font size and hover/focus style inconsistencies with `SelectControl` ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)). - `AnglePickerControl`: Fix gap between elements in RTL mode ([#42534](https://github.com/WordPress/gutenberg/pull/42534)). ### Enhancements @@ -12,6 +13,8 @@ - `BaseControl`: Set zero padding on `StyledLabel` to ensure cross-browser styling ([#42348](https://github.com/WordPress/gutenberg/pull/42348/)). - `SelectControl`: Add flag for larger default size ([#42456](https://github.com/WordPress/gutenberg/pull/42456/)). - `UnitControl`: Update unit select's focus styles to match input's ([#42383](https://github.com/WordPress/gutenberg/pull/42383)). +- `CustomSelectControl`: Add size variants ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)). +- `CustomSelectControl`: Add flag to opt in to unconstrained width ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)). ### Internal diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 3e5904268857a4..c830e6bea999a0 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -9,12 +9,14 @@ import classnames from 'classnames'; */ import { Icon, check, chevronDown } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useState } from '@wordpress/element'; /** * Internal dependencies */ -import { Button, VisuallyHidden } from '../'; +import { VisuallyHidden } from '../'; +import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles'; +import InputBase from '../input-control/input-base'; const itemToString = ( item ) => item?.name; // This is needed so that in Windows, where @@ -58,12 +60,16 @@ const stateReducer = ( export default function CustomSelectControl( { /** Start opting into the larger default height that will become the default size in a future version. */ __next36pxDefaultSize = false, + /** Start opting into the unconstrained width that will become the default in a future version. */ + __nextUnconstrainedWidth = false, className, hideLabelFromVision, label, describedBy, options: items, onChange: onSelectedItemChange, + /** @type {import('../select-control/types').SelectControlProps.size} */ + size = 'default', value: _selectedItem, } ) { const { @@ -85,6 +91,8 @@ export default function CustomSelectControl( { stateReducer, } ); + const [ isFocused, setIsFocused ] = useState( false ); + function getDescribedBy() { if ( describedBy ) { return describedBy; @@ -138,31 +146,41 @@ export default function CustomSelectControl( { { label } ) } - + setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } + selectSize={ size } + __next36pxDefaultSize={ __next36pxDefaultSize } + { ...getToggleButtonProps( { + // This is needed because some speech recognition software don't support `aria-labelledby`. + 'aria-label': label, + 'aria-labelledby': undefined, + className: classnames( + 'components-custom-select-control__button', + { + 'is-next-unconstrained-width': + __nextUnconstrainedWidth, + } + ), + describedBy: getDescribedBy(), + } ) } + > + { itemToString( selectedItem ) } + + + { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }