diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 664d814e88bbb..d4142c2aa67b7 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -8,7 +8,7 @@
"keywords": [ "menu", "navigation", "links" ],
"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 64960ac6d37ca..a5daf2e4c7923 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 eb283a5a9709b..24cf0a159e1a5 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';
@@ -287,7 +285,7 @@ function Navigation( {
setAreaMenu( 0 );
}
setAttributes( {
- navigationMenuId: undefined,
+ ref: undefined,
} );
setIsPlaceholderShown( true );
}, [ clientId ] );
@@ -311,7 +309,7 @@ function Navigation( {
onSave={ ( post ) => {
setHasSavedUnsavedInnerBlocks( true );
// Switch to using the wp_navigation entity.
- setNavigationMenuId( post.id );
+ setRef( post.id );
} }
/>
);
@@ -319,7 +317,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 (
@@ -349,11 +347,7 @@ function Navigation( {
: Placeholder;
return (
-
+
{ ! isDraftNavigationMenu && isEntityAvailable && (
@@ -366,7 +360,7 @@ function Navigation( {
{ ( { onClose } ) => (
{
- setNavigationMenuId( id );
+ setRef( id );
onClose();
} }
onCreateNew={ startWithEmptyMenu }
@@ -487,7 +481,7 @@ function Navigation( {
setAreaMenu( 0 );
}
setAttributes( {
- navigationMenuId: undefined,
+ ref: undefined,
} );
setIsPlaceholderShown( true );
} }
@@ -500,7 +494,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 2a98eb4e3ee2f..05607c879913c 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 6a3ea8646edef..c70c174acc1e5 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 ) {
@@ -269,13 +271,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 '';
}
@@ -407,8 +413,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(
@@ -425,6 +431,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 ) {
@@ -448,6 +455,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 c563ca923ddfd..aa4a34c7bfb93 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 3d6ff446eae7b..92a7477712f35 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 ]
);
}