From a12fa9064f9bb3744de2c1f3a94fbc2a54b5348c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 May 2024 12:05:59 +0100 Subject: [PATCH 01/19] Block Editor: Check for multiple block usage in the block-editor package (#62086) Co-authored-by: youknowriad Co-authored-by: ellatrix --- .../src/components/block-edit/index.js | 15 +- .../block-edit/multiple-usage-warning.js | 46 +++++ .../src/components/block-list/block.js | 18 ++ packages/edit-post/src/hooks/index.js | 4 - .../src/hooks/validate-multiple-use/index.js | 163 ------------------ packages/edit-post/src/index.js | 1 - 6 files changed, 77 insertions(+), 170 deletions(-) create mode 100644 packages/block-editor/src/components/block-edit/multiple-usage-warning.js delete mode 100644 packages/edit-post/src/hooks/index.js delete mode 100644 packages/edit-post/src/hooks/validate-multiple-use/index.js diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index 57df36c7c74a0b..0c29c0e98b1bfd 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -1,9 +1,9 @@ /** * WordPress dependencies */ -import { useMemo } from '@wordpress/element'; - +import { useMemo, useContext } from '@wordpress/element'; import { hasBlockSupport } from '@wordpress/blocks'; + /** * Internal dependencies */ @@ -17,6 +17,8 @@ import { blockBindingsKey, isPreviewModeKey, } from './context'; +import { MultipleUsageWarning } from './multiple-usage-warning'; +import { PrivateBlockContext } from '../block-list/private-block-context'; /** * The `useBlockEditContext` hook provides information about the block this hook is being used in. @@ -49,6 +51,8 @@ export default function BlockEdit( { const layoutSupport = hasBlockSupport( name, 'layout', false ) || hasBlockSupport( name, '__experimentalLayout', false ); + const { originalBlockClientId } = useContext( PrivateBlockContext ); + return ( + { originalBlockClientId && ( + + ) } ); } diff --git a/packages/block-editor/src/components/block-edit/multiple-usage-warning.js b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js new file mode 100644 index 00000000000000..4acd4d1f349dd0 --- /dev/null +++ b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { getBlockType } from '@wordpress/blocks'; +import { Button } from '@wordpress/components'; +import { useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import Warning from '../warning'; + +export function MultipleUsageWarning( { + originalBlockClientId, + name, + onReplace, +} ) { + const { selectBlock } = useDispatch( blockEditorStore ); + const blockType = getBlockType( name ); + + return ( + selectBlock( originalBlockClientId ) } + > + { __( 'Find original' ) } + , + , + ] } + > + { blockType?.title }: + { __( 'This block can only be used once.' ) } + + ); +} diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index cbb1b769b53368..0220a9877eba28 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -23,6 +23,7 @@ import { isUnmodifiedBlock, isReusableBlock, getBlockDefaultClassName, + hasBlockSupport, store as blocksStore, } from '@wordpress/blocks'; import { withFilters } from '@wordpress/components'; @@ -534,6 +535,7 @@ function BlockListBlockProvider( props ) { isFirstMultiSelectedBlock, getMultiSelectedBlockClientIds, hasSelectedInnerBlock, + getBlocksByName, getBlockIndex, isBlockMultiSelected, @@ -607,6 +609,17 @@ function BlockListBlockProvider( props ) { const movingClientId = hasBlockMovingClientId(); const blockEditingMode = getBlockEditingMode( clientId ); + const multiple = hasBlockSupport( blockName, 'multiple', true ); + + // For block types with `multiple` support, there is no "original + // block" to be found in the content, as the block itself is valid. + const blocksWithSameName = multiple + ? [] + : getBlocksByName( blockName ); + const isInvalid = + blocksWithSameName.length && + blocksWithSameName[ 0 ] !== clientId; + return { ...previewContext, mode: getBlockMode( clientId ), @@ -664,6 +677,9 @@ function BlockListBlockProvider( props ) { hasEditableOutline: blockEditingMode !== 'disabled' && getBlockEditingMode( rootClientId ) === 'disabled', + originalBlockClientId: isInvalid + ? blocksWithSameName[ 0 ] + : false, }; }, [ clientId, rootClientId ] @@ -707,6 +723,7 @@ function BlockListBlockProvider( props ) { hasEditableOutline, className, defaultClassName, + originalBlockClientId, } = selectedProps; // Users of the editor.BlockListBlock filter used to be able to @@ -754,6 +771,7 @@ function BlockListBlockProvider( props ) { defaultClassName, mayDisplayControls, mayDisplayParentControls, + originalBlockClientId, themeSupportsLayout, }; diff --git a/packages/edit-post/src/hooks/index.js b/packages/edit-post/src/hooks/index.js deleted file mode 100644 index 0397f1fee936c3..00000000000000 --- a/packages/edit-post/src/hooks/index.js +++ /dev/null @@ -1,4 +0,0 @@ -/** - * Internal dependencies - */ -import './validate-multiple-use'; diff --git a/packages/edit-post/src/hooks/validate-multiple-use/index.js b/packages/edit-post/src/hooks/validate-multiple-use/index.js deleted file mode 100644 index bf771f45220362..00000000000000 --- a/packages/edit-post/src/hooks/validate-multiple-use/index.js +++ /dev/null @@ -1,163 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createBlock, - findTransform, - getBlockTransforms, - getBlockType, - hasBlockSupport, -} from '@wordpress/blocks'; -import { Button } from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { Warning, store as blockEditorStore } from '@wordpress/block-editor'; -import { addFilter } from '@wordpress/hooks'; -import { __ } from '@wordpress/i18n'; -import { compose, createHigherOrderComponent } from '@wordpress/compose'; - -/** - * Recursively find very first block of an specific block type. - * - * @param {Object[]} blocks List of blocks. - * @param {string} name Block name to search. - * - * @return {Object|undefined} Return block object or undefined. - */ -function findFirstOfSameType( blocks, name ) { - if ( ! Array.isArray( blocks ) || ! blocks.length ) { - return; - } - - for ( const block of blocks ) { - if ( block.name === name ) { - return block; - } - - // Search inside innerBlocks. - const firstBlock = findFirstOfSameType( block.innerBlocks, name ); - - if ( firstBlock ) { - return firstBlock; - } - } -} - -const enhance = compose( - /** - * For blocks whose block type doesn't support `multiple`, provides the - * wrapped component with `originalBlockClientId` -- a reference to the - * first block of the same type in the content -- if and only if that - * "original" block is not the current one. Thus, an inexisting - * `originalBlockClientId` prop signals that the block is valid. - * - * @param {Component} WrappedBlockEdit A filtered BlockEdit instance. - * - * @return {Component} Enhanced component with merged state data props. - */ - withSelect( ( select, block ) => { - const multiple = hasBlockSupport( block.name, 'multiple', true ); - - // For block types with `multiple` support, there is no "original - // block" to be found in the content, as the block itself is valid. - if ( multiple ) { - return {}; - } - - // Otherwise, only pass `originalBlockClientId` if it refers to a different - // block from the current one. - const blocks = select( blockEditorStore ).getBlocks(); - const firstOfSameType = findFirstOfSameType( blocks, block.name ); - const isInvalid = - firstOfSameType && firstOfSameType.clientId !== block.clientId; - return { - originalBlockClientId: isInvalid && firstOfSameType.clientId, - }; - } ), - withDispatch( ( dispatch, { originalBlockClientId } ) => ( { - selectFirst: () => - dispatch( blockEditorStore ).selectBlock( originalBlockClientId ), - } ) ) -); - -const withMultipleValidation = createHigherOrderComponent( ( BlockEdit ) => { - return enhance( ( { originalBlockClientId, selectFirst, ...props } ) => { - if ( ! originalBlockClientId ) { - return ; - } - - const blockType = getBlockType( props.name ); - const outboundType = getOutboundType( props.name ); - - return [ -
- -
, - - { __( 'Find original' ) } - , - , - outboundType && ( - - ), - ] } - > - { blockType?.title }: - { __( 'This block can only be used once.' ) } - , - ]; - } ); -}, 'withMultipleValidation' ); - -/** - * Given a base block name, returns the default block type to which to offer - * transforms. - * - * @param {string} blockName Base block name. - * - * @return {?Object} The chosen default block type. - */ -function getOutboundType( blockName ) { - // Grab the first outbound transform. - const transform = findTransform( - getBlockTransforms( 'to', blockName ), - ( { type, blocks } ) => type === 'block' && blocks.length === 1 // What about when .length > 1? - ); - - if ( ! transform ) { - return null; - } - - return getBlockType( transform.blocks[ 0 ] ); -} - -addFilter( - 'editor.BlockEdit', - 'core/edit-post/validate-multiple-use/with-multiple-validation', - withMultipleValidation -); diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 1e0b3fe7d4d6ff..f19248fa0d51c2 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -19,7 +19,6 @@ import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies */ -import './hooks'; import Editor from './editor'; /** From cb8c8cc02d6e47a9a32845fa15b33581970c047f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Wed, 29 May 2024 13:57:06 +0200 Subject: [PATCH 02/19] Tests: Change how directives processing gets disabled (#62095) Neccessary for the planned changes in WordPress core: https://github.com/WordPress/wordpress-develop/pull/6331. Co-authored-by: gziolo Co-authored-by: cbravobernal --- packages/e2e-tests/plugins/interactive-blocks.php | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php index ab2f85156e3b3e..54bd4325bb29b1 100644 --- a/packages/e2e-tests/plugins/interactive-blocks.php +++ b/packages/e2e-tests/plugins/interactive-blocks.php @@ -29,11 +29,7 @@ function () { // Ensure the interactivity API is loaded. wp_interactivity(); // But remove the server directive processing. - remove_filter( - 'render_block_data', - 'wp_interactivity_process_directives_of_interactive_blocks', - 100 - ); + add_filter( 'interactivity_process_directives', '__return_false' ); } } ); From 96e0de566fbbef9d97aadd7687f45d7fceb35f96 Mon Sep 17 00:00:00 2001 From: Amit Raj <77401999+amitraj2203@users.noreply.github.com> Date: Wed, 29 May 2024 17:30:09 +0530 Subject: [PATCH 03/19] Fix: Adds help props for description of Play Inline toggle (#61310) * Fix: adds help props for description of Play Inline toggle * Update video settings help text * Add translators comment. --------- Co-authored-by: amitraj2203 Co-authored-by: afercia --- packages/block-library/src/video/edit-common-settings.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js index d781fb31b5f3ac..5ebf431ade3fc0 100644 --- a/packages/block-library/src/video/edit-common-settings.js +++ b/packages/block-library/src/video/edit-common-settings.js @@ -74,9 +74,13 @@ const VideoSettings = ( { setAttributes, attributes } ) => { /> Date: Wed, 29 May 2024 13:06:18 +0100 Subject: [PATCH 04/19] Editor: Align the Post Format control design with the rest of the post sidebar controls (#62066) Co-authored-by: youknowriad Co-authored-by: ntsekouras Co-authored-by: jameskoster --- .../src/components/post-author/panel.js | 1 - .../src/components/post-format/index.js | 9 ++- .../src/components/post-format/panel.js | 77 +++++++++++++++++-- .../src/components/post-format/style.scss | 14 +++- .../src/components/sidebar/post-summary.js | 2 +- .../e2e/specs/editor/various/new-post.spec.js | 2 +- 6 files changed, 88 insertions(+), 17 deletions(-) diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js index 908617a86f2900..5c162cfa50377f 100644 --- a/packages/editor/src/components/post-author/panel.js +++ b/packages/editor/src/components/post-author/panel.js @@ -58,7 +58,6 @@ export function PostAuthor() { ( diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js index 2aec930298c204..a61d230a00119d 100644 --- a/packages/editor/src/components/post-format/index.js +++ b/packages/editor/src/components/post-format/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Button, SelectControl } from '@wordpress/components'; +import { Button, RadioControl } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useInstanceId } from '@wordpress/compose'; import { store as coreStore } from '@wordpress/core-data'; @@ -85,16 +85,17 @@ export default function PostFormat() { return (
- onUpdatePostFormat( format ) } id={ postFormatSelectorId } options={ formats.map( ( format ) => ( { label: format.caption, value: format.id, } ) ) } + hideLabelFromVision /> { suggestion && suggestion.id !== postFormat && (

diff --git a/packages/editor/src/components/post-format/panel.js b/packages/editor/src/components/post-format/panel.js index cbd065183eefab..faaf88b785a4b2 100644 --- a/packages/editor/src/components/post-format/panel.js +++ b/packages/editor/src/components/post-format/panel.js @@ -1,20 +1,85 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { Button, Dropdown } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { useState, useMemo } from '@wordpress/element'; +import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor'; /** * Internal dependencies */ -import PostFormatForm from './'; +import { default as PostFormatForm, POST_FORMATS } from './'; import PostFormatCheck from './check'; +import PostPanelRow from '../post-panel-row'; +import { store as editorStore } from '../../store'; -export function PostFormat() { +/** + * Renders the Post Author Panel component. + * + * @return {Component} The component to be rendered. + */ +function PostFormat() { + const { postFormat } = useSelect( ( select ) => { + const { getEditedPostAttribute } = select( editorStore ); + const _postFormat = getEditedPostAttribute( 'format' ); + return { + postFormat: _postFormat ?? 'standard', + }; + }, [] ); + const activeFormat = POST_FORMATS.find( + ( format ) => format.id === postFormat + ); + + // Use internal state instead of a ref to make sure that the component + // re-renders when the popover's anchor updates. + const [ popoverAnchor, setPopoverAnchor ] = useState( null ); + // Memoize popoverProps to avoid returning a new object every time. + const popoverProps = useMemo( + () => ( { + // Anchor the popover to the middle of the entire row so that it doesn't + // move around when the label changes. + anchor: popoverAnchor, + placement: 'left-start', + offset: 36, + shift: true, + } ), + [ popoverAnchor ] + ); return ( - - - + + ( + + ) } + renderContent={ ( { onClose } ) => ( +

+ + +
+ ) } + /> + ); } diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss index 135ee7f3579029..ec3a8b1626b543 100644 --- a/packages/editor/src/components/post-format/style.scss +++ b/packages/editor/src/components/post-format/style.scss @@ -2,8 +2,14 @@ margin: $grid-unit-05 0 0 0; } -.editor-post-format__panel { - display: flex; - flex-direction: column; - align-items: stretch; +.editor-post-format__dialog .editor-post-format__dialog-content { + // sidebar width - popover padding - form margin + min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20; + margin: $grid-unit-10; +} + +.editor-post-format__options { + .components-base-control__field > .components-v-stack { + gap: $grid-unit-15; + } } diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js index ab2f714027e63f..367d3e112478cb 100644 --- a/packages/editor/src/components/sidebar/post-summary.js +++ b/packages/editor/src/components/sidebar/post-summary.js @@ -79,9 +79,9 @@ export default function PostSummary( { onActionPerformed } ) { + - { fills } diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js index b3591db1ec50b9..68d983e91045b7 100644 --- a/test/e2e/specs/editor/various/new-post.spec.js +++ b/test/e2e/specs/editor/various/new-post.spec.js @@ -40,7 +40,7 @@ test.describe( 'new editor state', () => { // Should display the Post Formats UI. await editor.openDocumentSettingsSidebar(); await expect( - page.locator( 'role=combobox[name="Post Format"i]' ) + page.locator( 'role=button[name="Change Format: Standard"i]' ) ).toBeVisible(); } ); From 41b3cb729d4a54d2a531783b56976b656d13cf6d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 May 2024 13:47:08 +0100 Subject: [PATCH 05/19] Editor: Move editor toggle commands to the editor package (#62093) Co-authored-by: youknowriad Co-authored-by: ntsekouras --- .../edit-post/src/commands/use-commands.js | 48 +++++++ .../edit-post/src/components/layout/index.js | 4 +- .../src/hooks/commands/use-common-commands.js | 126 ------------------ .../hooks/commands/use-edit-mode-commands.js | 73 +--------- .../editor/src/components/commands/index.js | 64 ++++++++- 5 files changed, 114 insertions(+), 201 deletions(-) create mode 100644 packages/edit-post/src/commands/use-commands.js delete mode 100644 packages/edit-post/src/hooks/commands/use-common-commands.js diff --git a/packages/edit-post/src/commands/use-commands.js b/packages/edit-post/src/commands/use-commands.js new file mode 100644 index 00000000000000..edd2a6a5b84042 --- /dev/null +++ b/packages/edit-post/src/commands/use-commands.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { fullscreen } from '@wordpress/icons'; +import { useCommand } from '@wordpress/commands'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { store as noticesStore } from '@wordpress/notices'; + +export default function useCommands() { + const { isFullscreen } = useSelect( ( select ) => { + const { get } = select( preferencesStore ); + + return { + isFullscreen: get( 'core/edit-post', 'fullscreenMode' ), + }; + }, [] ); + const { toggle } = useDispatch( preferencesStore ); + const { createInfoNotice } = useDispatch( noticesStore ); + + useCommand( { + name: 'core/toggle-fullscreen-mode', + label: isFullscreen + ? __( 'Exit fullscreen' ) + : __( 'Enter fullscreen' ), + icon: fullscreen, + callback: ( { close } ) => { + toggle( 'core/edit-post', 'fullscreenMode' ); + close(); + createInfoNotice( + isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ), + { + id: 'core/edit-post/toggle-fullscreen-mode/notice', + type: 'snackbar', + actions: [ + { + label: __( 'Undo' ), + onClick: () => { + toggle( 'core/edit-post', 'fullscreenMode' ); + }, + }, + ], + } + ); + }, + } ); +} diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index fde9319a348daf..998e43d971868c 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -47,7 +47,7 @@ import MetaBoxes from '../meta-boxes'; import WelcomeGuide from '../welcome-guide'; import { store as editPostStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import useCommonCommands from '../../hooks/commands/use-common-commands'; +import useEditPostCommands from '../../commands/use-commands'; const { getLayoutStyles } = unlock( blockEditorPrivateApis ); const { useCommands } = unlock( coreCommandsPrivateApis ); @@ -131,7 +131,7 @@ function useEditorStyles() { function Layout( { initialPost } ) { useCommands(); - useCommonCommands(); + useEditPostCommands(); const isMobileViewport = useViewportMatch( 'medium', '<' ); const isWideViewport = useViewportMatch( 'large' ); diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js deleted file mode 100644 index bd2036eb85e748..00000000000000 --- a/packages/edit-post/src/hooks/commands/use-common-commands.js +++ /dev/null @@ -1,126 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { __, isRTL } from '@wordpress/i18n'; -import { - drawerLeft, - drawerRight, - blockDefault, - fullscreen, - formatListBullets, -} from '@wordpress/icons'; -import { useCommand } from '@wordpress/commands'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; -import { store as noticesStore } from '@wordpress/notices'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../store'; -import { unlock } from '../../lock-unlock'; - -const { interfaceStore } = unlock( editorPrivateApis ); - -export default function useCommonCommands() { - const { openGeneralSidebar, closeGeneralSidebar } = - useDispatch( editPostStore ); - const { activeSidebar, isFullscreen, isPublishSidebarEnabled } = useSelect( - ( select ) => { - const { get } = select( preferencesStore ); - - return { - activeSidebar: - select( interfaceStore ).getActiveComplementaryArea( - 'core' - ), - isPublishSidebarEnabled: - select( editorStore ).isPublishSidebarEnabled(), - isFullscreen: get( 'core/edit-post', 'fullscreenMode' ), - }; - }, - [] - ); - const { toggle } = useDispatch( preferencesStore ); - const { createInfoNotice } = useDispatch( noticesStore ); - - useCommand( { - name: 'core/open-settings-sidebar', - label: __( 'Toggle settings sidebar' ), - icon: isRTL() ? drawerLeft : drawerRight, - callback: ( { close } ) => { - close(); - if ( activeSidebar === 'edit-post/document' ) { - closeGeneralSidebar(); - } else { - openGeneralSidebar( 'edit-post/document' ); - } - }, - } ); - - useCommand( { - name: 'core/open-block-inspector', - label: __( 'Toggle block inspector' ), - icon: blockDefault, - callback: ( { close } ) => { - close(); - if ( activeSidebar === 'edit-post/block' ) { - closeGeneralSidebar(); - } else { - openGeneralSidebar( 'edit-post/block' ); - } - }, - } ); - - useCommand( { - name: 'core/toggle-fullscreen-mode', - label: isFullscreen - ? __( 'Exit fullscreen' ) - : __( 'Enter fullscreen' ), - icon: fullscreen, - callback: ( { close } ) => { - toggle( 'core/edit-post', 'fullscreenMode' ); - close(); - createInfoNotice( - isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ), - { - id: 'core/edit-post/toggle-fullscreen-mode/notice', - type: 'snackbar', - actions: [ - { - label: __( 'Undo' ), - onClick: () => { - toggle( 'core/edit-post', 'fullscreenMode' ); - }, - }, - ], - } - ); - }, - } ); - - useCommand( { - name: 'core/toggle-publish-sidebar', - label: isPublishSidebarEnabled - ? __( 'Disable pre-publish checks' ) - : __( 'Enable pre-publish checks' ), - icon: formatListBullets, - callback: ( { close } ) => { - close(); - toggle( 'core', 'isPublishSidebarEnabled' ); - createInfoNotice( - isPublishSidebarEnabled - ? __( 'Pre-publish checks disabled.' ) - : __( 'Pre-publish checks enabled.' ), - { - id: 'core/editor/publish-sidebar/notice', - type: 'snackbar', - } - ); - }, - } ); -} diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index f11a831e0edb04..d0064a947001a2 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -3,23 +3,11 @@ */ import { useSelect, useDispatch } from '@wordpress/data'; import { __, sprintf, isRTL } from '@wordpress/i18n'; -import { - trash, - rotateLeft, - rotateRight, - layout, - page, - drawerLeft, - drawerRight, - blockDefault, -} from '@wordpress/icons'; +import { trash, rotateLeft, rotateRight, layout, page } from '@wordpress/icons'; import { useCommandLoader } from '@wordpress/commands'; import { decodeEntities } from '@wordpress/html-entities'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -32,7 +20,6 @@ import { unlock } from '../../lock-unlock'; import { TEMPLATE_POST_TYPE } from '../../utils/constants'; import { useLink } from '../../components/routes/link'; -const { interfaceStore } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); function usePageContentFocusCommands() { @@ -171,57 +158,6 @@ function useManipulateDocumentCommands() { }; } -function useEditUICommands() { - const { openGeneralSidebar, closeGeneralSidebar } = - useDispatch( editSiteStore ); - const { canvasMode, activeSidebar } = useSelect( ( select ) => { - return { - canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), - activeSidebar: - select( interfaceStore ).getActiveComplementaryArea( 'core' ), - }; - }, [] ); - - if ( canvasMode !== 'edit' ) { - return { isLoading: false, commands: [] }; - } - - const commands = []; - - commands.push( { - name: 'core/open-settings-sidebar', - label: __( 'Toggle settings sidebar' ), - icon: isRTL() ? drawerLeft : drawerRight, - callback: ( { close } ) => { - close(); - if ( activeSidebar === 'edit-post/document' ) { - closeGeneralSidebar(); - } else { - openGeneralSidebar( 'edit-post/document' ); - } - }, - } ); - - commands.push( { - name: 'core/open-block-inspector', - label: __( 'Toggle block inspector' ), - icon: blockDefault, - callback: ( { close } ) => { - close(); - if ( activeSidebar === 'edit-site/block' ) { - closeGeneralSidebar(); - } else { - openGeneralSidebar( 'edit-site/block' ); - } - }, - } ); - - return { - isLoading: false, - commands, - }; -} - export function useEditModeCommands() { useCommandLoader( { name: 'core/edit-site/page-content-focus', @@ -233,9 +169,4 @@ export function useEditModeCommands() { name: 'core/edit-site/manipulate-document', hook: useManipulateDocumentCommands, } ); - - useCommandLoader( { - name: 'core/edit-site/edit-ui', - hook: useEditUICommands, - } ); } diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index bcafbd4691add0..460a595234e59b 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -2,10 +2,14 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { + blockDefault, code, + drawerLeft, + drawerRight, edit, + formatListBullets, listView, external, keyboard, @@ -38,6 +42,7 @@ function useEditorCommandLoader() { isViewable, isCodeEditingEnabled, isRichEditingEnabled, + isPublishSidebarEnabled, } = useSelect( ( select ) => { const { get } = select( preferencesStore ); const { isListViewOpened, getCurrentPostType, getEditorSettings } = @@ -56,8 +61,11 @@ function useEditorCommandLoader() { isViewable: getPostType( getCurrentPostType() )?.viewable ?? false, isCodeEditingEnabled: getEditorSettings().codeEditingEnabled, isRichEditingEnabled: getEditorSettings().richEditingEnabled, + isPublishSidebarEnabled: + select( editorStore ).isPublishSidebarEnabled(), }; }, [] ); + const { getActiveComplementaryArea } = useSelect( interfaceStore ); const { toggle } = useDispatch( preferencesStore ); const { createInfoNotice } = useDispatch( noticesStore ); const { @@ -66,7 +74,8 @@ function useEditorCommandLoader() { switchEditorMode, toggleDistractionFree, } = useDispatch( editorStore ); - const { openModal } = useDispatch( interfaceStore ); + const { openModal, enableComplementaryArea, disableComplementaryArea } = + useDispatch( interfaceStore ); const { getCurrentPostId } = useSelect( editorStore ); const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled; @@ -211,6 +220,57 @@ function useEditorCommandLoader() { }, } ); + commands.push( { + name: 'core/open-settings-sidebar', + label: __( 'Toggle settings sidebar' ), + icon: isRTL() ? drawerLeft : drawerRight, + callback: ( { close } ) => { + const activeSidebar = getActiveComplementaryArea( 'core' ); + close(); + if ( activeSidebar === 'edit-post/document' ) { + disableComplementaryArea( 'core' ); + } else { + enableComplementaryArea( 'core', 'edit-post/document' ); + } + }, + } ); + + commands.push( { + name: 'core/open-block-inspector', + label: __( 'Toggle block inspector' ), + icon: blockDefault, + callback: ( { close } ) => { + const activeSidebar = getActiveComplementaryArea( 'core' ); + close(); + if ( activeSidebar === 'edit-post/block' ) { + disableComplementaryArea( 'core' ); + } else { + enableComplementaryArea( 'core', 'edit-post/block' ); + } + }, + } ); + + commands.push( { + name: 'core/toggle-publish-sidebar', + label: isPublishSidebarEnabled + ? __( 'Disable pre-publish checks' ) + : __( 'Enable pre-publish checks' ), + icon: formatListBullets, + callback: ( { close } ) => { + close(); + toggle( 'core', 'isPublishSidebarEnabled' ); + createInfoNotice( + isPublishSidebarEnabled + ? __( 'Pre-publish checks disabled.' ) + : __( 'Pre-publish checks enabled.' ), + { + id: 'core/editor/publish-sidebar/notice', + type: 'snackbar', + } + ); + }, + } ); + if ( isViewable ) { commands.push( { name: 'core/preview-link', From 6bc5afa7c4cb7c93ac254e300d4cc3f879c889c3 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 29 May 2024 09:13:10 -0400 Subject: [PATCH 06/19] Use shadows instead of borders on interface skeleton (#61835) * use shadows instead of borders * fix shadow overlap with header * transparent outline for high contrast windows * consistent fullscreen mode/site icon --- .../header/fullscreen-mode-close/style.scss | 3 +-- packages/edit-site/src/components/layout/style.scss | 4 +--- .../src/components/interface-skeleton/style.scss | 12 +++++++++--- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index 911445344febcd..28a108c521bc44 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -14,10 +14,9 @@ background: $gray-900; color: $white; border-radius: 0; - height: $header-height + $border-width; + height: $header-height; width: $header-height; position: relative; - margin-bottom: - $border-width; &:active { color: $white; diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index fdbf6b184aa211..8c15cdae338818 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -162,15 +162,13 @@ position: relative; color: $white; border-radius: 0; - height: $header-height + $border-width; + height: $header-height; width: $header-height; - margin-bottom: - $border-width; overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: center; - border-bottom: 1px solid transparent; &:hover, &:active { diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index a0e56658355ac8..be8eced71dabad 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -125,26 +125,32 @@ html.interface-interface-skeleton__html-container { } .interface-interface-skeleton__sidebar { + border-top: $border-width solid $gray-200; overflow: hidden; @include break-medium() { - border-left: $border-width solid $gray-200; + box-shadow: -$border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. } } .interface-interface-skeleton__secondary-sidebar { + border-top: $border-width solid $gray-200; right: 0; + @include break-medium() { - border-right: $border-width solid $gray-200; + box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. } } .interface-interface-skeleton__header { flex-shrink: 0; height: auto; // Keep the height flexible. - border-bottom: $border-width solid $gray-200; + box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. z-index: z-index(".interface-interface-skeleton__header"); color: $gray-900; + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. } .interface-interface-skeleton__footer { From 5d4baa9ab5f57d207cc3a048003216a8574574d9 Mon Sep 17 00:00:00 2001 From: Dani Guardiola Date: Wed, 29 May 2024 15:25:44 +0200 Subject: [PATCH 07/19] Add eslint rule for curly brace presence in JSX (#62026) * Add rule. * Run autofixes. * Disable react/no-unescaped-entities * Use useInstanceId * Disable entities rule inline. Co-authored-by: DaniGuardiola Co-authored-by: tyxla Co-authored-by: Mamaduka --- .eslintrc.js | 4 ++ .../alignment-control/test/index.js | 2 +- .../components/audio-player/index.native.js | 4 +- .../block-bindings-toolbar-indicator/index.js | 2 +- .../block-invalid-warning.native.js | 2 +- .../all-input-control.js | 2 +- .../border-radius-control/input-controls.js | 2 +- .../components/child-layout-control/index.js | 24 ++++---- .../components/colors-gradients/control.js | 8 +-- .../components/contrast-checker/test/index.js | 16 +++--- .../dimensions-tool/aspect-ratio-tool.js | 2 +- .../components/dimensions-tool/scale-tool.js | 2 +- .../dimensions-tool/width-height-tool.js | 4 +- .../global-styles/background-panel.js | 16 +++--- .../components/global-styles/border-panel.js | 2 +- .../src/components/height-control/index.js | 2 +- .../warning-max-depth-exceeded.native.js | 2 +- .../block-patterns-explorer/pattern-list.js | 2 +- .../inserter/category-tabs/index.js | 2 +- .../inspector-controls/fill.native.js | 8 +-- .../components/list-view/block-contents.js | 2 +- .../src/components/media-placeholder/index.js | 2 +- .../media-placeholder/index.native.js | 4 +- .../src/components/resolution-tool/index.js | 2 +- .../rich-text/native/test/index.native.js | 26 ++++----- .../input-controls/spacing-input-control.js | 4 +- .../components/video-player/index.native.js | 2 +- packages/block-editor/src/hooks/position.js | 2 +- packages/block-editor/src/layouts/flex.js | 4 +- packages/block-editor/src/layouts/grid.js | 10 ++-- .../block-library/src/block/edit.native.js | 2 +- packages/block-library/src/button/edit.js | 2 +- .../src/cover/controls.native.js | 4 +- .../block-library/src/cover/edit.native.js | 2 +- .../src/cover/edit/inspector-controls.js | 2 +- .../src/embed/embed-no-preview.native.js | 4 +- .../src/embed/embed-placeholder.native.js | 4 +- packages/block-library/src/file/edit.js | 8 +-- packages/block-library/src/gallery/edit.js | 4 +- .../src/gallery/v1/gallery-button.native.js | 2 +- .../src/gallery/v1/gallery-image.native.js | 2 +- packages/block-library/src/image/edit.js | 6 +- .../block-library/src/image/edit.native.js | 8 +-- .../src/latest-posts/edit.native.js | 2 +- .../src/media-text/icon-retry.native.js | 2 +- .../src/media-text/media-container.native.js | 2 +- .../block-library/src/missing/edit.native.js | 4 +- .../src/navigation-submenu/edit.js | 52 +++++++++--------- .../src/page-list/convert-to-links-modal.js | 15 ++++- packages/block-library/src/page-list/edit.js | 6 +- packages/block-library/src/search/edit.js | 2 +- .../src/social-link/edit.native.js | 2 +- .../src/social-links/edit.native.js | 2 +- .../src/animate/stories/index.story.tsx | 7 ++- .../src/autocomplete/test/index.tsx | 6 +- .../components/src/button/index.native.js | 2 +- .../circular-option-picker.tsx | 4 +- .../stories/index.story.tsx | 2 +- .../src/circular-option-picker/test/index.tsx | 12 +--- .../src/color-palette/index.native.js | 4 +- .../src/dimension-control/test/index.test.js | 17 +++--- .../dropdown-menu-v2/stories/index.story.tsx | 2 +- .../src/dropdown/stories/index.story.tsx | 8 ++- .../src/font-size-picker/index.native.js | 8 +-- .../stories/index.story.tsx | 4 +- .../src/menu-group/stories/index.story.tsx | 2 +- .../index.native.js | 4 +- .../bottom-sheet-text-control/index.native.js | 4 +- .../src/mobile/bottom-sheet/cell.native.js | 4 +- .../mobile/bottom-sheet/color-cell.native.js | 2 +- .../footer-message-cell.native.js | 4 +- .../link-suggestion-item-cell.native.js | 6 +- .../nav-bar/action-button.native.js | 2 +- .../mobile/bottom-sheet/radio-cell.native.js | 4 +- .../stepper-cell/stepper.android.js | 2 +- .../bottom-sheet/stepper-cell/stepper.ios.js | 2 +- .../mobile/bottom-sheet/switch-cell.native.js | 4 +- .../src/mobile/image/icon-retry.native.js | 2 +- .../image/image-editing-button.native.js | 2 +- .../src/mobile/image/index.native.js | 2 +- .../src/mobile/picker/index.android.js | 4 +- .../mobile/segmented-control/index.native.js | 2 +- .../src/notice/stories/index.story.tsx | 2 +- .../src/palette-edit/test/index.tsx | 2 +- packages/components/src/popover/index.tsx | 2 +- .../src/search-control/index.native.js | 2 +- packages/components/src/snackbar/list.tsx | 6 +- packages/components/src/tab-panel/index.tsx | 2 +- .../src/tabs/stories/index.story.tsx | 55 +++++++++---------- .../src/tools-panel/stories/index.story.tsx | 2 +- .../tools-panel-header/component.tsx | 2 +- .../src/unit-control/test/index.tsx | 24 ++++---- .../dataviews/src/bulk-actions-toolbar.tsx | 6 +- packages/dataviews/src/pagination.tsx | 2 +- packages/dataviews/src/view-grid.tsx | 2 +- .../components/global-styles/font-families.js | 2 +- .../font-library-modal/font-collection.js | 4 +- .../font-library-modal/installed-fonts.js | 8 +-- .../global-styles/shadows-edit-panel.js | 6 +- .../src/components/global-styles/ui.js | 2 +- .../src/components/resizable-frame/index.js | 2 +- .../src/components/save-panel/index.js | 2 +- .../content.js | 2 +- .../editor/src/components/blog-title/index.js | 2 +- .../help-get-support-button.native.js | 2 +- .../components/error-boundary/index.native.js | 2 +- .../post-publish-panel/maybe-tags-panel.js | 2 +- .../src/components/post-title/index.native.js | 4 +- .../src/components/posts-per-page/index.js | 2 +- .../src/test/create-interpolate-element.js | 2 +- packages/element/src/test/serialize.js | 8 +-- .../link-settings-screen.native.js | 4 +- 112 files changed, 293 insertions(+), 305 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 490c542f9d4565..9240b96c033b48 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -104,6 +104,10 @@ module.exports = { rules: { 'jest/expect-expect': 'off', 'react/jsx-boolean-value': 'error', + 'react/jsx-curly-brace-presence': [ + 'error', + { props: 'never', children: 'never' }, + ], '@wordpress/dependency-group': 'error', '@wordpress/wp-global-usage': 'error', '@wordpress/react-no-unsafe-timeout': 'error', diff --git a/packages/block-editor/src/components/alignment-control/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js index de72e92489be31..178ba294127c31 100644 --- a/packages/block-editor/src/components/alignment-control/test/index.js +++ b/packages/block-editor/src/components/alignment-control/test/index.js @@ -133,7 +133,7 @@ describe( 'AlignmentUI', () => { const { container } = render( { setPaused( false ); } } diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js index 4b2d3df725a66b..1c9b0fd8a7cc73 100644 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js +++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js @@ -9,7 +9,7 @@ export default function BlockBindingsToolbarIndicator() { return ( diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js index d27b2e436f2961..8734f6f8804f03 100644 --- a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js +++ b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js @@ -54,7 +54,7 @@ export default function BlockInvalidWarning( { clientId } ) { ); } diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js index c0c5c672d6364f..4529c00b997ac7 100644 --- a/packages/block-editor/src/components/border-radius-control/input-controls.js +++ b/packages/block-editor/src/components/border-radius-control/input-controls.js @@ -80,7 +80,7 @@ export default function BoxInputControls( { onUnitChange={ createHandleOnUnitChange( corner ) } - size={ '__unstable-large' } + size="__unstable-large" />
diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index eb2a02e5095d78..dfc4ee69437f67 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -111,7 +111,7 @@ export default function ChildLayoutControl( { > { selfStretch === 'fixed' && ( { onChange( { selfStretch, @@ -166,7 +166,7 @@ export default function ChildLayoutControl( { panelId={ panelId } > { @@ -181,7 +181,7 @@ export default function ChildLayoutControl( { min={ 1 } /> { @@ -210,7 +210,7 @@ export default function ChildLayoutControl( { > { @@ -234,7 +234,7 @@ export default function ChildLayoutControl( { { diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 88b33379e04de3..d6b34876c8eaad 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -145,18 +145,14 @@ function ColorGradientControlInner( { { tabPanels.color } { tabPanels.gradient } diff --git a/packages/block-editor/src/components/contrast-checker/test/index.js b/packages/block-editor/src/components/contrast-checker/test/index.js index 26da2ac0ae8c1f..9abd7d7f7e2e6a 100644 --- a/packages/block-editor/src/components/contrast-checker/test/index.js +++ b/packages/block-editor/src/components/contrast-checker/test/index.js @@ -375,7 +375,7 @@ describe( 'ContrastChecker', () => { render( { render( { test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => { const { container } = render( { { render( { test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => { render( diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js index e38a01e199b792..d963e71289cb0f 100644 --- a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js @@ -92,7 +92,7 @@ export default function AspectRatioTool( { value={ displayValue } options={ options ?? aspectRatioOptions } onChange={ onChange } - size={ '__unstable-large' } + size="__unstable-large" __nextHasNoMarginBottom /> diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js index e3ef91745aa53d..05a7d2f4d251a7 100644 --- a/packages/block-editor/src/components/dimensions-tool/scale-tool.js +++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js @@ -110,7 +110,7 @@ export default function ScaleTool( { help={ scaleHelp[ displayValue ] } value={ displayValue } onChange={ onChange } - size={ '__unstable-large' } + size="__unstable-large" > { options.map( ( option ) => ( diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index b7cf7f2bbc493d..61a3263e232ef9 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -509,7 +509,7 @@ function BackgroundSizeToolsPanelItem( { onChange={ updateBackgroundPosition } /> @@ -542,7 +542,7 @@ function BackgroundSizeToolsPanelItem( { aria-label={ __( 'Background image width' ) } onChange={ updateBackgroundSize } value={ sizeValue } - size={ '__unstable-large' } + size="__unstable-large" __unstableInputWidth="100px" min={ 0 } /> diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index 964fd1b30100e4..a20bb15c044c51 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -261,7 +261,7 @@ export default function BorderPanel( { popoverPlacement="left-start" value={ border } __experimentalIsRenderedInSidebar - size={ '__unstable-large' } + size="__unstable-large" hideLabelFromVision={ ! hasShadowControl } label={ __( 'Border' ) } /> diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js index 23738378b69983..71753a67beb021 100644 --- a/packages/block-editor/src/components/height-control/index.js +++ b/packages/block-editor/src/components/height-control/index.js @@ -156,7 +156,7 @@ export default function HeightControl( { onChange={ onChange } onUnitChange={ handleUnitChange } min={ 0 } - size={ '__unstable-large' } + size="__unstable-large" label={ label } hideLabelFromVision /> diff --git a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js index e363db4961c7c3..f759b0e519fd60 100644 --- a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js +++ b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js @@ -89,7 +89,7 @@ const WarningMaxDepthExceeded = ( { clientId } ) => { setShowDetails( true ) } > diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js index d1021b639a5c57..709e005b587cea 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js @@ -31,7 +31,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) { return ( { sprintf( diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 47c9f0e051a66e..a379f4719556b2 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -27,7 +27,7 @@ function CategoryTabs( { className="block-editor-inserter__category-tabs" selectOnMove={ false } selectedTabId={ selectedCategory ? selectedCategory.name : null } - orientation={ 'vertical' } + orientation="vertical" onSelect={ ( categoryId ) => { // Pass the full category object onSelectCategory( diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js index 98b6698721e1ce..69da92dd42b378 100644 --- a/packages/block-editor/src/components/inspector-controls/fill.native.js +++ b/packages/block-editor/src/components/inspector-controls/fill.native.js @@ -52,11 +52,9 @@ export default function InspectorControlsFill( { return ( <> - { - - { () => { children } } - - } + + { () => { children } } + { Children.count( children ) > 0 && } diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js index f6abaee9258d10..91bfbd7eddaa03 100644 --- a/packages/block-editor/src/components/list-view/block-contents.js +++ b/packages/block-editor/src/components/list-view/block-contents.js @@ -77,7 +77,7 @@ const ListViewBlockContents = forwardRef( { ( { draggable, onDragStart, onDragEnd } ) => ( id ) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index e597b65d63b865..bbd9cbad73a4a1 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -164,7 +164,7 @@ function MediaPlaceholder( props ) { activeOpacity={ 0.5 } accessibilityLabel={ accessibilityLabel } style={ buttonStyles } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ accessibilityHint } hitSlop={ hitSlop } onPress={ onButtonPress( open ) } @@ -181,7 +181,7 @@ function MediaPlaceholder( props ) { activeOpacity={ 0.5 } accessibilityLabel={ accessibilityLabel } style={ styles[ 'media-placeholder__appender' ] } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ accessibilityHint } hitSlop={ hitSlop } onPress={ onButtonPress( open ) } diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js index 71c7e508ca3edb..42fea6e8655a8e 100644 --- a/packages/block-editor/src/components/resolution-tool/index.js +++ b/packages/block-editor/src/components/resolution-tool/index.js @@ -49,7 +49,7 @@ export default function ResolutionTool( { options={ options } onChange={ onChange } help={ __( 'Select the size of the source image.' ) } - size={ '__unstable-large' } + size="__unstable-large" /> ); diff --git a/packages/block-editor/src/components/rich-text/native/test/index.native.js b/packages/block-editor/src/components/rich-text/native/test/index.native.js index 8197952a116ddf..26b6d6c5358ec5 100644 --- a/packages/block-editor/src/components/rich-text/native/test/index.native.js +++ b/packages/block-editor/src/components/rich-text/native/test/index.native.js @@ -151,7 +151,7 @@ describe( '', () => { const expectedFontSize = 16; // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -164,8 +164,8 @@ describe( '', () => { // Act. const { getByLabelText } = render( ); // Assert. @@ -179,7 +179,7 @@ describe( '', () => { // Act. const { getByLabelText } = render( ); @@ -195,7 +195,7 @@ describe( '', () => { mockGlobalSettings( { fontSize: 'min(2em, 3em)' } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -209,7 +209,7 @@ describe( '', () => { mockGlobalSettings( { fontSize: 'min(2em, 3em)' } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -224,7 +224,7 @@ describe( '', () => { mockGlobalSettings( { fontSize: unit } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = @@ -241,9 +241,9 @@ describe( '', () => { // Act. const { getByLabelText } = render( ); @@ -260,7 +260,7 @@ describe( '', () => { // Act. const { getByLabelText } = render( @@ -276,7 +276,7 @@ describe( '', () => { Dimensions.set( { window: { ...window, width: 300 } } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -289,7 +289,7 @@ describe( '', () => { Dimensions.set( { window: { ...window, height: 300 } } ); // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.fontSize; @@ -335,7 +335,7 @@ describe( '', () => { const style = { lineHeight: 0.2 }; // Act. const { getByLabelText } = render( - + ); // Assert. const actualFontSize = getByLabelText( 'editor' ).props.lineHeight; diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index 6feb583c29cdb2..eacdda5927f2d6 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -230,7 +230,7 @@ export default function SpacingInputControl( { label={ ariaLabel } hideLabelFromVision className="spacing-sizes-control__custom-value-input" - size={ '__unstable-large' } + size="__unstable-large" onDragStart={ () => { if ( value?.charAt( 0 ) === '-' ) { setMinValue( 0 ); @@ -312,7 +312,7 @@ export default function SpacingInputControl( { options={ options } label={ ariaLabel } hideLabelFromVision - size={ '__unstable-large' } + size="__unstable-large" onMouseOver={ onMouseOver } onMouseOut={ onMouseOut } onFocus={ onMouseOver } diff --git a/packages/block-editor/src/components/video-player/index.native.js b/packages/block-editor/src/components/video-player/index.native.js index a409c1d4ad99fc..3c9de8758579b6 100644 --- a/packages/block-editor/src/components/video-player/index.native.js +++ b/packages/block-editor/src/components/video-player/index.native.js @@ -99,7 +99,7 @@ class Video extends Component { // So we are setting controls=false and adding a play button that // will trigger presentFullscreenPlayer() controls={ false } - ignoreSilentSwitch={ 'ignore' } + ignoreSilentSwitch="ignore" paused={ ! isFullScreen } onLayout={ this.onVideoLayout } onFullscreenPlayerWillPresent={ () => { diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 3c9cde478cdd04..a5d4a0cb43bf3d 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -303,7 +303,7 @@ export function PositionPanelPure( { onChange={ ( { selectedItem } ) => { onChangeType( selectedItem.value ); } } - size={ '__unstable-large' } + size="__unstable-large" /> diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index f628a9bf3c3f66..72beca11b3f0c9 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -403,12 +403,12 @@ function OrientationControl( { layout, onChange } ) { > diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index e3f956f6dc13d7..4528de117c45b0 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -203,7 +203,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) { { onChange( { ...layout, @@ -251,7 +251,7 @@ function GridLayoutColumnsAndRowsControl( { { /** * If the input is cleared, avoid switching @@ -296,7 +296,7 @@ function GridLayoutColumnsAndRowsControl( { { onChange( { ...layout, @@ -372,12 +372,12 @@ function GridLayoutTypeControl( { layout, onChange } ) { isBlock > diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js index ae8c8315aa2e88..6578c12eefc4e0 100644 --- a/packages/block-library/src/block/edit.native.js +++ b/packages/block-library/src/block/edit.native.js @@ -232,7 +232,7 @@ export default function ReusableBlockEdit( { diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 155fe797e3147d..49baec552bed48 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -339,7 +339,7 @@ function ButtonEdit( props ) { } } anchor={ popoverAnchor } focusOnMount={ isEditingURL ? 'firstElement' : false } - __unstableSlotName={ '__unstable-block-tools-after' } + __unstableSlotName="__unstable-block-tools-after" shift > @@ -281,7 +281,7 @@ function Controls( { value={ dimRatio } onChange={ onOpacityChange } style={ styles.rangeCellContainer } - separatorType={ 'topFullWidth' } + separatorType="topFullWidth" /> ) : null } diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 8e3a37a50c7c28..99324545bf798e 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -512,7 +512,7 @@ const Cover = ( { muted disableFocus repeat - resizeMode={ 'cover' } + resizeMode="cover" source={ { uri: url } } onLoad={ onVideoLoad } onLoadStart={ onVideoLoadStart } diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index a978b2ff184a7f..a10fb4b0675d9b 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -79,7 +79,7 @@ function CoverHeightInput( { min={ min } onChange={ handleOnChange } onUnitChange={ onUnitChange } - __unstableInputWidth={ '80px' } + __unstableInputWidth="80px" units={ units } value={ computedValue } /> diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js index cac8c5d1a4c10d..de97ca73a1618a 100644 --- a/packages/block-library/src/embed/embed-no-preview.native.js +++ b/packages/block-library/src/embed/embed-no-preview.native.js @@ -124,7 +124,7 @@ const EmbedNoPreview = ( { const embedNoProviderPreview = ( <> ) } -
+
{ showDownloadButton && ( -
+
{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ } ) } { Platform.isWeb && ! imageSizeOptions && hasImageIds && ( - + { __( 'Resolution' ) } - + { __( 'Loading options…' ) } diff --git a/packages/block-library/src/gallery/v1/gallery-button.native.js b/packages/block-library/src/gallery/v1/gallery-button.native.js index 8804e99cf2e7e6..4dc9abd9753ee4 100644 --- a/packages/block-library/src/gallery/v1/gallery-button.native.js +++ b/packages/block-library/src/gallery/v1/gallery-button.native.js @@ -35,7 +35,7 @@ export function Button( props ) { style={ buttonStyle } activeOpacity={ 0.7 } accessibilityLabel={ accessibilityLabel } - accessibilityRole={ 'button' } + accessibilityRole="button" onPress={ onClick } disabled={ isDisabled } > diff --git a/packages/block-library/src/gallery/v1/gallery-image.native.js b/packages/block-library/src/gallery/v1/gallery-image.native.js index b887ca0bbfe04f..fc07a209d8c6a5 100644 --- a/packages/block-library/src/gallery/v1/gallery-image.native.js +++ b/packages/block-library/src/gallery/v1/gallery-image.native.js @@ -310,7 +310,7 @@ class GalleryImage extends Component { onPress={ this.onMediaPressed } accessible={ ! isSelected } // We need only child views to be accessible after the selection. accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense - accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity + accessibilityRole="imagebutton" // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity > ); @@ -359,9 +359,7 @@ export function ImageEdit( { } } > { lockUrlControls ? ( - + { lockUrlControlsMessage } ) : ( diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 010ec4cd596949..4789efd6bf0085 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -580,9 +580,7 @@ export class ImageEdit extends Component { 'Describe the purpose of the image. Leave empty if decorative.' ) }{ ' ' } @@ -617,7 +615,7 @@ export class ImageEdit extends Component { styles.removeFeaturedButton, ] } cellContainerStyle={ styles.setFeaturedButtonCellContainer } - separatorType={ 'none' } + separatorType="none" onPress={ () => this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET ) } @@ -629,7 +627,7 @@ export class ImageEdit extends Component { label={ __( 'Set as Featured Image' ) } labelStyle={ setFeaturedButtonStyle } cellContainerStyle={ styles.setFeaturedButtonCellContainer } - separatorType={ 'none' } + separatorType="none" onPress={ () => this.onSetFeatured( attributes.id ) } /> ); diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 90edce4f84b5b9..632efa149313f6 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/packages/block-library/src/latest-posts/edit.native.js @@ -207,7 +207,7 @@ class LatestPostsEdit extends Component { label={ __( 'Add link to featured image' ) } checked={ addLinkToFeaturedImage } onChange={ this.onSetAddLinkToFeaturedImage } - separatorType={ 'topFullWidth' } + separatorType="topFullWidth" /> ) } diff --git a/packages/block-library/src/media-text/icon-retry.native.js b/packages/block-library/src/media-text/icon-retry.native.js index 580cd1fff188f5..d9b3d82e796cb0 100644 --- a/packages/block-library/src/media-text/icon-retry.native.js +++ b/packages/block-library/src/media-text/icon-retry.native.js @@ -6,6 +6,6 @@ import { Path, SVG } from '@wordpress/components'; export default ( - + ); diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js index a06bba719db5e9..eaee027c061856 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/packages/block-library/src/media-text/media-container.native.js @@ -330,7 +330,7 @@ class MediaContainer extends Component { onSelect={ this.onSelectMediaUploadOption } allowedTypes={ ALLOWED_MEDIA_TYPES } onFocus={ this.props.onFocus } - className={ 'no-block-outline' } + className="no-block-outline" /> ); } diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js index a6164f590ca21d..7432f5fae0f12f 100644 --- a/packages/block-library/src/missing/edit.native.js +++ b/packages/block-library/src/missing/edit.native.js @@ -88,7 +88,7 @@ export class UnsupportedBlockEdit extends Component { onPress={ this.onHelpButtonPressed } style={ styles.helpIconContainer } accessibilityLabel={ __( 'Help button' ) } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ __( 'Tap here to show help' ) } > diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index f435b5e5a8a953..bbba77707e8159 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -459,34 +459,32 @@ export default function NavigationSubmenuEdit( { { /* eslint-disable jsx-a11y/anchor-is-valid */ } { /* eslint-enable */ } - { - - setAttributes( { label: labelValue } ) + + setAttributes( { label: labelValue } ) + } + onMerge={ mergeBlocks } + onReplace={ onReplace } + aria-label={ __( 'Navigation link text' ) } + placeholder={ itemLabelPlaceholder } + withoutInteractiveFormatting + allowedFormats={ [ + 'core/bold', + 'core/italic', + 'core/image', + 'core/strikethrough', + ] } + onClick={ () => { + if ( ! openSubmenusOnClick && ! url ) { + setIsLinkOpen( true ); + setOpenedBy( ref.current ); } - onMerge={ mergeBlocks } - onReplace={ onReplace } - aria-label={ __( 'Navigation link text' ) } - placeholder={ itemLabelPlaceholder } - withoutInteractiveFormatting - allowedFormats={ [ - 'core/bold', - 'core/italic', - 'core/image', - 'core/strikethrough', - ] } - onClick={ () => { - if ( ! openSubmenusOnClick && ! url ) { - setIsLinkOpen( true ); - setOpenedBy( ref.current ); - } - } } - /> - } + } } + /> { ! openSubmenusOnClick && isLinkOpen && ( -

+

{ convertDescription }

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 0e81336dfde287..2106aa7c39e9f7 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -63,7 +63,7 @@ function BlockContent( { if ( pages === null ) { return (
- + { __( 'Page List: Cannot retrieve Pages.' ) }
@@ -73,7 +73,7 @@ function BlockContent( { if ( pages.length === 0 ) { return (
- + { __( 'Page List: Cannot retrieve Pages.' ) }
@@ -101,7 +101,7 @@ function BlockContent( { return (
- + { __( 'Page List: Cannot retrieve Pages.' ) }
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1a88576965002f..cfe7b29caf5de0 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -441,7 +441,7 @@ export default function SearchEdit( { widthUnit: newUnit, } ); } } - __unstableInputWidth={ '80px' } + __unstableInputWidth="80px" value={ `${ width }${ widthUnit }` } units={ units } /> diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js index 3ea794a9b8c20b..0b4b6b0ac7d4bd 100644 --- a/packages/block-library/src/social-link/edit.native.js +++ b/packages/block-library/src/social-link/edit.native.js @@ -171,7 +171,7 @@ const SocialLinkEdit = ( { ( -

{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }

+

+ { /* eslint-disable react/no-unescaped-entities */ } + No default animation. Use one of type = "appear", "slide-in", or + "loading". + { /* eslint-enable react/no-unescaped-entities */ } +

), }; diff --git a/packages/components/src/autocomplete/test/index.tsx b/packages/components/src/autocomplete/test/index.tsx index 7a31680b3dd5e1..0df784f8367cdd 100644 --- a/packages/components/src/autocomplete/test/index.tsx +++ b/packages/components/src/autocomplete/test/index.tsx @@ -67,10 +67,10 @@ describe( 'AutocompleterUI', () => { return (
{} } onSelect={ () => {} } diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index f093502a750fd7..063a2cc191eaed 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -183,7 +183,7 @@ export function Button( props ) { accessible accessibilityLabel={ label } accessibilityStates={ states } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityHint={ hint } onPress={ onClick } style={ containerStyle } diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx index 346a912535fa35..cd2ddcf90d7ce0 100644 --- a/packages/components/src/circular-option-picker/circular-option-picker.tsx +++ b/packages/components/src/circular-option-picker/circular-option-picker.tsx @@ -102,7 +102,7 @@ function ListboxCircularOptionPicker( { ...additionalProps } id={ baseId } store={ compositeStore } - role={ 'listbox' } + role="listbox" > { options } @@ -156,7 +156,7 @@ function CircularOptionPicker( props: CircularOptionPickerProps ) { ) : undefined; const options = ( -
+
{ optionsProp }
); diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx index 45643e9d6dd6e1..e091a2ac54d41e 100644 --- a/packages/components/src/circular-option-picker/stories/index.story.tsx +++ b/packages/components/src/circular-option-picker/stories/index.story.tsx @@ -101,7 +101,7 @@ const DefaultActions = () => { setCurrentColor?.( undefined ) } > - { 'Clear' } + Clear ); }; diff --git a/packages/components/src/circular-option-picker/test/index.tsx b/packages/components/src/circular-option-picker/test/index.tsx index b37cb7e534168f..0b5ccbeecb57d8 100644 --- a/packages/components/src/circular-option-picker/test/index.tsx +++ b/packages/components/src/circular-option-picker/test/index.tsx @@ -9,17 +9,11 @@ import { press, sleep } from '@ariakit/test'; */ import CircularOptionPicker from '..'; -const SINGLE_OPTION = [ ]; +const SINGLE_OPTION = [ ]; const MULTIPLE_OPTIONS = [ - , - , + , + , ]; const DEFAULT_PROPS = { diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 87b8e704b704ec..bb45de6d66e884 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -285,7 +285,7 @@ function ColorPalette( { onColorPress( color ) } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityState={ { selected: isSelected( color ), } } @@ -326,7 +326,7 @@ function ColorPalette( { ) } { describe( 'rendering', () => { it( 'renders with defaults', () => { const { container } = render( - + ); expect( container ).toMatchSnapshot(); } ); @@ -37,7 +34,7 @@ describe( 'DimensionControl', () => { const { container } = render( ); @@ -48,9 +45,9 @@ describe( 'DimensionControl', () => { const { container } = render( ); expect( container ).toMatchSnapshot(); @@ -78,7 +75,7 @@ describe( 'DimensionControl', () => { const { container } = render( ); @@ -93,7 +90,7 @@ describe( 'DimensionControl', () => { render( ); @@ -115,7 +112,7 @@ describe( 'DimensionControl', () => { render( ); diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx index eba4a43fe49aa0..6996431fc6053a 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx @@ -110,7 +110,7 @@ export const Default: StoryFn< typeof DropdownMenu > = ( props ) => ( > With prefix - With suffix + With suffix } diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index 96d67441f78d48..3df2f783450666 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -66,7 +66,9 @@ WithMorePadding.args = { ...Default.args, renderContent: () => ( - Content wrapped with { `paddingSize="medium"` }. + { /* eslint-disable react/no-unescaped-entities */ } + Content wrapped with paddingSize="medium". + { /* eslint-enable react/no-unescaped-entities */ } ), }; @@ -81,7 +83,9 @@ WithNoPadding.args = { ...Default.args, renderContent: () => ( - Content wrapped with { `paddingSize="none"` }. + { /* eslint-disable react/no-unescaped-entities */ } + Content wrapped with paddingSize="none". + { /* eslint-enable react/no-unescaped-entities */ } ), }; diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js index 06f0d386b74d78..b12a27296ca297 100644 --- a/packages/components/src/font-size-picker/index.native.js +++ b/packages/components/src/font-size-picker/index.native.js @@ -85,7 +85,7 @@ function FontSizePicker( { : __( 'Default' ) } onPress={ openSubSheet } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityLabel={ accessibilityLabel } accessibilityHint={ sprintf( // translators: %s: Select control button label e.g. Small @@ -112,8 +112,8 @@ function FontSizePicker( { label={ __( 'Default' ) } onPress={ onChangeValue( undefined ) } leftAlign - key={ 'default' } - accessibilityRole={ 'button' } + key="default" + accessibilityRole="button" accessibilityLabel={ __( 'Selected: Default' ) } accessibilityHint={ __( 'Double tap to select default font size' @@ -139,7 +139,7 @@ function FontSizePicker( { onPress={ onChangeValue( item.sizePx ) } leftAlign key={ index } - accessibilityRole={ 'button' } + accessibilityRole="button" accessibilityLabel={ item.sizePx === selectedValue ? sprintf( diff --git a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx index d181be737353cd..9e3a1e207451bb 100644 --- a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx +++ b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx @@ -32,7 +32,9 @@ Default.args = { }, children: (
-

{ `Hit the "a" or "b" key in this textarea:` }

+ { /* eslint-disable react/no-unescaped-entities */ } +

Hit the "a" or "b" key in this textarea:

+ { /* eslint-enable react/no-unescaped-entities */ }