Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rename navigationMenuId to ref #36739

Merged
merged 3 commits into from Nov 25, 2021
Merged

Rename navigationMenuId to ref #36739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3faab90
Rename navigationMenuId to ref
adamziel Nov 22, 2021
180aaf5
Ensure that blocks saved with the legacy ref attribute name (navigati…
adamziel Nov 23, 2021
8213c67
Update wording in the comment
adamziel Nov 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation/block.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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