@wordpress/block-library 6.0.15 → 6.0.18

package/src/navigation/edit/placeholder/index.js

@@ -31,6 +31,7 @@ const ExistingMenusDropdown = ( {
 	onFinish,
 	menus,
 	onCreateFromMenu,
+	showClassicMenus = false,
 } ) => {
 	const toggleProps = {
 		variant: 'tertiary',
@@ -65,22 +66,24 @@ const ExistingMenusDropdown = ( {
 								);
 							} ) }
 					</MenuGroup>
-					<MenuGroup label={ __( 'Classic Menus' ) }>
-						{ menus?.map( ( menu ) => {
-							return (
-								<MenuItem
-									onClick={ () => {
-										setSelectedMenu( menu.id );
-										onCreateFromMenu( menu.name );
-									} }
-									onClose={ onClose }
-									key={ menu.id }
-								>
-									{ decodeEntities( menu.name ) }
-								</MenuItem>
-							);
-						} ) }
-					</MenuGroup>
+					{ showClassicMenus && (
+						<MenuGroup label={ __( 'Classic Menus' ) }>
+							{ menus?.map( ( menu ) => {
+								return (
+									<MenuItem
+										onClick={ () => {
+											setSelectedMenu( menu.id );
+											onCreateFromMenu( menu.name );
+										} }
+										onClose={ onClose }
+										key={ menu.id }
+									>
+										{ decodeEntities( menu.name ) }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
 				</>
 			) }
 		</DropdownMenu>
@@ -92,6 +95,7 @@ export default function NavigationPlaceholder( {
 	onFinish,
 	canSwitchNavigationMenu,
 	hasResolvedNavigationMenus,
+	canUserCreateNavigation = false,
 } ) {
 	const [ selectedMenu, setSelectedMenu ] = useState();
 	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
@@ -102,6 +106,10 @@ export default function NavigationPlaceholder( {
 		blocks,
 		navigationMenuTitle = null
 	) => {
+		if ( ! canUserCreateNavigation ) {
+			return;
+		}
+
 		const navigationMenu = await createNavigationMenu(
 			navigationMenuTitle,
 			blocks
@@ -176,8 +184,10 @@ export default function NavigationPlaceholder( {
 								<Icon icon={ navigation } />{ ' ' }
 								{ __( 'Navigation' ) }
 							</div>
+
 							<hr />
-							{ hasMenus || navigationMenus.length ? (
+
+							{ hasMenus || navigationMenus?.length ? (
 								<>
 									<ExistingMenusDropdown
 										canSwitchNavigationMenu={
@@ -188,11 +198,14 @@ export default function NavigationPlaceholder( {
 										onFinish={ onFinish }
 										menus={ menus }
 										onCreateFromMenu={ onCreateFromMenu }
+										showClassicMenus={
+											canUserCreateNavigation
+										}
 									/>
 									<hr />
 								</>
 							) : undefined }
-							{ hasPages ? (
+							{ canUserCreateNavigation && hasPages ? (
 								<>
 									<Button
 										variant="tertiary"
@@ -203,12 +216,15 @@ export default function NavigationPlaceholder( {
 									<hr />
 								</>
 							) : undefined }
-							<Button
-								variant="tertiary"
-								onClick={ onCreateEmptyMenu }
-							>
-								{ __( 'Start empty' ) }
-							</Button>
+
+							{ canUserCreateNavigation && (
+								<Button
+									variant="tertiary"
+									onClick={ onCreateEmptyMenu }
+								>
+									{ __( 'Start empty' ) }
+								</Button>
+							) }
 						</div>
 					</div>
 				</Placeholder>

package/src/navigation/edit/responsive-wrapper.js

@@ -39,12 +39,20 @@ export default function ResponsiveWrapper( {
 
 	const modalId = `${ id }-modal`;
 
+	const dialogProps = {
+		className: 'wp-block-navigation__responsive-dialog',
+		...( isOpen && {
+			role: 'dialog',
+			'aria-modal': true,
+			'aria-label': __( 'Menu' ),
+		} ),
+	};
+
 	return (
 		<>
 			{ ! isOpen && (
 				<Button
 					aria-haspopup="true"
-					aria-expanded={ isOpen }
 					aria-label={ __( 'Open menu' ) }
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
@@ -73,12 +81,7 @@ export default function ResponsiveWrapper( {
 					className="wp-block-navigation__responsive-close"
 					tabIndex="-1"
 				>
-					<div
-						className="wp-block-navigation__responsive-dialog"
-						role="dialog"
-						aria-modal="true"
-						aria-labelledby={ `${ modalId }-title` }
-					>
+					<div { ...dialogProps }>
 						<Button
 							className="wp-block-navigation__responsive-container-close"
 							aria-label={ __( 'Close menu' ) }

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -18,7 +18,6 @@ import { useContext, useEffect, useRef } from '@wordpress/element';
 import useNavigationMenu from '../use-navigation-menu';
 import useCreateNavigationMenu from './use-create-navigation-menu';
 
-const NOOP = () => {};
 const EMPTY_OBJECT = {};
 const DRAFT_MENU_PARAMS = [
 	'postType',
@@ -41,13 +40,6 @@ export default function UnsavedInnerBlocks( {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: hasSelection ? undefined : false,
-
-		// Make the inner blocks 'controlled'. This allows the block to always
-		// work with controlled inner blocks, smoothing out the switch to using
-		// an entity.
-		value: blocks,
-		onChange: NOOP,
-		onInput: NOOP,
 	} );
 
 	const {
@@ -125,22 +117,18 @@ export default function UnsavedInnerBlocks( {
 	] );
 
 	return (
-		<>
-			<nav { ...blockProps }>
-				<div className="wp-block-navigation__unsaved-changes">
-					<Disabled
-						className={ classnames(
-							'wp-block-navigation__unsaved-changes-overlay',
-							{
-								'is-saving': hasSelection,
-							}
-						) }
-					>
-						<div { ...innerBlocksProps } />
-					</Disabled>
-					{ hasSelection && <Spinner /> }
-				</div>
-			</nav>
-		</>
+		<div className="wp-block-navigation__unsaved-changes">
+			<Disabled
+				className={ classnames(
+					'wp-block-navigation__unsaved-changes-overlay',
+					{
+						'is-saving': hasSelection,
+					}
+				) }
+			>
+				<div { ...innerBlocksProps } />
+			</Disabled>
+			{ hasSelection && <Spinner /> }
+		</div>
 	);
 }

package/src/navigation/edit/use-navigation-notice.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticeStore } from '@wordpress/notices';
+
+function useNavigationNotice( { name, message } = {} ) {
+	const noticeRef = useRef();
+
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+
+	const showNotice = () => {
+		if ( noticeRef.current ) {
+			return;
+		}
+
+		noticeRef.current = name;
+
+		createWarningNotice( message, {
+			id: noticeRef.current,
+			type: 'snackbar',
+		} );
+	};
+
+	const hideNotice = () => {
+		if ( ! noticeRef.current ) {
+			return;
+		}
+		removeNotice( noticeRef.current );
+		noticeRef.current = null;
+	};
+
+	return [ showNotice, hideNotice ];
+}
+
+export default useNavigationNotice;

package/src/navigation/editor.scss

@@ -100,6 +100,7 @@
 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
 	display: block;
 	position: static;
+	width: 100%;
 }
 
 // Hide when hovering.
@@ -304,7 +305,6 @@ $color-control-label-height: 20px;
 
 // Selected state.
 .wp-block-navigation-placeholder__controls {
-	padding: $grid-unit-10;
 	border-radius: $radius-block-ui;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
@@ -313,11 +313,7 @@ $color-control-label-height: 20px;
 	display: none;
 	position: relative;
 	z-index: 1;
-
-	// Adjust padding for when shown horizontally.
-	.is-large & {
-		padding: $grid-unit-05 $grid-unit-10;
-	}
+	padding: $grid-unit-05 $grid-unit-10;
 
 	// If an ancestor has a text-decoration property applied, it is inherited regardless of
 	// the specificity of a child element. Only pulling the child out of the flow fixes it.
@@ -330,9 +326,19 @@ $color-control-label-height: 20px;
 		display: flex;
 	}
 
-	// Show stacked for the vertical navigation, or small placeholders.
-	.is-small &,
+	// Hide a few elements in medium size placeholders.
+	// @todo: part of the code here will be irrelevant if https://github.com/WordPress/gutenberg/pull/36775 lands.
 	.is-medium & {
+		.wp-block-navigation-placeholder__actions__indicator,
+		.wp-block-navigation-placeholder__actions__indicator + hr,
+		.wp-block-navigation-placeholder__actions > :nth-last-child(3), // Add all pages.
+		.wp-block-navigation-placeholder__actions > :nth-last-child(2) { // hr separator after it.
+			display: none;
+		}
+	}
+
+	// Show stacked for the vertical navigation, or small placeholders.
+	.is-small & {
 		.wp-block-navigation-placeholder__actions {
 			flex-direction: column;
 		}
@@ -366,11 +372,17 @@ $color-control-label-height: 20px;
 	}
 }
 
+// Keep as row for medium.
+.wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset {
+	flex-direction: row !important;
+}
+
 .wp-block-navigation-placeholder__actions {
 	display: flex;
 	font-size: $default-font-size;
 	font-family: $default-font;
 	gap: $grid-unit-15 * 0.5;
+	align-items: center;
 
 	// Margins.
 	.components-dropdown,

package/src/navigation/index.php

@@ -452,14 +452,24 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	}
 
+	$layout_justification = array(
+		'left'          => 'items-justified-left',
+		'right'         => 'items-justified-right',
+		'center'        => 'items-justified-center',
+		'space-between' => 'items-justified-space-between',
+	);
+
 	// Restore legacy classnames for submenu positioning.
 	$layout_class = '';
 	if ( isset( $attributes['layout']['justifyContent'] ) ) {
-		if ( 'right' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-right';
-		} elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) {
-			$layout_class .= 'items-justified-space-between';
-		}
+		$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
+	}
+	if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
+		$layout_class .= ' is-vertical';
+	}
+
+	if ( isset( $attributes['layout']['flexWrap'] ) && 'nowrap' === $attributes['layout']['flexWrap'] ) {
+		$layout_class .= ' no-wrap';
 	}
 
 	$colors     = block_core_navigation_build_css_colors( $attributes );
@@ -528,10 +538,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$responsive_container_markup = sprintf(
-		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
 			<div class="%5$s" style="%7$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
-					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
+					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
 							%2$s
@@ -545,7 +555,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		__( 'Close menu' ), // Close button label.
 		implode( ' ', $responsive_container_classes ),
 		implode( ' ', $open_button_classes ),
-		$colors['overlay_inline_styles']
+		$colors['overlay_inline_styles'],
+		__( 'Menu' )
 	);
 
 	return sprintf(

package/src/navigation/style.scss

@@ -6,6 +6,10 @@
 // - .wp-block-navigation-item targets the menu item itself.
 // - .wp-block-navigation-item__content targets the link inside a menu item.
 // - .wp-block-navigation__submenu-icon targets the chevron icon indicating submenus.
+
+// Size of burger and close icons.
+$navigation-icon-size: 24px;
+
 .wp-block-navigation {
 	position: relative;
 
@@ -102,6 +106,45 @@
 			height: inherit;
 		}
 	}
+
+	// Custom properties for layout style cascade: default values.
+	--navigation-layout-justification-setting: flex-start;
+	--navigation-layout-direction: row;
+	--navigation-layout-wrap: wrap;
+	--navigation-layout-justify: flex-start;
+	--navigation-layout-align: center;
+
+	&.is-vertical {
+		--navigation-layout-direction: column;
+		--navigation-layout-justify: initial;
+	}
+
+	&.no-wrap {
+		--navigation-layout-wrap: nowrap;
+	}
+
+	&.items-justified-center {
+		--navigation-layout-justification-setting: center;
+		--navigation-layout-justify: center;
+
+		&.is-vertical {
+			--navigation-layout-align: center;
+		}
+	}
+
+	&.items-justified-right {
+		--navigation-layout-justification-setting: flex-end;
+		--navigation-layout-justify: flex-end;
+
+		&.is-vertical {
+			--navigation-layout-align: flex-end;
+		}
+	}
+
+	&.items-justified-space-between {
+		--navigation-layout-justification-setting: space-between;
+		--navigation-layout-justify: space-between;
+	}
 }
 
 // Styles for submenu flyout.
@@ -347,10 +390,10 @@ button.wp-block-navigation-item__content {
 // Navigation block inner container.
 .wp-block-navigation__container {
 	display: flex;
-	flex-wrap: var(--layout-wrap, wrap);
-	flex-direction: var(--layout-direction, initial);
-	justify-content: var(--layout-justify, initial);
-	align-items: var(--layout-align, initial);
+	flex-wrap: var(--navigation-layout-wrap, wrap);
+	flex-direction: var(--navigation-layout-direction, initial);
+	justify-content: var(--navigation-layout-justify, initial);
+	align-items: var(--navigation-layout-align, initial);
 
 	// Reset the default list styles
 	list-style: none;
@@ -384,10 +427,10 @@ button.wp-block-navigation-item__content {
 
 	.wp-block-navigation__responsive-container-content {
 		display: flex;
-		flex-wrap: var(--layout-wrap, wrap);
-		flex-direction: var(--layout-direction, initial);
-		justify-content: var(--layout-justify, initial);
-		align-items: var(--layout-align, initial);
+		flex-wrap: var(--navigation-layout-wrap, wrap);
+		flex-direction: var(--navigation-layout-direction, initial);
+		justify-content: var(--navigation-layout-justify, initial);
+		align-items: var(--navigation-layout-align, initial);
 	}
 
 	// If the responsive wrapper is present but overlay is not open,
@@ -405,6 +448,10 @@ button.wp-block-navigation-item__content {
 	&.is-menu-open {
 		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
+		background-color: inherit;
+
+		// Use em units to apply padding, so themes can more easily style this in various ways.
+		padding: 2em;
 
 		// Allow modal to scroll.
 		overflow: auto;
@@ -412,18 +459,22 @@ button.wp-block-navigation-item__content {
 		// Give it a z-index just higher than the adminbar.
 		z-index: 100000;
 
-		// Add extra top padding so items don't conflict with close button.
-		padding: 72px 24px 24px 24px;
-		background-color: inherit;
-
 		.wp-block-navigation__responsive-container-content {
+			// Add padding above to accommodate close button.
+			padding-top: calc(2em + #{ $navigation-icon-size });
+
+			// Don't crop the focus style.
+			overflow: visible;
+
 			// Override the container flex layout settings
 			// because we want overlay menu to always display
 			// as a column.
 			display: flex;
 			flex-direction: column;
+			flex-wrap: nowrap;
+
 			// Inherit alignment settings from container.
-			align-items: var(--layout-justification-setting, inherit);
+			align-items: var(--navigation-layout-justification-setting, inherit);
 
 			// Always align the contents of the menu to the top.
 			&,
@@ -432,10 +483,6 @@ button.wp-block-navigation-item__content {
 				justify-content: flex-start;
 			}
 
-			// Allow menu to scroll.
-			overflow: auto;
-			padding: 0;
-
 			.wp-block-navigation__submenu-icon {
 				display: none;
 			}
@@ -454,20 +501,19 @@ button.wp-block-navigation-item__content {
 				// Position and style.
 				position: static;
 				border: none;
-				padding-left: 32px;
-				padding-right: 32px;
+				padding-left: 2em;
+				padding-right: 2em;
 			}
 
 			// Space unfolded items using gap and padding for submenus.
 			.wp-block-navigation__submenu-container,
 			.wp-block-navigation__container {
 				gap: var(--wp--style--block-gap, 2em);
+			}
 
-				// Apply top padding to nested submenus.
-				.wp-block-navigation__submenu-container,
-				.wp-block-navigation__container {
-					padding-top: var(--wp--style--block-gap, 2em);
-				}
+			// Apply top padding to nested submenus.
+			.wp-block-navigation__submenu-container {
+				padding-top: var(--wp--style--block-gap, 2em);
 			}
 
 			// A default padding is added to submenu items. It's not appropriate inside the modal.
@@ -482,7 +528,7 @@ button.wp-block-navigation-item__content {
 				display: flex;
 				flex-direction: column;
 				// Inherit alignment settings from container.
-				align-items: var(--layout-justification-setting, initial);
+				align-items: var(--navigation-layout-justification-setting, initial);
 			}
 		}
 
@@ -548,8 +594,8 @@ button.wp-block-navigation-item__content {
 		fill: currentColor;
 		pointer-events: none;
 		display: block;
-		width: 24px;
-		height: 24px;
+		width: $navigation-icon-size;
+		height: $navigation-icon-size;
 	}
 }
 
@@ -567,8 +613,8 @@ button.wp-block-navigation-item__content {
 // Button to close the menus.
 .wp-block-navigation__responsive-container-close {
 	position: absolute;
-	top: 24px;
-	right: 24px;
+	top: 0;
+	right: 0;
 	z-index: 2; // Needs to be above the modal z index itself.
 }
 
@@ -580,11 +626,14 @@ button.wp-block-navigation-item__content {
 .is-menu-open .wp-block-navigation__responsive-close,
 .is-menu-open .wp-block-navigation__responsive-dialog,
 .is-menu-open .wp-block-navigation__responsive-container-content {
-	width: 100%;
-	height: 100%;
+	box-sizing: border-box;
 }
 
+.wp-block-navigation__responsive-dialog {
+	position: relative;
+}
+
+// Prevent scrolling of the parent content when the modal is open.
 html.has-modal-open {
 	overflow: hidden;
 }
-

package/src/navigation/use-navigation-menu.js

@@ -12,6 +12,7 @@ export default function useNavigationMenu( ref ) {
 				getEditedEntityRecord,
 				getEntityRecords,
 				hasFinishedResolution,
+				canUser,
 			} = select( coreStore );
 
 			const navigationMenuSingleArgs = [
@@ -64,6 +65,25 @@ export default function useNavigationMenu( ref ) {
 				),
 				navigationMenu,
 				navigationMenus,
+				canUserUpdateNavigationEntity: ref
+					? canUser( 'update', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserUpdateNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'update', 'navigation', ref ]
+				),
+				canUserDeleteNavigationEntity: ref
+					? canUser( 'delete', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserDeleteNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'delete', 'navigation', ref ]
+				),
+				canUserCreateNavigation: canUser( 'create', 'navigation' ),
+				hasResolvedCanUserCreateNavigation: hasFinishedResolution(
+					'canUser',
+					[ 'create', 'navigation' ]
+				),
 			};
 		},
 		[ ref ]

package/src/navigation/view.js

@@ -5,16 +5,22 @@ import MicroModal from 'micromodal';
 
 // Responsive navigation toggle.
 function navigationToggleModal( modal ) {
-	const triggerButton = document.querySelector(
-		`button[data-micromodal-trigger="${ modal.id }"]`
+	const dialogContainer = document.querySelector(
+		`.wp-block-navigation__responsive-dialog`
 	);
-	const closeButton = modal.querySelector( 'button[data-micromodal-close]' );
-	// Use aria-hidden to determine the status of the modal, as this attribute is
-	// managed by micromodal.
+
 	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-	triggerButton.setAttribute( 'aria-expanded', ! isHidden );
-	closeButton.setAttribute( 'aria-expanded', ! isHidden );
+
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
 
 	// Add a class to indicate the modal is open.
 	const htmlElement = document.documentElement;

package/src/navigation-link/index.php

@@ -98,7 +98,7 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

package/src/navigation-submenu/index.php

@@ -98,7 +98,7 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

package/src/page-list/index.php

@@ -119,7 +119,7 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;