From c2905392369e6f423fe43ac17285eb77f4a64d52 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Tue, 18 May 2021 02:47:07 -0500 Subject: [PATCH] [RNMobile] Audio & Video block - Autoplay BottomSheet Cell help support (#30885) * added the help behavior to the cell component of the bottomsheet. * Passed the autoplay help prop to ToggleControl. Changed the order. * Added CHANGELOG entry for cell help change.. * Used platform specific help behavior for video block. * Put Audio block's autoplay setting at the top of the panel. * Utilized sizing from SCSS Variables instead of hardcoding values. * Added PR number to the CHANGELOG entry. * added platform specific styling for cellHelpLabel * Made autoplay label consistent across web and mobile. * added help support to cell's accessibility capabilities. * added help support to switch cell accessibility capabilities * utilised cellProps.help instead of help so the props are passed down --- packages/block-library/src/audio/edit.js | 4 +- .../block-library/src/audio/edit.native.js | 3 ++ .../src/video/edit-common-settings.js | 18 ++++---- .../src/mobile/bottom-sheet/cell.native.js | 43 ++++++++++++++++--- .../mobile/bottom-sheet/styles.native.scss | 9 ++++ .../mobile/bottom-sheet/switch-cell.native.js | 42 ++++++++++++------ packages/react-native-editor/CHANGELOG.md | 2 + 7 files changed, 91 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index db14dd6895bbed..c2fe191252a931 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 6596b21517aee1..56b450f867689f 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -179,6 +179,9 @@ function AudioEdit( { label={ __( 'Autoplay' ) } onChange={ toggleAttribute( 'autoplay' ) } checked={ autoplay } + help={ __( + 'Autoplay may cause usability issues for some users.' + ) } /> { preload, } = attributes; - const getAutoplayHelp = useCallback( ( checked ) => { - return checked - ? __( - 'Note: Autoplaying videos may cause usability issues for some visitors.' - ) - : null; - }, [] ); + const autoPlayHelpText = __( + 'Autoplay may cause usability issues for some users.' + ); + const getAutoplayHelp = Platform.select( { + web: useCallback( ( checked ) => { + return checked ? autoPlayHelpText : null; + }, [] ), + native: autoPlayHelpText, + } ); const toggleFactory = useMemo( () => { const toggleAttribute = ( attribute ) => { diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 783063a4ef3dc2..ee5b7d0ace4c45 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'; +const isIOS = Platform.OS === 'ios'; class BottomSheetCell extends Component { constructor( props ) { super( ...arguments ); @@ -119,6 +121,7 @@ class BottomSheetCell extends Component { type, step, borderless, + help, ...valueProps } = this.props; @@ -266,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 ); }; @@ -289,6 +309,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 || {}; @@ -370,6 +394,11 @@ 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..942c39426390c2 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -284,3 +284,12 @@ .flex { flex: 1; } + +.cellHelpLabel { + font-size: $default-font-size; + padding-bottom: $grid-unit-15; +} + +.cellHelpLabelIOS { + padding-bottom: $grid-unit-10; +} 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..b49f03902ddb85 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 */ @@ -18,22 +19,39 @@ export default function BottomSheetSwitchCell( props ) { 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( cellProps.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, + 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, + cellProps.help + ); + }; return (