From 710b891d820664e8b272bc7b7e56418652cd174c Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Thu, 15 Apr 2021 18:43:51 -0500 Subject: [PATCH 01/12] added the help behavior to the cell component of the bottomsheet. --- .../components/src/mobile/bottom-sheet/cell.native.js | 11 +++++++++++ .../src/mobile/bottom-sheet/styles.native.scss | 5 +++++ 2 files changed, 16 insertions(+) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index adf40c4d818815..698ce69ce220aa 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -113,6 +113,7 @@ class BottomSheetCell extends Component { type, step, borderless, + help, ...valueProps } = this.props; @@ -356,6 +357,16 @@ class BottomSheetCell extends Component { { showValue && getValueComponent() } { children } + { help && ( + + { help } + + ) } { ! drawTopSeparator && } ); diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index e17161621b60b3..71683a45ecd6ce 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -284,3 +284,8 @@ .flex { flex: 1; } + +.cellHelpLabel { + font-size: 14px; + padding-bottom: 8px; +} From b23e8ddb2b5fd5ac39960589255d244db475b4aa Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Thu, 15 Apr 2021 18:45:18 -0500 Subject: [PATCH 02/12] Passed the autoplay help prop to ToggleControl. Changed the order. --- packages/block-library/src/audio/edit.native.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index cd80c1e172e7cf..e52f5fa5332c2a 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -166,11 +166,6 @@ function AudioEdit( { - + Date: Thu, 15 Apr 2021 19:08:33 -0500 Subject: [PATCH 03/12] Added CHANGELOG entry for cell help change.. --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 04ee026e69469d..b71e4c4dfaae5f 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [*] Image block: Improve text entry for long alt text. [#29670] +- The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. ## 1.50.0 From 47e14a40bd197ebd811fde37dd7707c6292b885d Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Thu, 15 Apr 2021 19:48:31 -0500 Subject: [PATCH 04/12] Used platform specific help behavior for video block. --- .../src/video/edit-common-settings.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js index ce4601af2e06d2..2f923953a3823c 100644 --- a/packages/block-library/src/video/edit-common-settings.js +++ b/packages/block-library/src/video/edit-common-settings.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { ToggleControl, SelectControl } from '@wordpress/components'; -import { useMemo, useCallback } from '@wordpress/element'; +import { useMemo, useCallback, Platform } from '@wordpress/element'; const options = [ { value: 'auto', label: __( 'Auto' ) }, @@ -21,13 +21,15 @@ const VideoSettings = ( { setAttributes, attributes } ) => { preload, } = attributes; - const getAutoplayHelp = useCallback( ( checked ) => { - return checked - ? __( - 'Note: Autoplaying videos may cause usability issues for some visitors.' - ) - : null; - }, [] ); + const autoPlayHelpText = __( + 'Note: Autoplaying videos may cause usability issues for some visitors.' + ); + const getAutoplayHelp = Platform.select( { + web: useCallback( ( checked ) => { + return checked ? autoPlayHelpText : null; + }, [] ), + native: autoPlayHelpText, + } ); const toggleFactory = useMemo( () => { const toggleAttribute = ( attribute ) => { From de6a0bfc61af4f052260530d2921820318c7422d Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Thu, 15 Apr 2021 19:58:45 -0500 Subject: [PATCH 05/12] Put Audio block's autoplay setting at the top of the panel. --- packages/block-library/src/audio/edit.native.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index e52f5fa5332c2a..2b358b69095f6b 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -166,6 +166,14 @@ function AudioEdit( { + - Date: Thu, 15 Apr 2021 20:04:31 -0500 Subject: [PATCH 06/12] Utilized sizing from SCSS Variables instead of hardcoding values. --- .../components/src/mobile/bottom-sheet/styles.native.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 71683a45ecd6ce..5d8370d03cc385 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -286,6 +286,6 @@ } .cellHelpLabel { - font-size: 14px; - padding-bottom: 8px; + font-size: $default-font-size; + padding-bottom: $grid-unit-10; } From 88918004d15dd6dbc0572cdf927ba621d183a51b Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Thu, 15 Apr 2021 21:10:51 -0500 Subject: [PATCH 07/12] Added PR number to the CHANGELOG entry. --- packages/react-native-editor/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index b71e4c4dfaae5f..6144dfd6928537 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -12,7 +12,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [*] Image block: Improve text entry for long alt text. [#29670] -- The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. +- The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. [#30885] ## 1.50.0 From 330f50935f0ae8ddcf6bca135ce8ae76da9d1b32 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Mon, 19 Apr 2021 17:41:22 -0500 Subject: [PATCH 08/12] added platform specific styling for cellHelpLabel --- .../src/mobile/bottom-sheet/cell.native.js | 13 +++++++------ .../src/mobile/bottom-sheet/styles.native.scss | 4 ++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 698ce69ce220aa..c329bae97ce791 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -8,6 +8,7 @@ import { TextInput, I18nManager, AccessibilityInfo, + Platform, } from 'react-native'; import { isEmpty, get } from 'lodash'; @@ -27,6 +28,7 @@ import styles from './styles.scss'; import platformStyles from './cellStyles.scss'; import TouchableRipple from './ripple.native.js'; +const isIOS = Platform.OS === 'ios'; class BottomSheetCell extends Component { constructor( props ) { super( ...arguments ); @@ -276,6 +278,10 @@ class BottomSheetCell extends Component { styles.resetButton, styles.resetButtonDark ); + const cellHelpStyle = [ + styles.cellHelpLabel, + isIOS && styles.cellHelpLabelIOS, + ]; const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto'; const { title, handler } = customActionButton || {}; @@ -358,12 +364,7 @@ class BottomSheetCell extends Component { { children } { help && ( - + { help } ) } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 5d8370d03cc385..942c39426390c2 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -287,5 +287,9 @@ .cellHelpLabel { font-size: $default-font-size; + padding-bottom: $grid-unit-15; +} + +.cellHelpLabelIOS { padding-bottom: $grid-unit-10; } From 29b43930bca478888bcb2a378e2dab48d72e9542 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Mon, 19 Apr 2021 21:54:40 -0500 Subject: [PATCH 09/12] Made autoplay label consistent across web and mobile. --- packages/block-library/src/audio/edit.js | 4 +--- packages/block-library/src/audio/edit.native.js | 2 +- packages/block-library/src/video/edit-common-settings.js | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index 425c5ef808b731..aad98e243c4368 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -97,9 +97,7 @@ function AudioEdit( { function getAutoplayHelp( checked ) { return checked - ? __( - 'Note: Autoplaying audio may cause usability issues for some visitors.' - ) + ? __( 'Autoplay may cause usability issues for some users.' ) : null; } diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 2b358b69095f6b..005bdd6db0e03a 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -171,7 +171,7 @@ function AudioEdit( { onChange={ toggleAttribute( 'autoplay' ) } checked={ autoplay } help={ __( - 'Note: Autoplaying audio may cause usability issues for some visitors.' + 'Autoplay may cause usability issues for some users.' ) } /> { } = attributes; const autoPlayHelpText = __( - 'Note: Autoplaying videos may cause usability issues for some visitors.' + 'Autoplay may cause usability issues for some users.' ); const getAutoplayHelp = Platform.select( { web: useCallback( ( checked ) => { From 0b4931b2dec8b3ba9a0f4376174eec60f5145062 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Tue, 11 May 2021 19:19:52 -0500 Subject: [PATCH 10/12] added help support to cell's accessibility capabilities. --- .../src/mobile/bottom-sheet/cell.native.js | 31 ++++++++++++++----- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index a8181c2dd2af4a..ee5b7d0ace4c45 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -269,18 +269,35 @@ class BottomSheetCell extends Component { if ( accessibilityLabel || ! showValue ) { return accessibilityLabel || label; } - return isEmpty( value ) + + if ( isEmpty( value ) ) { + return isEmpty( help ) + ? sprintf( + /* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */ + _x( '%s. Empty', 'inline textinput cell' ), + label + ) + : // Separating by ',' is necessary to make a pause on urls (non-capitalized text) + sprintf( + /* translators: accessibility text. Empty state of a inline textinput cell. %1: Cell title, %2: cell help. */ + _x( '%1$s, %2$s. Empty', 'inline textinput cell' ), + label, + help + ); + } + return isEmpty( help ) ? sprintf( - /* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */ - _x( '%s. Empty', 'inline textinput cell' ), - label - ) - : // Separating by ',' is necessary to make a pause on urls (non-capitalized text) - sprintf( /* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */ _x( '%1$s, %2$s', 'inline textinput cell' ), label, value + ) // Separating by ',' is necessary to make a pause on urls (non-capitalized text) + : sprintf( + /* translators: accessibility text. Inline textinput title, value and help text.%1: Cell title, %2: cell value, , %3: cell help. */ + _x( '%1$s, %2$s, %3$s', 'inline textinput cell' ), + label, + value, + help ); }; From 67ce0aa75a45c4c8289a92731fb36fe9dc357658 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Tue, 11 May 2021 19:20:31 -0500 Subject: [PATCH 11/12] added help support to switch cell accessibility capabilities --- .../mobile/bottom-sheet/switch-cell.native.js | 44 +++++++++++++------ 1 file changed, 31 insertions(+), 13 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js index 82001188e35999..21aa8846b9e47b 100644 --- a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { Switch } from 'react-native'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies */ @@ -12,28 +13,45 @@ import { __, _x, sprintf } from '@wordpress/i18n'; import Cell from './cell'; export default function BottomSheetSwitchCell( props ) { - const { value, onValueChange, ...cellProps } = props; + const { value, onValueChange, help, ...cellProps } = props; const onPress = () => { onValueChange( ! value ); }; - const accessibilityLabel = value - ? sprintf( - /* translators: accessibility text. Switch setting ON state. %s: Switch title. */ - _x( '%s. On', 'switch control' ), - cellProps.label - ) - : sprintf( - /* translators: accessibility text. Switch setting OFF state. %s: Switch title. */ - _x( '%s. Off', 'switch control' ), - cellProps.label - ); + const getAccessibilityLabel = () => { + if ( isEmpty( help ) ) { + return value + ? sprintf( + /* translators: accessibility text. Switch setting ON state. %s: Switch title. */ + _x( '%s. On', 'switch control' ), + cellProps.label + ) + : sprintf( + /* translators: accessibility text. Switch setting OFF state. %s: Switch title. */ + _x( '%s. Off', 'switch control' ), + cellProps.label + ); + } + return value + ? sprintf( + /* translators: accessibility text. Switch setting ON state. %1: Switch title, %2: switch help. */ + _x( '%1$s, %2$s. On', 'switch control' ), + cellProps.label, + help + ) + : sprintf( + /* translators: accessibility text. Switch setting OFF state. %1: Switch title, %2: switch help. */ + _x( '%1$s, %2$s. Off', 'switch control' ), + cellProps.label, + help + ); + }; return ( Date: Tue, 11 May 2021 20:19:20 -0500 Subject: [PATCH 12/12] utilised cellProps.help instead of help so the props are passed down --- .../src/mobile/bottom-sheet/switch-cell.native.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js index 21aa8846b9e47b..b49f03902ddb85 100644 --- a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js @@ -13,14 +13,14 @@ import { __, _x, sprintf } from '@wordpress/i18n'; import Cell from './cell'; export default function BottomSheetSwitchCell( props ) { - const { value, onValueChange, help, ...cellProps } = props; + const { value, onValueChange, ...cellProps } = props; const onPress = () => { onValueChange( ! value ); }; const getAccessibilityLabel = () => { - if ( isEmpty( help ) ) { + if ( isEmpty( cellProps.help ) ) { return value ? sprintf( /* translators: accessibility text. Switch setting ON state. %s: Switch title. */ @@ -38,13 +38,13 @@ export default function BottomSheetSwitchCell( props ) { /* translators: accessibility text. Switch setting ON state. %1: Switch title, %2: switch help. */ _x( '%1$s, %2$s. On', 'switch control' ), cellProps.label, - help + cellProps.help ) : sprintf( /* translators: accessibility text. Switch setting OFF state. %1: Switch title, %2: switch help. */ _x( '%1$s, %2$s. Off', 'switch control' ), cellProps.label, - help + cellProps.help ); };