From 5e7ddff7cfbe88552d5c2470bbb98c07c47baf35 Mon Sep 17 00:00:00 2001 From: Towfeeq Khan Date: Sat, 21 Dec 2024 20:43:03 +0530 Subject: [PATCH 1/5] Simplify warning message in Navigation block settings. Fixes #68181 --- .../src/navigation/edit/index.js | 588 +++++++++--------- 1 file changed, 294 insertions(+), 294 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index ae7dd60bd0c5ba..38ad6b0606b797 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -73,7 +73,7 @@ import AccessibleDescription from './accessible-description'; import AccessibleMenuDescription from './accessible-menu-description'; import { unlock } from '../../lock-unlock'; -function ColorTools( { +function ColorTools({ textColor, setTextColor, backgroundColor, @@ -84,18 +84,18 @@ function ColorTools( { setOverlayBackgroundColor, clientId, navRef, -} ) { - const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); - const [ detectedColor, setDetectedColor ] = useState(); +}) { + const [detectedBackgroundColor, setDetectedBackgroundColor] = useState(); + const [detectedColor, setDetectedColor] = useState(); const [ detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor, ] = useState(); - const [ detectedOverlayColor, setDetectedOverlayColor ] = useState(); + const [detectedOverlayColor, setDetectedOverlayColor] = useState(); // Turn on contrast checker for web only since it's not supported on mobile yet. const enableContrastChecking = Platform.OS === 'web'; - useEffect( () => { - if ( ! enableContrastChecking ) { + useEffect(() => { + if (!enableContrastChecking) { return; } detectColors( @@ -108,14 +108,14 @@ function ColorTools( { '[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]' ); - if ( ! subMenuElement ) { + if (!subMenuElement) { return; } // Only detect submenu overlay colors if they have previously been explicitly set. // This avoids the contrast checker from reporting on inherited submenu colors and // showing the contrast warning twice. - if ( overlayTextColor.color || overlayBackgroundColor.color ) { + if (overlayTextColor.color || overlayBackgroundColor.color) { detectColors( subMenuElement, setDetectedOverlayColor, @@ -127,63 +127,63 @@ function ColorTools( { overlayTextColor.color, overlayBackgroundColor.color, navRef, - ] ); + ]); const colorGradientSettings = useMultipleOriginColorsAndGradients(); - if ( ! colorGradientSettings.hasColorsOrGradients ) { + if (!colorGradientSettings.hasColorsOrGradients) { return null; } return ( <> setTextColor(), }, { colorValue: backgroundColor.color, - label: __( 'Background' ), + label: __('Background'), onColorChange: setBackgroundColor, resetAllFilter: () => setBackgroundColor(), }, { colorValue: overlayTextColor.color, - label: __( 'Submenu & overlay text' ), + label: __('Submenu & overlay text'), onColorChange: setOverlayTextColor, resetAllFilter: () => setOverlayTextColor(), }, { colorValue: overlayBackgroundColor.color, - label: __( 'Submenu & overlay background' ), + label: __('Submenu & overlay background'), onColorChange: setOverlayBackgroundColor, resetAllFilter: () => setOverlayBackgroundColor(), }, - ] } - panelId={ clientId } - { ...colorGradientSettings } - gradients={ [] } + ]} + panelId={clientId} + {...colorGradientSettings} + gradients={[]} disableCustomGradients /> - { enableContrastChecking && ( + {enableContrastChecking && ( <> - ) } + )} ); } -function Navigation( { +function Navigation({ attributes, setAttributes, clientId, @@ -203,7 +203,7 @@ function Navigation( { hasSubmenuIndicatorSetting = true, customPlaceholder: CustomPlaceholder = null, __unstableLayoutClassNames: layoutClassNames, -} ) { +}) { const { openSubmenusOnClick, overlayMenu, @@ -221,14 +221,14 @@ function Navigation( { const ref = attributes.ref; const setRef = useCallback( - ( postId ) => { - setAttributes( { ref: postId } ); + (postId) => { + setAttributes({ ref: postId }); }, - [ setAttributes ] + [setAttributes] ); - const recursionId = `navigationMenu/${ ref }`; - const hasAlreadyRendered = useHasRecursion( recursionId ); + const recursionId = `navigationMenu/${ref}`; + const hasAlreadyRendered = useHasRecursion(recursionId); const blockEditingMode = useBlockEditingMode(); @@ -236,22 +236,22 @@ function Navigation( { // the Select Menu dropdown. const { menus: classicMenus } = useNavigationEntities(); - const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] = - useNavigationNotice( { + const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = + useNavigationNotice({ name: 'block-library/core/navigation/status', - } ); + }); - const [ showClassicMenuConversionNotice, hideClassicMenuConversionNotice ] = - useNavigationNotice( { + const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = + useNavigationNotice({ name: 'block-library/core/navigation/classic-menu-conversion', - } ); + }); const [ showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice, - ] = useNavigationNotice( { + ] = useNavigationNotice({ name: 'block-library/core/navigation/permissions/update', - } ); + }); const { create: createNavigationMenu, @@ -261,10 +261,10 @@ function Navigation( { isPending: isCreatingNavigationMenu, isSuccess: createNavigationMenuIsSuccess, isError: createNavigationMenuIsError, - } = useCreateNavigationMenu( clientId ); + } = useCreateNavigationMenu(clientId); const createUntitledEmptyNavigationMenu = async () => { - await createNavigationMenu( '' ); + await createNavigationMenu(''); }; const { @@ -272,22 +272,22 @@ function Navigation( { uncontrolledInnerBlocks, isInnerBlockSelected, innerBlocks, - } = useInnerBlocks( clientId ); + } = useInnerBlocks(clientId); - const hasSubmenus = !! innerBlocks.find( - ( block ) => block.name === 'core/navigation-submenu' + const hasSubmenus = !!innerBlocks.find( + (block) => block.name === 'core/navigation-submenu' ); const { replaceInnerBlocks, selectBlock, __unstableMarkNextChangeAsNotPersistent, - } = useDispatch( blockEditorStore ); + } = useDispatch(blockEditorStore); - const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = - useState( false ); + const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = + useState(false); - const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false ); + const [overlayMenuPreview, setOverlayMenuPreview] = useState(false); const { hasResolvedNavigationMenus, @@ -300,7 +300,7 @@ function Navigation( { canUserCreateNavigationMenus, isResolvingCanUserCreateNavigationMenus, hasResolvedCanUserCreateNavigationMenus, - } = useNavigationMenu( ref ); + } = useNavigationMenu(ref); const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing; @@ -309,24 +309,24 @@ function Navigation( { convert: convertClassicMenu, status: classicMenuConversionStatus, error: classicMenuConversionError, - } = useConvertClassicToBlockMenu( createNavigationMenu ); + } = useConvertClassicToBlockMenu(createNavigationMenu); const isConvertingClassicMenu = classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING; const handleUpdateMenu = useCallback( - ( menuId, options = { focusNavigationBlock: false } ) => { + (menuId, options = { focusNavigationBlock: false }) => { const { focusNavigationBlock } = options; - setRef( menuId ); - if ( focusNavigationBlock ) { - selectBlock( clientId ); + setRef(menuId); + if (focusNavigationBlock) { + selectBlock(clientId); } }, - [ selectBlock, clientId, setRef ] + [selectBlock, clientId, setRef] ); const isEntityAvailable = - ! isNavigationMenuMissing && isNavigationMenuResolved; + !isNavigationMenuMissing && isNavigationMenuResolved; // If the block has inner blocks, but no menu id, then these blocks are either: // - inserted via a pattern. @@ -334,20 +334,20 @@ function Navigation( { // - from an older version of navigation block added before the block used a wp_navigation entity. // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks, // that automatically saves the menu as an entity when changes are made to the inner blocks. - const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable; + const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable; - const { getNavigationFallbackId } = unlock( useSelect( coreStore ) ); + const { getNavigationFallbackId } = unlock(useSelect(coreStore)); - const navigationFallbackId = ! ( ref || hasUnsavedBlocks ) + const navigationFallbackId = !(ref || hasUnsavedBlocks) ? getNavigationFallbackId() : null; - useEffect( () => { + useEffect(() => { // If: // - there is an existing menu, OR // - there are existing (uncontrolled) inner blocks // ...then don't request a fallback menu. - if ( ref || hasUnsavedBlocks || ! navigationFallbackId ) { + if (ref || hasUnsavedBlocks || !navigationFallbackId) { return; } @@ -358,14 +358,14 @@ function Navigation( { */ __unstableMarkNextChangeAsNotPersistent(); - setRef( navigationFallbackId ); + setRef(navigationFallbackId); }, [ ref, setRef, hasUnsavedBlocks, navigationFallbackId, __unstableMarkNextChangeAsNotPersistent, - ] ); + ]); const navRef = useRef(); @@ -378,12 +378,12 @@ function Navigation( { // - there is no menu creation process in progress. // - there are no uncontrolled blocks. const isPlaceholder = - ! ref && - ! isCreatingNavigationMenu && - ! isConvertingClassicMenu && + !ref && + !isCreatingNavigationMenu && + !isConvertingClassicMenu && hasResolvedNavigationMenus && classicMenus?.length === 0 && - ! hasUncontrolledInnerBlocks; + !hasUncontrolledInnerBlocks; // "loading" state: // - there is a menu creation process in progress. @@ -392,22 +392,22 @@ function Navigation( { // - there is a ref attribute pointing to a Navigation Post // - the Navigation Post isn't available (hasn't resolved) yet. const isLoading = - ! hasResolvedNavigationMenus || + !hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || - !! ( ref && ! isEntityAvailable && ! isConvertingClassicMenu ); + !!(ref && !isEntityAvailable && !isConvertingClassicMenu); const textDecoration = attributes.style?.typography?.textDecoration; const hasBlockOverlay = useSelect( - ( select ) => - select( blockEditorStore ).__unstableHasActiveBlockOverlayActive( + (select) => + select(blockEditorStore).__unstableHasActiveBlockOverlayActive( clientId ), - [ clientId ] + [clientId] ); const isResponsive = 'never' !== overlayMenu; - const blockProps = useBlockProps( { + const blockProps = useBlockProps({ ref: navRef, className: clsx( className, @@ -420,54 +420,54 @@ function Navigation( { 'is-vertical': orientation === 'vertical', 'no-wrap': flexWrap === 'nowrap', 'is-responsive': isResponsive, - 'has-text-color': !! textColor.color || !! textColor?.class, - [ getColorClassName( 'color', textColor?.slug ) ]: - !! textColor?.slug, + 'has-text-color': !!textColor.color || !!textColor?.class, + [getColorClassName('color', textColor?.slug)]: + !!textColor?.slug, 'has-background': - !! backgroundColor.color || backgroundColor.class, - [ getColorClassName( + !!backgroundColor.color || backgroundColor.class, + [getColorClassName( 'background-color', backgroundColor?.slug - ) ]: !! backgroundColor?.slug, - [ `has-text-decoration-${ textDecoration }` ]: textDecoration, + )]: !!backgroundColor?.slug, + [`has-text-decoration-${textDecoration}`]: textDecoration, 'block-editor-block-content-overlay': hasBlockOverlay, }, layoutClassNames ), style: { - color: ! textColor?.slug && textColor?.color, - backgroundColor: ! backgroundColor?.slug && backgroundColor?.color, + color: !textColor?.slug && textColor?.color, + backgroundColor: !backgroundColor?.slug && backgroundColor?.color, }, - } ); + }); - const onSelectClassicMenu = async ( classicMenu ) => { - return convertClassicMenu( classicMenu.id, classicMenu.name, 'draft' ); + const onSelectClassicMenu = async (classicMenu) => { + return convertClassicMenu(classicMenu.id, classicMenu.name, 'draft'); }; - const onSelectNavigationMenu = ( menuId ) => { - handleUpdateMenu( menuId ); + const onSelectNavigationMenu = (menuId) => { + handleUpdateMenu(menuId); }; - useEffect( () => { + useEffect(() => { hideNavigationMenuStatusNotice(); - if ( isCreatingNavigationMenu ) { - speak( __( `Creating Navigation Menu.` ) ); + if (isCreatingNavigationMenu) { + speak(__(`Creating Navigation Menu.`)); } - if ( createNavigationMenuIsSuccess ) { - handleUpdateMenu( createNavigationMenuPost?.id, { + if (createNavigationMenuIsSuccess) { + handleUpdateMenu(createNavigationMenuPost?.id, { focusNavigationBlock: true, - } ); + }); showNavigationMenuStatusNotice( - __( `Navigation Menu successfully created.` ) + __(`Navigation Menu successfully created.`) ); } - if ( createNavigationMenuIsError ) { + if (createNavigationMenuIsError) { showNavigationMenuStatusNotice( - __( 'Failed to create Navigation Menu.' ) + __('Failed to create Navigation Menu.') ); } }, [ @@ -480,26 +480,26 @@ function Navigation( { handleUpdateMenu, hideNavigationMenuStatusNotice, showNavigationMenuStatusNotice, - ] ); + ]); - useEffect( () => { + useEffect(() => { hideClassicMenuConversionNotice(); - if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING ) { - speak( __( 'Classic menu importing.' ) ); + if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING) { + speak(__('Classic menu importing.')); } - if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS ) { + if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS) { showClassicMenuConversionNotice( - __( 'Classic menu imported successfully.' ) + __('Classic menu imported successfully.') ); - handleUpdateMenu( createNavigationMenuPost?.id, { + handleUpdateMenu(createNavigationMenuPost?.id, { focusNavigationBlock: true, - } ); + }); } - if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR ) { + if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR) { showClassicMenuConversionNotice( - __( 'Classic menu import failed.' ) + __('Classic menu import failed.') ); } }, [ @@ -509,19 +509,19 @@ function Navigation( { showClassicMenuConversionNotice, createNavigationMenuPost?.id, handleUpdateMenu, - ] ); + ]); - useEffect( () => { - if ( ! isSelected && ! isInnerBlockSelected ) { + useEffect(() => { + if (!isSelected && !isInnerBlockSelected) { hideNavigationMenuPermissionsNotice(); } - if ( isSelected || isInnerBlockSelected ) { + if (isSelected || isInnerBlockSelected) { if ( ref && - ! navMenuResolvedButMissing && + !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && - ! canUserUpdateNavigationMenu + !canUserUpdateNavigationMenu ) { showNavigationMenuPermissionsNotice( __( @@ -531,9 +531,9 @@ function Navigation( { } if ( - ! ref && + !ref && hasResolvedCanUserCreateNavigationMenus && - ! canUserCreateNavigationMenus + !canUserCreateNavigationMenus ) { showNavigationMenuPermissionsNotice( __( @@ -553,7 +553,7 @@ function Navigation( { hideNavigationMenuPermissionsNotice, showNavigationMenuPermissionsNotice, navMenuResolvedButMissing, - ] ); + ]); const hasManagePermissions = canUserCreateNavigationMenus || canUserUpdateNavigationMenu; @@ -564,19 +564,19 @@ function Navigation( { ); const submenuAccessibilityNotice = - ! showSubmenuIcon && ! openSubmenusOnClick + !showSubmenuIcon && !openSubmenusOnClick ? __( - 'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.' - ) + 'Reduced accessibility. Enable "Open on Click" or "Show arrow" for better keyboard navigation.' + ) : ''; - const isFirstRender = useRef( true ); // Don't speak on first render. - useEffect( () => { - if ( ! isFirstRender.current && submenuAccessibilityNotice ) { - speak( submenuAccessibilityNotice ); + const isFirstRender = useRef(true); // Don't speak on first render. + useEffect(() => { + if (!isFirstRender.current && submenuAccessibilityNotice) { + speak(submenuAccessibilityNotice); } isFirstRender.current = false; - }, [ submenuAccessibilityNotice ] ); + }, [submenuAccessibilityNotice]); const overlayMenuPreviewId = useInstanceId( OverlayMenuPreview, @@ -586,118 +586,118 @@ function Navigation( { const stylingInspectorControls = ( <> - { hasSubmenuIndicatorSetting && ( - - { isResponsive && ( + {hasSubmenuIndicatorSetting && ( + + {isResponsive && ( <> -
- { overlayMenuPreview && ( +
+ {overlayMenuPreview && (
- ) } + )} - setAttributes( { overlayMenu: value } ) + )} + onChange={(value) => + setAttributes({ overlayMenu: value }) } isBlock > - { hasSubmenus && ( + {hasSubmenus && ( <> -

{ __( 'Submenus' ) }

+

{__('Submenus')}

{ - setAttributes( { + checked={openSubmenusOnClick} + onChange={(value) => { + setAttributes({ openSubmenusOnClick: value, - ...( value && { + ...(value && { showSubmenuIcon: true, - } ), // Make sure arrows are shown when we toggle this on. - } ); - } } - label={ __( 'Open on click' ) } + }), // Make sure arrows are shown when we toggle this on. + }); + }} + label={__('Open on click')} /> { - setAttributes( { + checked={showSubmenuIcon} + onChange={(value) => { + setAttributes({ showSubmenuIcon: value, - } ); - } } - disabled={ attributes.openSubmenusOnClick } - label={ __( 'Show arrow' ) } + }); + }} + disabled={attributes.openSubmenusOnClick} + label={__('Show arrow')} /> - { submenuAccessibilityNotice && ( + {submenuAccessibilityNotice && (
- { submenuAccessibilityNotice } + {submenuAccessibilityNotice}
- ) } + )} - ) } + )} - ) } + )} { /* @@ -706,69 +706,69 @@ function Navigation( { * when the block is selected. * */ } ); - const accessibleDescriptionId = `${ clientId }-desc`; + const accessibleDescriptionId = `${clientId}-desc`; const isHiddenByDefault = 'always' === overlayMenu; const isManageMenusButtonDisabled = - ! hasManagePermissions || ! hasResolvedNavigationMenus; + !hasManagePermissions || !hasResolvedNavigationMenus; - if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) { + if (hasUnsavedBlocks && !isCreatingNavigationMenu) { return ( - - { __( 'Unsaved Navigation Menu.' ) } + + {__('Unsaved Navigation Menu.')} - { blockEditingMode === 'default' && stylingInspectorControls } + {blockEditingMode === 'default' && stylingInspectorControls} @@ -777,36 +777,36 @@ function Navigation( { // Show a warning if the selected menu is no longer available. // TODO - the user should be able to select a new one? - if ( ref && isNavigationMenuMissing ) { + if (ref && isNavigationMenuMissing) { return ( - + ); } - if ( isEntityAvailable && hasAlreadyRendered ) { + if (isEntityAvailable && hasAlreadyRendered) { return ( -
+
- { __( 'Block cannot be rendered inside itself.' ) } + {__('Block cannot be rendered inside itself.')}
); @@ -826,117 +826,117 @@ function Navigation( { * */ - if ( isPlaceholder && CustomPlaceholder ) { + if (isPlaceholder && CustomPlaceholder) { return ( - + ); } return ( - - + + - { blockEditingMode === 'default' && stylingInspectorControls } - { blockEditingMode === 'default' && isEntityAvailable && ( + {blockEditingMode === 'default' && stylingInspectorControls} + {blockEditingMode === 'default' && isEntityAvailable && ( - { hasResolvedCanUserUpdateNavigationMenu && + {hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && ( - ) } - { hasResolvedCanUserDeleteNavigationMenu && + )} + {hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && ( { - replaceInnerBlocks( clientId, [] ); + onDelete={() => { + replaceInnerBlocks(clientId, []); showNavigationMenuStatusNotice( __( 'Navigation Menu successfully deleted.' ) ); - } } + }} /> - ) } + )} - ) } + )} - { isLoading && ! isHiddenByDefault && ( + {isLoading && !isHiddenByDefault && (
- ) } + )} - { ( ! isLoading || isHiddenByDefault ) && ( + {(!isLoading || isHiddenByDefault) && ( <> - { isEntityAvailable && ( + {isEntityAvailable && ( - ) } + )} - ) } + )} @@ -948,4 +948,4 @@ export default withColors( { backgroundColor: 'color' }, { overlayBackgroundColor: 'color' }, { overlayTextColor: 'color' } -)( Navigation ); +)(Navigation); From 3ff9b069ec8f642b2765469a37386ac34b0cb304 Mon Sep 17 00:00:00 2001 From: Towfeeq Khan Date: Sat, 21 Dec 2024 22:22:12 +0530 Subject: [PATCH 2/5] Fix: lint issues for packages\block-library\src\navigation\edit\index.js --- package-lock.json | 9 +- package.json | 2 +- .../src/navigation/edit/index.js | 597 +++++++++--------- 3 files changed, 308 insertions(+), 300 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd901baca24a96..803b033ad31319 100644 --- a/package-lock.json +++ b/package-lock.json @@ -156,7 +156,7 @@ "style-loader": "3.2.1", "terser": "5.32.0", "terser-webpack-plugin": "5.3.10", - "typescript": "5.7.2", + "typescript": "5.1.6", "uuid": "9.0.1", "webdriverio": "8.16.20", "webpack": "5.97.0", @@ -45353,11 +45353,10 @@ } }, "node_modules/typescript": { - "version": "5.7.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", - "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", + "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", "dev": true, - "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index 792546d28582fe..3155b71ae59ec3 100644 --- a/package.json +++ b/package.json @@ -165,7 +165,7 @@ "style-loader": "3.2.1", "terser": "5.32.0", "terser-webpack-plugin": "5.3.10", - "typescript": "5.7.2", + "typescript": "5.1.6", "uuid": "9.0.1", "webdriverio": "8.16.20", "webpack": "5.97.0", diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 38ad6b0606b797..e0d978a74396cb 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -1,8 +1,14 @@ +/** + * External dependencies + */ /** * External dependencies */ import clsx from 'clsx'; +/** + * WordPress dependencies + */ /** * WordPress dependencies */ @@ -44,6 +50,9 @@ import { speak } from '@wordpress/a11y'; import { close, Icon } from '@wordpress/icons'; import { useInstanceId } from '@wordpress/compose'; +/** + * Internal dependencies + */ /** * Internal dependencies */ @@ -73,7 +82,7 @@ import AccessibleDescription from './accessible-description'; import AccessibleMenuDescription from './accessible-menu-description'; import { unlock } from '../../lock-unlock'; -function ColorTools({ +function ColorTools( { textColor, setTextColor, backgroundColor, @@ -84,18 +93,18 @@ function ColorTools({ setOverlayBackgroundColor, clientId, navRef, -}) { - const [detectedBackgroundColor, setDetectedBackgroundColor] = useState(); - const [detectedColor, setDetectedColor] = useState(); +} ) { + const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); + const [ detectedColor, setDetectedColor ] = useState(); const [ detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor, ] = useState(); - const [detectedOverlayColor, setDetectedOverlayColor] = useState(); + const [ detectedOverlayColor, setDetectedOverlayColor ] = useState(); // Turn on contrast checker for web only since it's not supported on mobile yet. const enableContrastChecking = Platform.OS === 'web'; - useEffect(() => { - if (!enableContrastChecking) { + useEffect( () => { + if ( ! enableContrastChecking ) { return; } detectColors( @@ -108,14 +117,14 @@ function ColorTools({ '[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]' ); - if (!subMenuElement) { + if ( ! subMenuElement ) { return; } // Only detect submenu overlay colors if they have previously been explicitly set. // This avoids the contrast checker from reporting on inherited submenu colors and // showing the contrast warning twice. - if (overlayTextColor.color || overlayBackgroundColor.color) { + if ( overlayTextColor.color || overlayBackgroundColor.color ) { detectColors( subMenuElement, setDetectedOverlayColor, @@ -127,63 +136,63 @@ function ColorTools({ overlayTextColor.color, overlayBackgroundColor.color, navRef, - ]); + ] ); const colorGradientSettings = useMultipleOriginColorsAndGradients(); - if (!colorGradientSettings.hasColorsOrGradients) { + if ( ! colorGradientSettings.hasColorsOrGradients ) { return null; } return ( <> setTextColor(), }, { colorValue: backgroundColor.color, - label: __('Background'), + label: __( 'Background' ), onColorChange: setBackgroundColor, resetAllFilter: () => setBackgroundColor(), }, { colorValue: overlayTextColor.color, - label: __('Submenu & overlay text'), + label: __( 'Submenu & overlay text' ), onColorChange: setOverlayTextColor, resetAllFilter: () => setOverlayTextColor(), }, { colorValue: overlayBackgroundColor.color, - label: __('Submenu & overlay background'), + label: __( 'Submenu & overlay background' ), onColorChange: setOverlayBackgroundColor, resetAllFilter: () => setOverlayBackgroundColor(), }, - ]} - panelId={clientId} - {...colorGradientSettings} - gradients={[]} + ] } + panelId={ clientId } + { ...colorGradientSettings } + gradients={ [] } disableCustomGradients /> - {enableContrastChecking && ( + { enableContrastChecking && ( <> - )} + ) } ); } -function Navigation({ +function Navigation( { attributes, setAttributes, clientId, @@ -203,7 +212,7 @@ function Navigation({ hasSubmenuIndicatorSetting = true, customPlaceholder: CustomPlaceholder = null, __unstableLayoutClassNames: layoutClassNames, -}) { +} ) { const { openSubmenusOnClick, overlayMenu, @@ -221,14 +230,14 @@ function Navigation({ const ref = attributes.ref; const setRef = useCallback( - (postId) => { - setAttributes({ ref: postId }); + ( postId ) => { + setAttributes( { ref: postId } ); }, - [setAttributes] + [ setAttributes ] ); - const recursionId = `navigationMenu/${ref}`; - const hasAlreadyRendered = useHasRecursion(recursionId); + const recursionId = `navigationMenu/${ ref }`; + const hasAlreadyRendered = useHasRecursion( recursionId ); const blockEditingMode = useBlockEditingMode(); @@ -236,22 +245,22 @@ function Navigation({ // the Select Menu dropdown. const { menus: classicMenus } = useNavigationEntities(); - const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = - useNavigationNotice({ + const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] = + useNavigationNotice( { name: 'block-library/core/navigation/status', - }); + } ); - const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = - useNavigationNotice({ + const [ showClassicMenuConversionNotice, hideClassicMenuConversionNotice ] = + useNavigationNotice( { name: 'block-library/core/navigation/classic-menu-conversion', - }); + } ); const [ showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice, - ] = useNavigationNotice({ + ] = useNavigationNotice( { name: 'block-library/core/navigation/permissions/update', - }); + } ); const { create: createNavigationMenu, @@ -261,10 +270,10 @@ function Navigation({ isPending: isCreatingNavigationMenu, isSuccess: createNavigationMenuIsSuccess, isError: createNavigationMenuIsError, - } = useCreateNavigationMenu(clientId); + } = useCreateNavigationMenu( clientId ); const createUntitledEmptyNavigationMenu = async () => { - await createNavigationMenu(''); + await createNavigationMenu( '' ); }; const { @@ -272,22 +281,22 @@ function Navigation({ uncontrolledInnerBlocks, isInnerBlockSelected, innerBlocks, - } = useInnerBlocks(clientId); + } = useInnerBlocks( clientId ); - const hasSubmenus = !!innerBlocks.find( - (block) => block.name === 'core/navigation-submenu' + const hasSubmenus = !! innerBlocks.find( + ( block ) => block.name === 'core/navigation-submenu' ); const { replaceInnerBlocks, selectBlock, __unstableMarkNextChangeAsNotPersistent, - } = useDispatch(blockEditorStore); + } = useDispatch( blockEditorStore ); - const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = - useState(false); + const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = + useState( false ); - const [overlayMenuPreview, setOverlayMenuPreview] = useState(false); + const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false ); const { hasResolvedNavigationMenus, @@ -300,7 +309,7 @@ function Navigation({ canUserCreateNavigationMenus, isResolvingCanUserCreateNavigationMenus, hasResolvedCanUserCreateNavigationMenus, - } = useNavigationMenu(ref); + } = useNavigationMenu( ref ); const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing; @@ -309,24 +318,24 @@ function Navigation({ convert: convertClassicMenu, status: classicMenuConversionStatus, error: classicMenuConversionError, - } = useConvertClassicToBlockMenu(createNavigationMenu); + } = useConvertClassicToBlockMenu( createNavigationMenu ); const isConvertingClassicMenu = classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING; const handleUpdateMenu = useCallback( - (menuId, options = { focusNavigationBlock: false }) => { + ( menuId, options = { focusNavigationBlock: false } ) => { const { focusNavigationBlock } = options; - setRef(menuId); - if (focusNavigationBlock) { - selectBlock(clientId); + setRef( menuId ); + if ( focusNavigationBlock ) { + selectBlock( clientId ); } }, - [selectBlock, clientId, setRef] + [ selectBlock, clientId, setRef ] ); const isEntityAvailable = - !isNavigationMenuMissing && isNavigationMenuResolved; + ! isNavigationMenuMissing && isNavigationMenuResolved; // If the block has inner blocks, but no menu id, then these blocks are either: // - inserted via a pattern. @@ -334,20 +343,20 @@ function Navigation({ // - from an older version of navigation block added before the block used a wp_navigation entity. // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks, // that automatically saves the menu as an entity when changes are made to the inner blocks. - const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable; + const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable; - const { getNavigationFallbackId } = unlock(useSelect(coreStore)); + const { getNavigationFallbackId } = unlock( useSelect( coreStore ) ); - const navigationFallbackId = !(ref || hasUnsavedBlocks) + const navigationFallbackId = ! ( ref || hasUnsavedBlocks ) ? getNavigationFallbackId() : null; - useEffect(() => { + useEffect( () => { // If: // - there is an existing menu, OR // - there are existing (uncontrolled) inner blocks // ...then don't request a fallback menu. - if (ref || hasUnsavedBlocks || !navigationFallbackId) { + if ( ref || hasUnsavedBlocks || ! navigationFallbackId ) { return; } @@ -358,14 +367,14 @@ function Navigation({ */ __unstableMarkNextChangeAsNotPersistent(); - setRef(navigationFallbackId); + setRef( navigationFallbackId ); }, [ ref, setRef, hasUnsavedBlocks, navigationFallbackId, __unstableMarkNextChangeAsNotPersistent, - ]); + ] ); const navRef = useRef(); @@ -378,12 +387,12 @@ function Navigation({ // - there is no menu creation process in progress. // - there are no uncontrolled blocks. const isPlaceholder = - !ref && - !isCreatingNavigationMenu && - !isConvertingClassicMenu && + ! ref && + ! isCreatingNavigationMenu && + ! isConvertingClassicMenu && hasResolvedNavigationMenus && classicMenus?.length === 0 && - !hasUncontrolledInnerBlocks; + ! hasUncontrolledInnerBlocks; // "loading" state: // - there is a menu creation process in progress. @@ -392,22 +401,22 @@ function Navigation({ // - there is a ref attribute pointing to a Navigation Post // - the Navigation Post isn't available (hasn't resolved) yet. const isLoading = - !hasResolvedNavigationMenus || + ! hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || - !!(ref && !isEntityAvailable && !isConvertingClassicMenu); + !! ( ref && ! isEntityAvailable && ! isConvertingClassicMenu ); const textDecoration = attributes.style?.typography?.textDecoration; const hasBlockOverlay = useSelect( - (select) => - select(blockEditorStore).__unstableHasActiveBlockOverlayActive( + ( select ) => + select( blockEditorStore ).__unstableHasActiveBlockOverlayActive( clientId ), - [clientId] + [ clientId ] ); const isResponsive = 'never' !== overlayMenu; - const blockProps = useBlockProps({ + const blockProps = useBlockProps( { ref: navRef, className: clsx( className, @@ -420,54 +429,54 @@ function Navigation({ 'is-vertical': orientation === 'vertical', 'no-wrap': flexWrap === 'nowrap', 'is-responsive': isResponsive, - 'has-text-color': !!textColor.color || !!textColor?.class, - [getColorClassName('color', textColor?.slug)]: - !!textColor?.slug, + 'has-text-color': !! textColor.color || !! textColor?.class, + [ getColorClassName( 'color', textColor?.slug ) ]: + !! textColor?.slug, 'has-background': - !!backgroundColor.color || backgroundColor.class, - [getColorClassName( + !! backgroundColor.color || backgroundColor.class, + [ getColorClassName( 'background-color', backgroundColor?.slug - )]: !!backgroundColor?.slug, - [`has-text-decoration-${textDecoration}`]: textDecoration, + ) ]: !! backgroundColor?.slug, + [ `has-text-decoration-${ textDecoration }` ]: textDecoration, 'block-editor-block-content-overlay': hasBlockOverlay, }, layoutClassNames ), style: { - color: !textColor?.slug && textColor?.color, - backgroundColor: !backgroundColor?.slug && backgroundColor?.color, + color: ! textColor?.slug && textColor?.color, + backgroundColor: ! backgroundColor?.slug && backgroundColor?.color, }, - }); + } ); - const onSelectClassicMenu = async (classicMenu) => { - return convertClassicMenu(classicMenu.id, classicMenu.name, 'draft'); + const onSelectClassicMenu = async ( classicMenu ) => { + return convertClassicMenu( classicMenu.id, classicMenu.name, 'draft' ); }; - const onSelectNavigationMenu = (menuId) => { - handleUpdateMenu(menuId); + const onSelectNavigationMenu = ( menuId ) => { + handleUpdateMenu( menuId ); }; - useEffect(() => { + useEffect( () => { hideNavigationMenuStatusNotice(); - if (isCreatingNavigationMenu) { - speak(__(`Creating Navigation Menu.`)); + if ( isCreatingNavigationMenu ) { + speak( __( `Creating Navigation Menu.` ) ); } - if (createNavigationMenuIsSuccess) { - handleUpdateMenu(createNavigationMenuPost?.id, { + if ( createNavigationMenuIsSuccess ) { + handleUpdateMenu( createNavigationMenuPost?.id, { focusNavigationBlock: true, - }); + } ); showNavigationMenuStatusNotice( - __(`Navigation Menu successfully created.`) + __( `Navigation Menu successfully created.` ) ); } - if (createNavigationMenuIsError) { + if ( createNavigationMenuIsError ) { showNavigationMenuStatusNotice( - __('Failed to create Navigation Menu.') + __( 'Failed to create Navigation Menu.' ) ); } }, [ @@ -480,26 +489,26 @@ function Navigation({ handleUpdateMenu, hideNavigationMenuStatusNotice, showNavigationMenuStatusNotice, - ]); + ] ); - useEffect(() => { + useEffect( () => { hideClassicMenuConversionNotice(); - if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING) { - speak(__('Classic menu importing.')); + if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING ) { + speak( __( 'Classic menu importing.' ) ); } - if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS) { + if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS ) { showClassicMenuConversionNotice( - __('Classic menu imported successfully.') + __( 'Classic menu imported successfully.' ) ); - handleUpdateMenu(createNavigationMenuPost?.id, { + handleUpdateMenu( createNavigationMenuPost?.id, { focusNavigationBlock: true, - }); + } ); } - if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR) { + if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR ) { showClassicMenuConversionNotice( - __('Classic menu import failed.') + __( 'Classic menu import failed.' ) ); } }, [ @@ -509,19 +518,19 @@ function Navigation({ showClassicMenuConversionNotice, createNavigationMenuPost?.id, handleUpdateMenu, - ]); + ] ); - useEffect(() => { - if (!isSelected && !isInnerBlockSelected) { + useEffect( () => { + if ( ! isSelected && ! isInnerBlockSelected ) { hideNavigationMenuPermissionsNotice(); } - if (isSelected || isInnerBlockSelected) { + if ( isSelected || isInnerBlockSelected ) { if ( ref && - !navMenuResolvedButMissing && + ! navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && - !canUserUpdateNavigationMenu + ! canUserUpdateNavigationMenu ) { showNavigationMenuPermissionsNotice( __( @@ -531,9 +540,9 @@ function Navigation({ } if ( - !ref && + ! ref && hasResolvedCanUserCreateNavigationMenus && - !canUserCreateNavigationMenus + ! canUserCreateNavigationMenus ) { showNavigationMenuPermissionsNotice( __( @@ -553,7 +562,7 @@ function Navigation({ hideNavigationMenuPermissionsNotice, showNavigationMenuPermissionsNotice, navMenuResolvedButMissing, - ]); + ] ); const hasManagePermissions = canUserCreateNavigationMenus || canUserUpdateNavigationMenu; @@ -564,19 +573,19 @@ function Navigation({ ); const submenuAccessibilityNotice = - !showSubmenuIcon && !openSubmenusOnClick + ! showSubmenuIcon && ! openSubmenusOnClick ? __( - 'Reduced accessibility. Enable "Open on Click" or "Show arrow" for better keyboard navigation.' - ) + 'Reduced accessibility. Enable "Open on Click" or "Show arrow" for better keyboard navigation.' + ) : ''; - const isFirstRender = useRef(true); // Don't speak on first render. - useEffect(() => { - if (!isFirstRender.current && submenuAccessibilityNotice) { - speak(submenuAccessibilityNotice); + const isFirstRender = useRef( true ); // Don't speak on first render. + useEffect( () => { + if ( ! isFirstRender.current && submenuAccessibilityNotice ) { + speak( submenuAccessibilityNotice ); } isFirstRender.current = false; - }, [submenuAccessibilityNotice]); + }, [ submenuAccessibilityNotice ] ); const overlayMenuPreviewId = useInstanceId( OverlayMenuPreview, @@ -586,118 +595,118 @@ function Navigation({ const stylingInspectorControls = ( <> - {hasSubmenuIndicatorSetting && ( - - {isResponsive && ( + { hasSubmenuIndicatorSetting && ( + + { isResponsive && ( <> -
- {overlayMenuPreview && ( +
+ { overlayMenuPreview && (
- )} + ) } - setAttributes({ overlayMenu: value }) + ) } + onChange={ ( value ) => + setAttributes( { overlayMenu: value } ) } isBlock > - {hasSubmenus && ( + { hasSubmenus && ( <> -

{__('Submenus')}

+

{ __( 'Submenus' ) }

{ - setAttributes({ + checked={ openSubmenusOnClick } + onChange={ ( value ) => { + setAttributes( { openSubmenusOnClick: value, - ...(value && { + ...( value && { showSubmenuIcon: true, - }), // Make sure arrows are shown when we toggle this on. - }); - }} - label={__('Open on click')} + } ), // Make sure arrows are shown when we toggle this on. + } ); + } } + label={ __( 'Open on click' ) } /> { - setAttributes({ + checked={ showSubmenuIcon } + onChange={ ( value ) => { + setAttributes( { showSubmenuIcon: value, - }); - }} - disabled={attributes.openSubmenusOnClick} - label={__('Show arrow')} + } ); + } } + disabled={ attributes.openSubmenusOnClick } + label={ __( 'Show arrow' ) } /> - {submenuAccessibilityNotice && ( + { submenuAccessibilityNotice && (
- {submenuAccessibilityNotice} + { submenuAccessibilityNotice }
- )} + ) } - )} + ) } - )} + ) } { /* @@ -706,69 +715,69 @@ function Navigation({ * when the block is selected. * */ } ); - const accessibleDescriptionId = `${clientId}-desc`; + const accessibleDescriptionId = `${ clientId }-desc`; const isHiddenByDefault = 'always' === overlayMenu; const isManageMenusButtonDisabled = - !hasManagePermissions || !hasResolvedNavigationMenus; + ! hasManagePermissions || ! hasResolvedNavigationMenus; - if (hasUnsavedBlocks && !isCreatingNavigationMenu) { + if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) { return ( - - {__('Unsaved Navigation Menu.')} + + { __( 'Unsaved Navigation Menu.' ) } - {blockEditingMode === 'default' && stylingInspectorControls} + { blockEditingMode === 'default' && stylingInspectorControls } @@ -777,36 +786,36 @@ function Navigation({ // Show a warning if the selected menu is no longer available. // TODO - the user should be able to select a new one? - if (ref && isNavigationMenuMissing) { + if ( ref && isNavigationMenuMissing ) { return ( - + ); } - if (isEntityAvailable && hasAlreadyRendered) { + if ( isEntityAvailable && hasAlreadyRendered ) { return ( -
+
- {__('Block cannot be rendered inside itself.')} + { __( 'Block cannot be rendered inside itself.' ) }
); @@ -826,117 +835,117 @@ function Navigation({ * */ - if (isPlaceholder && CustomPlaceholder) { + if ( isPlaceholder && CustomPlaceholder ) { return ( - + ); } return ( - - + + - {blockEditingMode === 'default' && stylingInspectorControls} - {blockEditingMode === 'default' && isEntityAvailable && ( + { blockEditingMode === 'default' && stylingInspectorControls } + { blockEditingMode === 'default' && isEntityAvailable && ( - {hasResolvedCanUserUpdateNavigationMenu && + { hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && ( - )} - {hasResolvedCanUserDeleteNavigationMenu && + ) } + { hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && ( { - replaceInnerBlocks(clientId, []); + onDelete={ () => { + replaceInnerBlocks( clientId, [] ); showNavigationMenuStatusNotice( __( 'Navigation Menu successfully deleted.' ) ); - }} + } } /> - )} + ) } - )} + ) } - {isLoading && !isHiddenByDefault && ( + { isLoading && ! isHiddenByDefault && (
- )} + ) } - {(!isLoading || isHiddenByDefault) && ( + { ( ! isLoading || isHiddenByDefault ) && ( <> - {isEntityAvailable && ( + { isEntityAvailable && ( - )} + ) } - )} + ) } @@ -948,4 +957,4 @@ export default withColors( { backgroundColor: 'color' }, { overlayBackgroundColor: 'color' }, { overlayTextColor: 'color' } -)(Navigation); +)( Navigation ); From 882dcd476f5376ed8124e2ae7444348aaade2796 Mon Sep 17 00:00:00 2001 From: Towfeeq Khan Date: Sat, 21 Dec 2024 22:29:29 +0530 Subject: [PATCH 3/5] Revert "git push origin fix-simplify-warning-message-#68181Fix: lint issues for packages\block-library\src\navigation\edit\index.js" This reverts commit 3ff9b069ec8f642b2765469a37386ac34b0cb304. --- package-lock.json | 9 +- package.json | 2 +- .../src/navigation/edit/index.js | 597 +++++++++--------- 3 files changed, 300 insertions(+), 308 deletions(-) diff --git a/package-lock.json b/package-lock.json index 803b033ad31319..bd901baca24a96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -156,7 +156,7 @@ "style-loader": "3.2.1", "terser": "5.32.0", "terser-webpack-plugin": "5.3.10", - "typescript": "5.1.6", + "typescript": "5.7.2", "uuid": "9.0.1", "webdriverio": "8.16.20", "webpack": "5.97.0", @@ -45353,10 +45353,11 @@ } }, "node_modules/typescript": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", - "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", + "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", "dev": true, + "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index 3155b71ae59ec3..792546d28582fe 100644 --- a/package.json +++ b/package.json @@ -165,7 +165,7 @@ "style-loader": "3.2.1", "terser": "5.32.0", "terser-webpack-plugin": "5.3.10", - "typescript": "5.1.6", + "typescript": "5.7.2", "uuid": "9.0.1", "webdriverio": "8.16.20", "webpack": "5.97.0", diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index e0d978a74396cb..38ad6b0606b797 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -1,14 +1,8 @@ -/** - * External dependencies - */ /** * External dependencies */ import clsx from 'clsx'; -/** - * WordPress dependencies - */ /** * WordPress dependencies */ @@ -50,9 +44,6 @@ import { speak } from '@wordpress/a11y'; import { close, Icon } from '@wordpress/icons'; import { useInstanceId } from '@wordpress/compose'; -/** - * Internal dependencies - */ /** * Internal dependencies */ @@ -82,7 +73,7 @@ import AccessibleDescription from './accessible-description'; import AccessibleMenuDescription from './accessible-menu-description'; import { unlock } from '../../lock-unlock'; -function ColorTools( { +function ColorTools({ textColor, setTextColor, backgroundColor, @@ -93,18 +84,18 @@ function ColorTools( { setOverlayBackgroundColor, clientId, navRef, -} ) { - const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); - const [ detectedColor, setDetectedColor ] = useState(); +}) { + const [detectedBackgroundColor, setDetectedBackgroundColor] = useState(); + const [detectedColor, setDetectedColor] = useState(); const [ detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor, ] = useState(); - const [ detectedOverlayColor, setDetectedOverlayColor ] = useState(); + const [detectedOverlayColor, setDetectedOverlayColor] = useState(); // Turn on contrast checker for web only since it's not supported on mobile yet. const enableContrastChecking = Platform.OS === 'web'; - useEffect( () => { - if ( ! enableContrastChecking ) { + useEffect(() => { + if (!enableContrastChecking) { return; } detectColors( @@ -117,14 +108,14 @@ function ColorTools( { '[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]' ); - if ( ! subMenuElement ) { + if (!subMenuElement) { return; } // Only detect submenu overlay colors if they have previously been explicitly set. // This avoids the contrast checker from reporting on inherited submenu colors and // showing the contrast warning twice. - if ( overlayTextColor.color || overlayBackgroundColor.color ) { + if (overlayTextColor.color || overlayBackgroundColor.color) { detectColors( subMenuElement, setDetectedOverlayColor, @@ -136,63 +127,63 @@ function ColorTools( { overlayTextColor.color, overlayBackgroundColor.color, navRef, - ] ); + ]); const colorGradientSettings = useMultipleOriginColorsAndGradients(); - if ( ! colorGradientSettings.hasColorsOrGradients ) { + if (!colorGradientSettings.hasColorsOrGradients) { return null; } return ( <> setTextColor(), }, { colorValue: backgroundColor.color, - label: __( 'Background' ), + label: __('Background'), onColorChange: setBackgroundColor, resetAllFilter: () => setBackgroundColor(), }, { colorValue: overlayTextColor.color, - label: __( 'Submenu & overlay text' ), + label: __('Submenu & overlay text'), onColorChange: setOverlayTextColor, resetAllFilter: () => setOverlayTextColor(), }, { colorValue: overlayBackgroundColor.color, - label: __( 'Submenu & overlay background' ), + label: __('Submenu & overlay background'), onColorChange: setOverlayBackgroundColor, resetAllFilter: () => setOverlayBackgroundColor(), }, - ] } - panelId={ clientId } - { ...colorGradientSettings } - gradients={ [] } + ]} + panelId={clientId} + {...colorGradientSettings} + gradients={[]} disableCustomGradients /> - { enableContrastChecking && ( + {enableContrastChecking && ( <> - ) } + )} ); } -function Navigation( { +function Navigation({ attributes, setAttributes, clientId, @@ -212,7 +203,7 @@ function Navigation( { hasSubmenuIndicatorSetting = true, customPlaceholder: CustomPlaceholder = null, __unstableLayoutClassNames: layoutClassNames, -} ) { +}) { const { openSubmenusOnClick, overlayMenu, @@ -230,14 +221,14 @@ function Navigation( { const ref = attributes.ref; const setRef = useCallback( - ( postId ) => { - setAttributes( { ref: postId } ); + (postId) => { + setAttributes({ ref: postId }); }, - [ setAttributes ] + [setAttributes] ); - const recursionId = `navigationMenu/${ ref }`; - const hasAlreadyRendered = useHasRecursion( recursionId ); + const recursionId = `navigationMenu/${ref}`; + const hasAlreadyRendered = useHasRecursion(recursionId); const blockEditingMode = useBlockEditingMode(); @@ -245,22 +236,22 @@ function Navigation( { // the Select Menu dropdown. const { menus: classicMenus } = useNavigationEntities(); - const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] = - useNavigationNotice( { + const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = + useNavigationNotice({ name: 'block-library/core/navigation/status', - } ); + }); - const [ showClassicMenuConversionNotice, hideClassicMenuConversionNotice ] = - useNavigationNotice( { + const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = + useNavigationNotice({ name: 'block-library/core/navigation/classic-menu-conversion', - } ); + }); const [ showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice, - ] = useNavigationNotice( { + ] = useNavigationNotice({ name: 'block-library/core/navigation/permissions/update', - } ); + }); const { create: createNavigationMenu, @@ -270,10 +261,10 @@ function Navigation( { isPending: isCreatingNavigationMenu, isSuccess: createNavigationMenuIsSuccess, isError: createNavigationMenuIsError, - } = useCreateNavigationMenu( clientId ); + } = useCreateNavigationMenu(clientId); const createUntitledEmptyNavigationMenu = async () => { - await createNavigationMenu( '' ); + await createNavigationMenu(''); }; const { @@ -281,22 +272,22 @@ function Navigation( { uncontrolledInnerBlocks, isInnerBlockSelected, innerBlocks, - } = useInnerBlocks( clientId ); + } = useInnerBlocks(clientId); - const hasSubmenus = !! innerBlocks.find( - ( block ) => block.name === 'core/navigation-submenu' + const hasSubmenus = !!innerBlocks.find( + (block) => block.name === 'core/navigation-submenu' ); const { replaceInnerBlocks, selectBlock, __unstableMarkNextChangeAsNotPersistent, - } = useDispatch( blockEditorStore ); + } = useDispatch(blockEditorStore); - const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = - useState( false ); + const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = + useState(false); - const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false ); + const [overlayMenuPreview, setOverlayMenuPreview] = useState(false); const { hasResolvedNavigationMenus, @@ -309,7 +300,7 @@ function Navigation( { canUserCreateNavigationMenus, isResolvingCanUserCreateNavigationMenus, hasResolvedCanUserCreateNavigationMenus, - } = useNavigationMenu( ref ); + } = useNavigationMenu(ref); const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing; @@ -318,24 +309,24 @@ function Navigation( { convert: convertClassicMenu, status: classicMenuConversionStatus, error: classicMenuConversionError, - } = useConvertClassicToBlockMenu( createNavigationMenu ); + } = useConvertClassicToBlockMenu(createNavigationMenu); const isConvertingClassicMenu = classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING; const handleUpdateMenu = useCallback( - ( menuId, options = { focusNavigationBlock: false } ) => { + (menuId, options = { focusNavigationBlock: false }) => { const { focusNavigationBlock } = options; - setRef( menuId ); - if ( focusNavigationBlock ) { - selectBlock( clientId ); + setRef(menuId); + if (focusNavigationBlock) { + selectBlock(clientId); } }, - [ selectBlock, clientId, setRef ] + [selectBlock, clientId, setRef] ); const isEntityAvailable = - ! isNavigationMenuMissing && isNavigationMenuResolved; + !isNavigationMenuMissing && isNavigationMenuResolved; // If the block has inner blocks, but no menu id, then these blocks are either: // - inserted via a pattern. @@ -343,20 +334,20 @@ function Navigation( { // - from an older version of navigation block added before the block used a wp_navigation entity. // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks, // that automatically saves the menu as an entity when changes are made to the inner blocks. - const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable; + const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable; - const { getNavigationFallbackId } = unlock( useSelect( coreStore ) ); + const { getNavigationFallbackId } = unlock(useSelect(coreStore)); - const navigationFallbackId = ! ( ref || hasUnsavedBlocks ) + const navigationFallbackId = !(ref || hasUnsavedBlocks) ? getNavigationFallbackId() : null; - useEffect( () => { + useEffect(() => { // If: // - there is an existing menu, OR // - there are existing (uncontrolled) inner blocks // ...then don't request a fallback menu. - if ( ref || hasUnsavedBlocks || ! navigationFallbackId ) { + if (ref || hasUnsavedBlocks || !navigationFallbackId) { return; } @@ -367,14 +358,14 @@ function Navigation( { */ __unstableMarkNextChangeAsNotPersistent(); - setRef( navigationFallbackId ); + setRef(navigationFallbackId); }, [ ref, setRef, hasUnsavedBlocks, navigationFallbackId, __unstableMarkNextChangeAsNotPersistent, - ] ); + ]); const navRef = useRef(); @@ -387,12 +378,12 @@ function Navigation( { // - there is no menu creation process in progress. // - there are no uncontrolled blocks. const isPlaceholder = - ! ref && - ! isCreatingNavigationMenu && - ! isConvertingClassicMenu && + !ref && + !isCreatingNavigationMenu && + !isConvertingClassicMenu && hasResolvedNavigationMenus && classicMenus?.length === 0 && - ! hasUncontrolledInnerBlocks; + !hasUncontrolledInnerBlocks; // "loading" state: // - there is a menu creation process in progress. @@ -401,22 +392,22 @@ function Navigation( { // - there is a ref attribute pointing to a Navigation Post // - the Navigation Post isn't available (hasn't resolved) yet. const isLoading = - ! hasResolvedNavigationMenus || + !hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || - !! ( ref && ! isEntityAvailable && ! isConvertingClassicMenu ); + !!(ref && !isEntityAvailable && !isConvertingClassicMenu); const textDecoration = attributes.style?.typography?.textDecoration; const hasBlockOverlay = useSelect( - ( select ) => - select( blockEditorStore ).__unstableHasActiveBlockOverlayActive( + (select) => + select(blockEditorStore).__unstableHasActiveBlockOverlayActive( clientId ), - [ clientId ] + [clientId] ); const isResponsive = 'never' !== overlayMenu; - const blockProps = useBlockProps( { + const blockProps = useBlockProps({ ref: navRef, className: clsx( className, @@ -429,54 +420,54 @@ function Navigation( { 'is-vertical': orientation === 'vertical', 'no-wrap': flexWrap === 'nowrap', 'is-responsive': isResponsive, - 'has-text-color': !! textColor.color || !! textColor?.class, - [ getColorClassName( 'color', textColor?.slug ) ]: - !! textColor?.slug, + 'has-text-color': !!textColor.color || !!textColor?.class, + [getColorClassName('color', textColor?.slug)]: + !!textColor?.slug, 'has-background': - !! backgroundColor.color || backgroundColor.class, - [ getColorClassName( + !!backgroundColor.color || backgroundColor.class, + [getColorClassName( 'background-color', backgroundColor?.slug - ) ]: !! backgroundColor?.slug, - [ `has-text-decoration-${ textDecoration }` ]: textDecoration, + )]: !!backgroundColor?.slug, + [`has-text-decoration-${textDecoration}`]: textDecoration, 'block-editor-block-content-overlay': hasBlockOverlay, }, layoutClassNames ), style: { - color: ! textColor?.slug && textColor?.color, - backgroundColor: ! backgroundColor?.slug && backgroundColor?.color, + color: !textColor?.slug && textColor?.color, + backgroundColor: !backgroundColor?.slug && backgroundColor?.color, }, - } ); + }); - const onSelectClassicMenu = async ( classicMenu ) => { - return convertClassicMenu( classicMenu.id, classicMenu.name, 'draft' ); + const onSelectClassicMenu = async (classicMenu) => { + return convertClassicMenu(classicMenu.id, classicMenu.name, 'draft'); }; - const onSelectNavigationMenu = ( menuId ) => { - handleUpdateMenu( menuId ); + const onSelectNavigationMenu = (menuId) => { + handleUpdateMenu(menuId); }; - useEffect( () => { + useEffect(() => { hideNavigationMenuStatusNotice(); - if ( isCreatingNavigationMenu ) { - speak( __( `Creating Navigation Menu.` ) ); + if (isCreatingNavigationMenu) { + speak(__(`Creating Navigation Menu.`)); } - if ( createNavigationMenuIsSuccess ) { - handleUpdateMenu( createNavigationMenuPost?.id, { + if (createNavigationMenuIsSuccess) { + handleUpdateMenu(createNavigationMenuPost?.id, { focusNavigationBlock: true, - } ); + }); showNavigationMenuStatusNotice( - __( `Navigation Menu successfully created.` ) + __(`Navigation Menu successfully created.`) ); } - if ( createNavigationMenuIsError ) { + if (createNavigationMenuIsError) { showNavigationMenuStatusNotice( - __( 'Failed to create Navigation Menu.' ) + __('Failed to create Navigation Menu.') ); } }, [ @@ -489,26 +480,26 @@ function Navigation( { handleUpdateMenu, hideNavigationMenuStatusNotice, showNavigationMenuStatusNotice, - ] ); + ]); - useEffect( () => { + useEffect(() => { hideClassicMenuConversionNotice(); - if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING ) { - speak( __( 'Classic menu importing.' ) ); + if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING) { + speak(__('Classic menu importing.')); } - if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS ) { + if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS) { showClassicMenuConversionNotice( - __( 'Classic menu imported successfully.' ) + __('Classic menu imported successfully.') ); - handleUpdateMenu( createNavigationMenuPost?.id, { + handleUpdateMenu(createNavigationMenuPost?.id, { focusNavigationBlock: true, - } ); + }); } - if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR ) { + if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR) { showClassicMenuConversionNotice( - __( 'Classic menu import failed.' ) + __('Classic menu import failed.') ); } }, [ @@ -518,19 +509,19 @@ function Navigation( { showClassicMenuConversionNotice, createNavigationMenuPost?.id, handleUpdateMenu, - ] ); + ]); - useEffect( () => { - if ( ! isSelected && ! isInnerBlockSelected ) { + useEffect(() => { + if (!isSelected && !isInnerBlockSelected) { hideNavigationMenuPermissionsNotice(); } - if ( isSelected || isInnerBlockSelected ) { + if (isSelected || isInnerBlockSelected) { if ( ref && - ! navMenuResolvedButMissing && + !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && - ! canUserUpdateNavigationMenu + !canUserUpdateNavigationMenu ) { showNavigationMenuPermissionsNotice( __( @@ -540,9 +531,9 @@ function Navigation( { } if ( - ! ref && + !ref && hasResolvedCanUserCreateNavigationMenus && - ! canUserCreateNavigationMenus + !canUserCreateNavigationMenus ) { showNavigationMenuPermissionsNotice( __( @@ -562,7 +553,7 @@ function Navigation( { hideNavigationMenuPermissionsNotice, showNavigationMenuPermissionsNotice, navMenuResolvedButMissing, - ] ); + ]); const hasManagePermissions = canUserCreateNavigationMenus || canUserUpdateNavigationMenu; @@ -573,19 +564,19 @@ function Navigation( { ); const submenuAccessibilityNotice = - ! showSubmenuIcon && ! openSubmenusOnClick + !showSubmenuIcon && !openSubmenusOnClick ? __( - 'Reduced accessibility. Enable "Open on Click" or "Show arrow" for better keyboard navigation.' - ) + 'Reduced accessibility. Enable "Open on Click" or "Show arrow" for better keyboard navigation.' + ) : ''; - const isFirstRender = useRef( true ); // Don't speak on first render. - useEffect( () => { - if ( ! isFirstRender.current && submenuAccessibilityNotice ) { - speak( submenuAccessibilityNotice ); + const isFirstRender = useRef(true); // Don't speak on first render. + useEffect(() => { + if (!isFirstRender.current && submenuAccessibilityNotice) { + speak(submenuAccessibilityNotice); } isFirstRender.current = false; - }, [ submenuAccessibilityNotice ] ); + }, [submenuAccessibilityNotice]); const overlayMenuPreviewId = useInstanceId( OverlayMenuPreview, @@ -595,118 +586,118 @@ function Navigation( { const stylingInspectorControls = ( <> - { hasSubmenuIndicatorSetting && ( - - { isResponsive && ( + {hasSubmenuIndicatorSetting && ( + + {isResponsive && ( <> -
- { overlayMenuPreview && ( +
+ {overlayMenuPreview && (
- ) } + )} - setAttributes( { overlayMenu: value } ) + )} + onChange={(value) => + setAttributes({ overlayMenu: value }) } isBlock > - { hasSubmenus && ( + {hasSubmenus && ( <> -

{ __( 'Submenus' ) }

+

{__('Submenus')}

{ - setAttributes( { + checked={openSubmenusOnClick} + onChange={(value) => { + setAttributes({ openSubmenusOnClick: value, - ...( value && { + ...(value && { showSubmenuIcon: true, - } ), // Make sure arrows are shown when we toggle this on. - } ); - } } - label={ __( 'Open on click' ) } + }), // Make sure arrows are shown when we toggle this on. + }); + }} + label={__('Open on click')} /> { - setAttributes( { + checked={showSubmenuIcon} + onChange={(value) => { + setAttributes({ showSubmenuIcon: value, - } ); - } } - disabled={ attributes.openSubmenusOnClick } - label={ __( 'Show arrow' ) } + }); + }} + disabled={attributes.openSubmenusOnClick} + label={__('Show arrow')} /> - { submenuAccessibilityNotice && ( + {submenuAccessibilityNotice && (
- { submenuAccessibilityNotice } + {submenuAccessibilityNotice}
- ) } + )} - ) } + )} - ) } + )} { /* @@ -715,69 +706,69 @@ function Navigation( { * when the block is selected. * */ } ); - const accessibleDescriptionId = `${ clientId }-desc`; + const accessibleDescriptionId = `${clientId}-desc`; const isHiddenByDefault = 'always' === overlayMenu; const isManageMenusButtonDisabled = - ! hasManagePermissions || ! hasResolvedNavigationMenus; + !hasManagePermissions || !hasResolvedNavigationMenus; - if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) { + if (hasUnsavedBlocks && !isCreatingNavigationMenu) { return ( - - { __( 'Unsaved Navigation Menu.' ) } + + {__('Unsaved Navigation Menu.')} - { blockEditingMode === 'default' && stylingInspectorControls } + {blockEditingMode === 'default' && stylingInspectorControls} @@ -786,36 +777,36 @@ function Navigation( { // Show a warning if the selected menu is no longer available. // TODO - the user should be able to select a new one? - if ( ref && isNavigationMenuMissing ) { + if (ref && isNavigationMenuMissing) { return ( - + ); } - if ( isEntityAvailable && hasAlreadyRendered ) { + if (isEntityAvailable && hasAlreadyRendered) { return ( -
+
- { __( 'Block cannot be rendered inside itself.' ) } + {__('Block cannot be rendered inside itself.')}
); @@ -835,117 +826,117 @@ function Navigation( { * */ - if ( isPlaceholder && CustomPlaceholder ) { + if (isPlaceholder && CustomPlaceholder) { return ( - + ); } return ( - - + + - { blockEditingMode === 'default' && stylingInspectorControls } - { blockEditingMode === 'default' && isEntityAvailable && ( + {blockEditingMode === 'default' && stylingInspectorControls} + {blockEditingMode === 'default' && isEntityAvailable && ( - { hasResolvedCanUserUpdateNavigationMenu && + {hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && ( - ) } - { hasResolvedCanUserDeleteNavigationMenu && + )} + {hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && ( { - replaceInnerBlocks( clientId, [] ); + onDelete={() => { + replaceInnerBlocks(clientId, []); showNavigationMenuStatusNotice( __( 'Navigation Menu successfully deleted.' ) ); - } } + }} /> - ) } + )} - ) } + )} - { isLoading && ! isHiddenByDefault && ( + {isLoading && !isHiddenByDefault && (
- ) } + )} - { ( ! isLoading || isHiddenByDefault ) && ( + {(!isLoading || isHiddenByDefault) && ( <> - { isEntityAvailable && ( + {isEntityAvailable && ( - ) } + )} - ) } + )} @@ -957,4 +948,4 @@ export default withColors( { backgroundColor: 'color' }, { overlayBackgroundColor: 'color' }, { overlayTextColor: 'color' } -)( Navigation ); +)(Navigation); From 95eb0130ed660c7bc29a7f39fb6f71fb2f08352f Mon Sep 17 00:00:00 2001 From: Towfeeq Khan Date: Tue, 24 Dec 2024 18:56:37 +0530 Subject: [PATCH 4/5] Simplify warning message in Navigation block settings. Fixes #68181 --- package-lock.json | 3 +++ package.json | 5 ++++- packages/block-library/src/navigation/edit/index.js | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd901baca24a96..aeed9ca98c4dcd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,9 @@ "workspaces": [ "packages/*" ], + "dependencies": { + "eslint": "8.3.0" + }, "devDependencies": { "@actions/core": "1.9.1", "@actions/github": "5.0.0", diff --git a/package.json b/package.json index 792546d28582fe..b7c3631228a1e2 100644 --- a/package.json +++ b/package.json @@ -297,5 +297,8 @@ }, "workspaces": [ "packages/*" - ] + ], + "dependencies": { + "eslint": "8.3.0" + } } diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index ae7dd60bd0c5ba..87066b81ea1e4f 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -566,7 +566,7 @@ function Navigation( { const submenuAccessibilityNotice = ! showSubmenuIcon && ! openSubmenusOnClick ? __( - 'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.' + 'Reduced accessibility. Enable "Open on Click" or "Show arrow" for better keyboard navigation.' ) : ''; From af8d0c4e4c146c6d86f02476dae0d1696ca0eb75 Mon Sep 17 00:00:00 2001 From: Towfeeq Khan Date: Tue, 24 Dec 2024 19:52:02 +0530 Subject: [PATCH 5/5] edit package.json package-lock.json --- package-lock.json | 242 +++++++++++++++------------------------------- package.json | 4 +- 2 files changed, 78 insertions(+), 168 deletions(-) diff --git a/package-lock.json b/package-lock.json index a922fc48737fa0..b3632a1be21090 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@babel/runtime-corejs3": "7.25.7", "@babel/traverse": "7.25.7", "@emotion/babel-plugin": "11.11.0", + "@emotion/is-prop-valid": "1.2.2", "@emotion/jest": "11.7.1", "@emotion/native": "11.0.0", "@geometricpanda/storybook-addon-badges": "2.0.5", @@ -90,7 +91,6 @@ "equivalent-key-map": "0.2.2", "esbuild": "0.18.20", "escape-html": "1.0.3", - "eslint": "8.3.0", "eslint-import-resolver-node": "0.3.4", "eslint-plugin-eslint-comments": "3.1.2", "eslint-plugin-import": "2.25.2", @@ -143,7 +143,7 @@ "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", - "rtlcss": "4.0.0", + "rtlcss": "4.3.0", "sass": "1.50.1", "sass-loader": "16.0.3", "semver": "7.5.4", @@ -4468,6 +4468,19 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, "node_modules/@emotion/jest": { "version": "11.7.1", "resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz", @@ -4619,19 +4632,6 @@ } } }, - "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", - "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", - "dependencies": { - "@emotion/memoize": "^0.8.1" - } - }, - "node_modules/@emotion/styled/node_modules/@emotion/memoize": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" - }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -17514,43 +17514,6 @@ "integrity": "sha512-LEeSAWeh2Gfa2FtlQE1shxQ8zi5F9GHarrGKz08TMdODD5T4eH6BMsvtnhbWZ+XQn+Gb6om/917ucvRu7l7ukw==", "dev": true }, - "node_modules/autoprefixer": { - "version": "10.4.14", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", - "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - } - ], - "dependencies": { - "browserslist": "^4.21.5", - "caniuse-lite": "^1.0.30001464", - "fraction.js": "^4.2.0", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/autoprefixer/node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, "node_modules/autosize": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz", @@ -18009,27 +17972,6 @@ "@babel/core": "^7.0.0" } }, - "node_modules/babel-runtime": { - "version": "6.25.0", - "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.25.0.tgz", - "integrity": "sha512-zeCYxDePWYAT/DfmQWIHsMSFW2vv45UIwIAMjGvQVsTd47RwsiRH0uK1yzyWZ7LDBKdhnGDPM6NYEO5CZyhPrg==", - "dependencies": { - "core-js": "^2.4.0", - "regenerator-runtime": "^0.10.0" - } - }, - "node_modules/babel-runtime/node_modules/core-js": { - "version": "2.6.12", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", - "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", - "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", - "hasInstallScript": true - }, - "node_modules/babel-runtime/node_modules/regenerator-runtime": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", - "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w==" - }, "node_modules/bail": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz", @@ -25666,6 +25608,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "dev": true, "engines": { "node": "*" }, @@ -41249,14 +41192,14 @@ "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==" }, "node_modules/rtlcss": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.0.0.tgz", - "integrity": "sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==", - "dev": true, + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.3.0.tgz", + "integrity": "sha512-FI+pHEn7Wc4NqKXMXFM+VAYKEj/mRIcW4h24YVwVtyjI+EqGrLc2Hx/Ny0lrZ21cBWU2goLy36eqMcNj3AQJig==", + "license": "MIT", "dependencies": { "escalade": "^3.1.1", "picocolors": "^1.0.0", - "postcss": "^8.4.6", + "postcss": "^8.4.21", "strip-json-comments": "^3.1.1" }, "bin": { @@ -41266,96 +41209,10 @@ "node": ">=12.0.0" } }, - "node_modules/rtlcss-webpack-plugin": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/rtlcss-webpack-plugin/-/rtlcss-webpack-plugin-4.0.7.tgz", - "integrity": "sha512-ouSbJtgcLBBQIsMgarxsDnfgRqm/AS4BKls/mz/Xb6HSl+PdEzefTR+Wz5uWQx4odoX0g261Z7yb3QBz0MTm0g==", - "dependencies": { - "babel-runtime": "~6.25.0", - "rtlcss": "^3.5.0" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/find-up": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", - "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", - "dependencies": { - "locate-path": "^6.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/locate-path": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", - "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", - "dependencies": { - "p-locate": "^5.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/p-locate": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", - "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", - "dependencies": { - "p-limit": "^3.0.2" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "engines": { - "node": ">=8" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/rtlcss": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz", - "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==", - "dependencies": { - "find-up": "^5.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.3.11", - "strip-json-comments": "^3.1.1" - }, - "bin": { - "rtlcss": "bin/rtlcss.js" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/strip-json-comments": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", - "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/rtlcss/node_modules/strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "dev": true, "engines": { "node": ">=8" }, @@ -51968,7 +51825,7 @@ "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/base-styles": "*", - "autoprefixer": "^10.2.5" + "autoprefixer": "^10.4.20" }, "engines": { "node": ">=18.12.0", @@ -51978,6 +51835,59 @@ "postcss": "^8.0.0" } }, + "packages/postcss-plugins-preset/node_modules/autoprefixer": { + "version": "10.4.20", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "browserslist": "^4.23.3", + "caniuse-lite": "^1.0.30001646", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "packages/postcss-plugins-preset/node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, + "packages/postcss-plugins-preset/node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "packages/postcss-themes": { "name": "@wordpress/postcss-themes", "version": "6.14.0", @@ -52447,7 +52357,7 @@ "react-refresh": "^0.14.0", "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", - "rtlcss-webpack-plugin": "^4.0.7", + "rtlcss": "^4.3.0", "sass": "^1.50.1", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", diff --git a/package.json b/package.json index a8a39b31c0f0ea..f785a2c6385aca 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@babel/runtime-corejs3": "7.25.7", "@babel/traverse": "7.25.7", "@emotion/babel-plugin": "11.11.0", + "@emotion/is-prop-valid": "1.2.2", "@emotion/jest": "11.7.1", "@emotion/native": "11.0.0", "@geometricpanda/storybook-addon-badges": "2.0.5", @@ -99,7 +100,6 @@ "equivalent-key-map": "0.2.2", "esbuild": "0.18.20", "escape-html": "1.0.3", - "eslint": "8.3.0", "eslint-import-resolver-node": "0.3.4", "eslint-plugin-eslint-comments": "3.1.2", "eslint-plugin-import": "2.25.2", @@ -152,7 +152,7 @@ "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", - "rtlcss": "4.0.0", + "rtlcss": "4.3.0", "sass": "1.50.1", "sass-loader": "16.0.3", "semver": "7.5.4",