Skip to content

Commit

Permalink
Rename navigationMenuId to ref (#36739)
Browse files Browse the repository at this point in the history 
* Rename navigationMenuId to ref

* Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.

* Update wording in the comment
  • Loading branch information
@adamziel
adamziel committed Nov 25, 2021
1 parent c6b83c1 commit d480189
Show file tree
Hide file tree
Showing 7 changed files with 145 additions and 42 deletions.
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation/block.json
View file
Expand Up @@ -8,7 +8,7 @@
"keywords": [ "menu", "navigation", "links" ],
"textdomain": "default",
"attributes": {
"navigationMenuId": {
"ref": {
"type": "number"
},
"textColor": {
Expand Down
109 changes: 105 additions & 4 deletions packages/block-library/src/navigation/deprecated.js
View file
Expand Up @@ -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;
Expand All @@ -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 <InnerBlocks.Content />;
},
isEligible: ( { navigationMenuId } ) => !! navigationMenuId,
migrate: migrateIdToRef,
};

const v5 = {
attributes: {
navigationMenuId: {
Expand Down Expand Up @@ -135,7 +233,7 @@ const v5 = {
},
isEligible: ( { itemsJustification, orientation } ) =>
!! itemsJustification || !! orientation,
migrate: migrateWithLayout,
migrate: compose( migrateIdToRef, migrateWithLayout ),
};

const v4 = {
Expand Down Expand Up @@ -218,7 +316,7 @@ const v4 = {
save() {
return <InnerBlocks.Content />;
},
migrate: compose( migrateWithLayout, migrateFontFamily ),
migrate: compose( migrateIdToRef, migrateWithLayout, migrateFontFamily ),
isEligible( { style } ) {
return style?.typography?.fontFamily;
},
Expand Down Expand Up @@ -259,6 +357,7 @@ const migrateTypographyPresets = function ( attributes ) {
};

const deprecated = [
v6,
v5,
v4,
// Remove `isResponsive` attribute.
Expand Down Expand Up @@ -336,6 +435,7 @@ const deprecated = [
return attributes.isResponsive;
},
migrate: compose(
migrateIdToRef,
migrateWithLayout,
migrateFontFamily,
migrateIsResponsive
Expand Down Expand Up @@ -410,6 +510,7 @@ const deprecated = [
return false;
},
migrate: compose(
migrateIdToRef,
migrateWithLayout,
migrateFontFamily,
migrateTypographyPresets
Expand Down Expand Up @@ -454,7 +555,7 @@ const deprecated = [
html: false,
inserter: true,
},
migrate( attributes ) {
migrate: compose( migrateIdToRef, ( attributes ) => {
return {
...omit( attributes, [ 'rgbTextColor', 'rgbBackgroundColor' ] ),
customTextColor: attributes.textColor
Expand All @@ -464,7 +565,7 @@ const deprecated = [
? undefined
: attributes.rgbBackgroundColor,
};
},
} ),
save() {
return <InnerBlocks.Content />;
},
Expand Down
32 changes: 13 additions & 19 deletions packages/block-library/src/navigation/edit/index.js
View file
Expand Up @@ -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 );
}
Expand All @@ -133,7 +131,7 @@ function Navigation( {
);

const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
`navigationMenu/${ navigationMenuId }`
`navigationMenu/${ ref }`
);

const { innerBlocks, isInnerBlockSelected } = useSelect(
Expand All @@ -160,7 +158,7 @@ function Navigation( {
setHasSavedUnsavedInnerBlocks,
] = useState( false );

const isWithinUnassignedArea = navigationArea && ! navigationMenuId;
const isWithinUnassignedArea = navigationArea && ! ref;

const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
! hasExistingNavItems || isWithinUnassignedArea
Expand All @@ -177,7 +175,7 @@ function Navigation( {
hasResolvedNavigationMenus,
navigationMenus,
navigationMenu,
} = useNavigationMenu( navigationMenuId );
} = useNavigationMenu( ref );

const navRef = useRef();
const isDraftNavigationMenu = navigationMenu?.status === 'draft';
Expand Down Expand Up @@ -287,7 +285,7 @@ function Navigation( {
setAreaMenu( 0 );
}
setAttributes( {
navigationMenuId: undefined,
ref: undefined,
} );
setIsPlaceholderShown( true );
}, [ clientId ] );
Expand All @@ -311,15 +309,15 @@ function Navigation( {
onSave={ ( post ) => {
setHasSavedUnsavedInnerBlocks( true );
// Switch to using the wp_navigation entity.
setNavigationMenuId( post.id );
setRef( post.id );
} }
/>
);
}

// 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 (
<div { ...blockProps }>
<Warning>
Expand Down Expand Up @@ -349,11 +347,7 @@ function Navigation( {
: Placeholder;

return (
<EntityProvider
kind="postType"
type="wp_navigation"
id={ navigationMenuId }
>
<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
<RecursionProvider>
<BlockControls>
{ ! isDraftNavigationMenu && isEntityAvailable && (
Expand All @@ -366,7 +360,7 @@ function Navigation( {
{ ( { onClose } ) => (
<NavigationMenuSelector
onSelect={ ( { id } ) => {
setNavigationMenuId( id );
setRef( id );
onClose();
} }
onCreateNew={ startWithEmptyMenu }
Expand Down Expand Up @@ -487,7 +481,7 @@ function Navigation( {
setAreaMenu( 0 );
}
setAttributes( {
navigationMenuId: undefined,
ref: undefined,
} );
setIsPlaceholderShown( true );
} }
Expand All @@ -500,7 +494,7 @@ function Navigation( {
onFinish={ ( post ) => {
setIsPlaceholderShown( false );
if ( post ) {
setNavigationMenuId( post.id );
setRef( post.id );
}
selectBlock( clientId );
} }
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/navigation/edit/navigation-menu-selector.js
View file
Expand Up @@ -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 (
<>
<MenuGroup>
<MenuItemsChoice
value={ navigationMenuId }
value={ ref }
onSelect={ ( selectedId ) =>
onSelect(
navigationMenus.find(
Expand Down
20 changes: 14 additions & 6 deletions packages/block-library/src/navigation/index.php
View file
Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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 '';
}
Expand Down Expand Up @@ -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(
Expand All @@ -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 ) {
Expand All @@ -448,6 +455,7 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
}
}
}

return $parsed_block;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/navigation/save.js
View file
Expand Up @@ -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;
Expand Down

0 comments on commit d480189

Please sign in to comment.