From 95a12d6efdb56e35c8767ddb190df6fb60649801 Mon Sep 17 00:00:00 2001 From: Adam Zielinski Date: Thu, 25 Nov 2021 13:42:27 +0100 Subject: [PATCH] Rename navigationMenuId to ref (#36739) * Rename navigationMenuId to ref * Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render. * Update wording in the comment --- .../block-library/src/navigation/block.json | 2 +- .../src/navigation/deprecated.js | 109 +++++++++++++++++- .../src/navigation/edit/index.js | 32 +++-- .../edit/navigation-menu-selector.js | 4 +- .../block-library/src/navigation/index.php | 20 +++- packages/block-library/src/navigation/save.js | 4 +- .../src/navigation/use-navigation-menu.js | 16 +-- 7 files changed, 145 insertions(+), 42 deletions(-) diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index f4a574b2f92409..6b7dd32a05e8a8 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -11,7 +11,7 @@ ], "textdomain": "default", "attributes": { - "navigationMenuId": { + "ref": { "type": "number" }, "textColor": { diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js index 64960ac6d37cab..a5daf2e4c79233 100644 --- a/packages/block-library/src/navigation/deprecated.js +++ b/packages/block-library/src/navigation/deprecated.js @@ -21,6 +21,13 @@ const TYPOGRAPHY_PRESET_DEPRECATION_MAP = { textTransform: 'var:preset|text-transform|', }; +const migrateIdToRef = ( { navigationMenuId, ...attributes } ) => { + return { + ...attributes, + ref: navigationMenuId, + }; +}; + const migrateWithLayout = ( attributes ) => { if ( !! attributes.layout ) { return attributes; @@ -47,6 +54,97 @@ const migrateWithLayout = ( attributes ) => { return updatedAttributes; }; +const v6 = { + attributes: { + navigationMenuId: { + type: 'number', + }, + textColor: { + type: 'string', + }, + customTextColor: { + type: 'string', + }, + rgbTextColor: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + rgbBackgroundColor: { + type: 'string', + }, + showSubmenuIcon: { + type: 'boolean', + default: true, + }, + openSubmenusOnClick: { + type: 'boolean', + default: false, + }, + overlayMenu: { + type: 'string', + default: 'mobile', + }, + __unstableLocation: { + type: 'string', + }, + overlayBackgroundColor: { + type: 'string', + }, + customOverlayBackgroundColor: { + type: 'string', + }, + overlayTextColor: { + type: 'string', + }, + customOverlayTextColor: { + type: 'string', + }, + }, + supports: { + align: [ 'wide', 'full' ], + anchor: true, + html: false, + inserter: true, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalTextTransform: true, + __experimentalFontFamily: true, + __experimentalTextDecoration: true, + __experimentalDefaultControls: { + fontSize: true, + }, + }, + spacing: { + blockGap: true, + units: [ 'px', 'em', 'rem', 'vh', 'vw' ], + __experimentalDefaultControls: { + blockGap: true, + }, + }, + __experimentalLayout: { + allowSwitching: false, + allowInheriting: false, + default: { + type: 'flex', + setCascadingProperties: true, + }, + }, + }, + save() { + return ; + }, + isEligible: ( { navigationMenuId } ) => !! navigationMenuId, + migrate: migrateIdToRef, +}; + const v5 = { attributes: { navigationMenuId: { @@ -135,7 +233,7 @@ const v5 = { }, isEligible: ( { itemsJustification, orientation } ) => !! itemsJustification || !! orientation, - migrate: migrateWithLayout, + migrate: compose( migrateIdToRef, migrateWithLayout ), }; const v4 = { @@ -218,7 +316,7 @@ const v4 = { save() { return ; }, - migrate: compose( migrateWithLayout, migrateFontFamily ), + migrate: compose( migrateIdToRef, migrateWithLayout, migrateFontFamily ), isEligible( { style } ) { return style?.typography?.fontFamily; }, @@ -259,6 +357,7 @@ const migrateTypographyPresets = function ( attributes ) { }; const deprecated = [ + v6, v5, v4, // Remove `isResponsive` attribute. @@ -336,6 +435,7 @@ const deprecated = [ return attributes.isResponsive; }, migrate: compose( + migrateIdToRef, migrateWithLayout, migrateFontFamily, migrateIsResponsive @@ -410,6 +510,7 @@ const deprecated = [ return false; }, migrate: compose( + migrateIdToRef, migrateWithLayout, migrateFontFamily, migrateTypographyPresets @@ -454,7 +555,7 @@ const deprecated = [ html: false, inserter: true, }, - migrate( attributes ) { + migrate: compose( migrateIdToRef, ( attributes ) => { return { ...omit( attributes, [ 'rgbTextColor', 'rgbBackgroundColor' ] ), customTextColor: attributes.textColor @@ -464,7 +565,7 @@ const deprecated = [ ? undefined : attributes.rgbBackgroundColor, }; - }, + } ), save() { return ; }, diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index defcec31a4117e..90fa24172d0834 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -118,13 +118,11 @@ function Navigation( { const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu; - const navigationMenuId = navigationArea - ? navigationAreaMenu - : attributes.navigationMenuId; + const ref = navigationArea ? navigationAreaMenu : attributes.ref; - const setNavigationMenuId = useCallback( + const setRef = useCallback( ( postId ) => { - setAttributes( { navigationMenuId: postId } ); + setAttributes( { ref: postId } ); if ( navigationArea ) { setAreaMenu( postId ); } @@ -133,7 +131,7 @@ function Navigation( { ); const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders( - `navigationMenu/${ navigationMenuId }` + `navigationMenu/${ ref }` ); const { innerBlocks, isInnerBlockSelected } = useSelect( @@ -160,7 +158,7 @@ function Navigation( { setHasSavedUnsavedInnerBlocks, ] = useState( false ); - const isWithinUnassignedArea = navigationArea && ! navigationMenuId; + const isWithinUnassignedArea = navigationArea && ! ref; const [ isPlaceholderShown, setIsPlaceholderShown ] = useState( ! hasExistingNavItems || isWithinUnassignedArea @@ -177,7 +175,7 @@ function Navigation( { hasResolvedNavigationMenus, navigationMenus, navigationMenu, - } = useNavigationMenu( navigationMenuId ); + } = useNavigationMenu( ref ); const navRef = useRef(); const isDraftNavigationMenu = navigationMenu?.status === 'draft'; @@ -296,7 +294,7 @@ function Navigation( { setAreaMenu( 0 ); } setAttributes( { - navigationMenuId: undefined, + ref: undefined, } ); setIsPlaceholderShown( true ); @@ -321,7 +319,7 @@ function Navigation( { onSave={ ( post ) => { setHasSavedUnsavedInnerBlocks( true ); // Switch to using the wp_navigation entity. - setNavigationMenuId( post.id ); + setRef( post.id ); } } /> ); @@ -329,7 +327,7 @@ 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 ( navigationMenuId && isNavigationMenuMissing ) { + if ( ref && isNavigationMenuMissing ) { return (
@@ -359,11 +357,7 @@ function Navigation( { : Placeholder; return ( - + { ! isDraftNavigationMenu && isEntityAvailable && ( @@ -376,7 +370,7 @@ function Navigation( { { ( { onClose } ) => ( { - setNavigationMenuId( id ); + setRef( id ); onClose(); } } onCreateNew={ startWithEmptyMenu } @@ -496,7 +490,7 @@ function Navigation( { setAreaMenu( 0 ); } setAttributes( { - navigationMenuId: undefined, + ref: undefined, } ); setIsPlaceholderShown( true ); } } @@ -509,7 +503,7 @@ function Navigation( { onFinish={ ( post ) => { setIsPlaceholderShown( false ); if ( post ) { - setNavigationMenuId( post.id ); + setRef( post.id ); } selectBlock( clientId ); } } diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 2a98eb4e3ee2fb..05607c879913c3 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -13,13 +13,13 @@ import useNavigationMenu from '../use-navigation-menu'; export default function NavigationMenuSelector( { onSelect, onCreateNew } ) { const { navigationMenus } = useNavigationMenu(); - const navigationMenuId = useEntityId( 'postType', 'wp_navigation' ); + const ref = useEntityId( 'postType', 'wp_navigation' ); return ( <> onSelect( navigationMenus.find( diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 6807fea6ef1379..bfd63c3f2c0bc3 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -9,7 +9,8 @@ * Build an array with CSS classes and inline styles defining the colors * which will be applied to the navigation markup in the front-end. * - * @param array $attributes Navigation block attributes. + * @param array $attributes Navigation block attributes. + * * @return array Colors CSS classes and inline styles. */ function block_core_navigation_build_css_colors( $attributes ) { @@ -99,7 +100,8 @@ function block_core_navigation_build_css_colors( $attributes ) { * Build an array with CSS classes and inline styles defining the font sizes * which will be applied to the navigation markup in the front-end. * - * @param array $attributes Navigation block attributes. + * @param array $attributes Navigation block attributes. + * * @return array Font size CSS classes and inline styles. */ function block_core_navigation_build_css_font_sizes( $attributes ) { @@ -286,13 +288,17 @@ function render_block_core_navigation( $attributes, $content, $block ) { $area = $block->context['navigationArea']; $mapping = get_option( 'wp_navigation_areas', array() ); if ( ! empty( $mapping[ $area ] ) ) { - $attributes['navigationMenuId'] = $mapping[ $area ]; + $attributes['ref'] = $mapping[ $area ]; } } - // Load inner blocks from the navigation post. + // Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render. if ( array_key_exists( 'navigationMenuId', $attributes ) ) { - $navigation_post = get_post( $attributes['navigationMenuId'] ); + $attributes['ref'] = $attributes['navigationMenuId']; + } + // Load inner blocks from the navigation post. + if ( array_key_exists( 'ref', $attributes ) ) { + $navigation_post = get_post( $attributes['ref'] ); if ( ! isset( $navigation_post ) ) { return ''; } @@ -429,8 +435,8 @@ function render_block_core_navigation( $attributes, $content, $block ) { /** * Register the navigation block. * - * @uses render_block_core_navigation() * @throws WP_Error An WP_Error exception parsing the block definition. + * @uses render_block_core_navigation() */ function register_block_core_navigation() { register_block_type_from_metadata( @@ -447,6 +453,7 @@ function register_block_core_navigation() { * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly. * * @param array $parsed_block The block being rendered. + * * @return array The block being rendered without typographic presets. */ function block_core_navigation_typographic_presets_backcompatibility( $parsed_block ) { @@ -470,6 +477,7 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl } } } + return $parsed_block; } diff --git a/packages/block-library/src/navigation/save.js b/packages/block-library/src/navigation/save.js index c563ca923ddfdc..aa4a34c7bfb934 100644 --- a/packages/block-library/src/navigation/save.js +++ b/packages/block-library/src/navigation/save.js @@ -4,8 +4,8 @@ import { InnerBlocks } from '@wordpress/block-editor'; export default function save( { attributes } ) { - if ( attributes.navigationMenuId ) { - // Avoid rendering inner blocks when a navigationMenuId is defined. + if ( attributes.ref ) { + // Avoid rendering inner blocks when a ref is defined. // When this id is defined the inner blocks are loaded from the // `wp_navigation` entity rather than the hard-coded block html. return; diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js index 3d6ff446eae7b1..92a7477712f356 100644 --- a/packages/block-library/src/navigation/use-navigation-menu.js +++ b/packages/block-library/src/navigation/use-navigation-menu.js @@ -4,7 +4,7 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -export default function useNavigationMenu( navigationMenuId ) { +export default function useNavigationMenu( ref ) { return useSelect( ( select ) => { const { @@ -17,12 +17,12 @@ export default function useNavigationMenu( navigationMenuId ) { const navigationMenuSingleArgs = [ 'postType', 'wp_navigation', - navigationMenuId, + ref, ]; - const rawNavigationMenu = navigationMenuId + const rawNavigationMenu = ref ? getEntityRecord( ...navigationMenuSingleArgs ) : null; - let navigationMenu = navigationMenuId + let navigationMenu = ref ? getEditedEntityRecord( ...navigationMenuSingleArgs ) : null; @@ -32,7 +32,7 @@ export default function useNavigationMenu( navigationMenuId ) { navigationMenu = null; } - const hasResolvedNavigationMenu = navigationMenuId + const hasResolvedNavigationMenu = ref ? hasFinishedResolution( 'getEditedEntityRecord', navigationMenuSingleArgs @@ -48,14 +48,14 @@ export default function useNavigationMenu( navigationMenuId ) { ...navigationMenuMultipleArgs ); - const canSwitchNavigationMenu = navigationMenuId + const canSwitchNavigationMenu = ref ? navigationMenus?.length > 1 : navigationMenus?.length > 0; return { isNavigationMenuResolved: hasResolvedNavigationMenu, isNavigationMenuMissing: - ! navigationMenuId || + ! ref || ( hasResolvedNavigationMenu && ! rawNavigationMenu ), canSwitchNavigationMenu, hasResolvedNavigationMenus: hasFinishedResolution( @@ -66,6 +66,6 @@ export default function useNavigationMenu( navigationMenuId ) { navigationMenus, }; }, - [ navigationMenuId ] + [ ref ] ); }