@wordpress/edit-post 7.22.0 → 7.24.0

package/build-style/style.css

@@ -584,6 +584,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   flex-wrap: wrap;
   align-items: center;
   max-width: 100vw;
+  justify-content: space-between;
 }
 @media (min-width: 280px) {
   .edit-post-header {
@@ -601,7 +602,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .edit-post-header__toolbar {
   display: flex;
-  flex-grow: 1;
+  flex-shrink: 8;
+  flex-grow: 3;
+  overflow: hidden;
+  padding: 2px 0;
+  align-items: center;
 }
 .edit-post-header__toolbar .table-of-contents {
   display: none;
@@ -611,12 +616,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     display: block;
   }
 }
+.edit-post-header__toolbar .block-editor-block-contextual-toolbar.is-fixed {
+  border: none;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper {
+  overflow-x: hidden;
+}
+.edit-post-header__toolbar .selected-block-tools-wrapper.is-collapsed {
+  display: none;
+}
+
+.edit-post-header__block-tools-toggle {
+  margin-left: 2px;
+}
 
 .edit-post-header__center {
   flex-grow: 1;
   display: flex;
   justify-content: center;
 }
+.edit-post-header__center.is-collapsed {
+  display: none;
+}
 
 /**
  * Buttons on the right side
@@ -624,7 +645,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-header__settings {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding-right: 4px;
   gap: 4px;
 }
@@ -1222,12 +1243,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   height: 61px;
 }
 
-@media (min-width: 782px) {
-  .edit-post-layout.has-fixed-toolbar .interface-interface-skeleton__header:not(:focus-within) {
-    z-index: 19;
-  }
-}
-
 .edit-post-block-manager__no-results {
   font-style: italic;
   padding: 24px 0;
@@ -1577,64 +1592,18 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   padding: 16px;
 }
 
-.edit-post-post-author {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
 .edit-post-post-format {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
 
-.edit-post-post-schedule {
-  width: 100%;
-  position: relative;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.edit-post-post-schedule span {
-  display: block;
-  width: 45%;
-  flex-shrink: 0;
-  padding: 6px 0;
-}
-
-.components-button.edit-post-post-schedule__toggle {
-  text-align: left;
-  white-space: normal;
-  height: auto;
-}
-.components-button.edit-post-post-schedule__toggle span {
-  width: 0;
-}
-
-.edit-post-post-schedule__dialog .block-editor-publish-date-time-picker {
-  margin: 8px;
-}
-
 .edit-post-post-slug {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
 
-.edit-post-post-template {
-  width: 100%;
-  justify-content: flex-start;
-}
-.edit-post-post-template span {
-  display: block;
-  width: 45%;
-  padding: 6px 0;
-}
-
-.edit-post-post-template__dropdown {
-  max-width: 55%;
-}
-
 .components-button.edit-post-post-template__toggle {
   display: inline-block;
   width: 100%;
@@ -1657,40 +1626,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   }
 }
 
-.edit-post-post-url {
-  width: 100%;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.edit-post-post-url span {
-  display: block;
-  width: 45%;
-  flex-shrink: 0;
-  padding: 6px 0;
-}
-
-.components-button.edit-post-post-url__toggle {
-  text-align: left;
-  white-space: normal;
-  height: auto;
-  word-break: break-word;
-}
-
-.edit-post-post-url__dialog .editor-post-url {
-  min-width: 248px;
-  margin: 8px;
-}
-
-.edit-post-post-visibility {
-  width: 100%;
-  justify-content: flex-start;
-}
-.edit-post-post-visibility span {
-  display: block;
-  width: 45%;
-  padding: 6px 0;
-}
-
 .edit-post-post-visibility__dialog .editor-post-visibility {
   min-width: 248px;
   margin: 8px;
@@ -1771,21 +1706,25 @@ h2.edit-post-template-summary__title {
   background-color: #fff;
   flex-grow: 1;
 }
-.edit-post-text-editor .editor-post-title {
+.edit-post-text-editor .editor-post-title:not(.is-raw-text),
+.edit-post-text-editor .editor-post-title.is-raw-text textarea {
   max-width: none;
   line-height: 1.4;
   font-family: Menlo, Consolas, monaco, monospace;
   font-size: 2.5em;
   font-weight: normal;
   border: 1px solid #949494;
+  border-radius: 0;
   padding: 16px;
 }
 @media (min-width: 600px) {
-  .edit-post-text-editor .editor-post-title {
+  .edit-post-text-editor .editor-post-title:not(.is-raw-text),
+.edit-post-text-editor .editor-post-title.is-raw-text textarea {
     padding: 24px;
   }
 }
-.edit-post-text-editor .editor-post-title:focus {
+.edit-post-text-editor .editor-post-title:not(.is-raw-text):focus,
+.edit-post-text-editor .editor-post-title.is-raw-text textarea:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
@@ -1849,7 +1788,7 @@ h2.edit-post-template-summary__title {
   font-size: 13px;
   padding: 6px 12px;
 }
-.edit-post-visual-editor .components-button.is-tertiary, .edit-post-visual-editor .components-button.has-icon {
+.edit-post-visual-editor .components-button.has-icon {
   padding: 6px;
 }
 
@@ -1871,99 +1810,6 @@ h2.edit-post-template-summary__title {
   flex-grow: 1;
 }
 
-.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  left: 0;
-}
-@media (min-width: 783px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-.auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0;
-}
-@media (min-width: 783px) {
-  .folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-
-body.is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0 !important;
-}
-
-.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
-}
-@media (min-width: 782px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    border-bottom: none;
-    display: flex;
-    height: 60px;
-    align-items: center;
-    width: calc(100% - 180px);
-  }
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% + 40px - 180px);
-    margin-left: 80px;
-  }
-  .is-fullscreen-mode .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 144px;
-  }
-}
-@media (min-width: 960px) {
-  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
-
 .edit-post-welcome-guide,
 .edit-template-welcome-guide {
   width: 312px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.22.0",
+	"version": "7.24.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.45.0",
-		"@wordpress/api-fetch": "^6.42.0",
-		"@wordpress/block-editor": "^12.13.0",
-		"@wordpress/block-library": "^8.22.0",
-		"@wordpress/blocks": "^12.22.0",
-		"@wordpress/commands": "^0.16.0",
-		"@wordpress/components": "^25.11.0",
-		"@wordpress/compose": "^6.22.0",
-		"@wordpress/core-commands": "^0.14.0",
-		"@wordpress/core-data": "^6.22.0",
-		"@wordpress/data": "^9.15.0",
-		"@wordpress/deprecated": "^3.45.0",
-		"@wordpress/dom": "^3.45.0",
-		"@wordpress/editor": "^13.22.0",
-		"@wordpress/element": "^5.22.0",
-		"@wordpress/hooks": "^3.45.0",
-		"@wordpress/i18n": "^4.45.0",
-		"@wordpress/icons": "^9.36.0",
-		"@wordpress/interface": "^5.22.0",
-		"@wordpress/keyboard-shortcuts": "^4.22.0",
-		"@wordpress/keycodes": "^3.45.0",
-		"@wordpress/media-utils": "^4.36.0",
-		"@wordpress/notices": "^4.13.0",
-		"@wordpress/plugins": "^6.13.0",
-		"@wordpress/preferences": "^3.22.0",
-		"@wordpress/private-apis": "^0.27.0",
-		"@wordpress/url": "^3.46.0",
-		"@wordpress/viewport": "^5.22.0",
-		"@wordpress/warning": "^2.45.0",
-		"@wordpress/widgets": "^3.22.0",
+		"@wordpress/a11y": "^3.47.0",
+		"@wordpress/api-fetch": "^6.44.0",
+		"@wordpress/block-editor": "^12.15.0",
+		"@wordpress/block-library": "^8.24.0",
+		"@wordpress/blocks": "^12.24.0",
+		"@wordpress/commands": "^0.18.0",
+		"@wordpress/components": "^25.13.0",
+		"@wordpress/compose": "^6.24.0",
+		"@wordpress/core-commands": "^0.16.0",
+		"@wordpress/core-data": "^6.24.0",
+		"@wordpress/data": "^9.17.0",
+		"@wordpress/deprecated": "^3.47.0",
+		"@wordpress/dom": "^3.47.0",
+		"@wordpress/editor": "^13.24.0",
+		"@wordpress/element": "^5.24.0",
+		"@wordpress/hooks": "^3.47.0",
+		"@wordpress/i18n": "^4.47.0",
+		"@wordpress/icons": "^9.38.0",
+		"@wordpress/interface": "^5.24.0",
+		"@wordpress/keyboard-shortcuts": "^4.24.0",
+		"@wordpress/keycodes": "^3.47.0",
+		"@wordpress/media-utils": "^4.38.0",
+		"@wordpress/notices": "^4.15.0",
+		"@wordpress/plugins": "^6.15.0",
+		"@wordpress/preferences": "^3.24.0",
+		"@wordpress/private-apis": "^0.29.0",
+		"@wordpress/url": "^3.48.0",
+		"@wordpress/viewport": "^5.24.0",
+		"@wordpress/warning": "^2.47.0",
+		"@wordpress/widgets": "^3.24.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2a00e87b57b9c27ed2b9b0fd8d423ef3cada72c1"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }

package/src/components/device-preview/index.js

@@ -15,22 +15,27 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../store';
 
 export default function DevicePreview() {
-	const { hasActiveMetaboxes, isPostSaveable, isViewable, deviceType } =
-		useSelect( ( select ) => {
-			const { getEditedPostAttribute } = select( editorStore );
-			const { getPostType } = select( coreStore );
-			const postType = getPostType( getEditedPostAttribute( 'type' ) );
+	const {
+		hasActiveMetaboxes,
+		isPostSaveable,
+		isViewable,
+		deviceType,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
-			return {
-				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-				isPostSaveable: select( editorStore ).isEditedPostSaveable(),
-				isViewable: postType?.viewable ?? false,
-				deviceType:
-					select(
-						editPostStore
-					).__experimentalGetPreviewDeviceType(),
-			};
-		}, [] );
+		return {
+			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
+			isViewable: postType?.viewable ?? false,
+			deviceType:
+				select( editPostStore ).__experimentalGetPreviewDeviceType(),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+		};
+	}, [] );
 	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
 		useDispatch( editPostStore );
 
@@ -41,6 +46,7 @@ export default function DevicePreview() {
 			deviceType={ deviceType }
 			setDeviceType={ setPreviewDeviceType }
 			label={ __( 'Preview' ) }
+			showIconLabels={ showIconLabels }
 		>
 			{ ( { onClose } ) =>
 				isViewable && (

package/src/components/header/document-actions/index.js

@@ -20,21 +20,18 @@ import { displayShortcut } from '@wordpress/keycodes';
 import { store as editPostStore } from '../../../store';
 
 function DocumentActions() {
-	const { template, isEditing } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } =
-			select( editPostStore );
-		const _isEditing = isEditingTemplate();
+	const { template } = useSelect( ( select ) => {
+		const { getEditedPostTemplate } = select( editPostStore );
 
 		return {
-			template: _isEditing ? getEditedPostTemplate() : null,
-			isEditing: _isEditing,
+			template: getEditedPostTemplate(),
 		};
 	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 
-	if ( ! isEditing || ! template ) {
+	if ( ! template ) {
 		return null;
 	}
 

package/src/components/header/header-toolbar/index.js

@@ -19,7 +19,6 @@ import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useRef, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,7 +32,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-function HeaderToolbar( { setListViewToggleElement } ) {
+function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editPostStore );
@@ -44,7 +43,6 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
-		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
 			select( blockEditorStore );
@@ -52,7 +50,6 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { get: getPreference } = select( preferencesStore );
 
 		return {
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
@@ -69,7 +66,6 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-post/toggle-list-view'
 			),
-			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
 		};
 	}, [] );
 

package/src/components/header/index.js

@@ -1,11 +1,28 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
-import { __unstableMotion as motion } from '@wordpress/components';
+import {
+	Button,
+	__unstableMotion as motion,
+	Popover,
+} from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -19,6 +36,9 @@ import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import DocumentActions from './document-actions';
+import { unlock } from '../../lock-unlock';
+
+const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -36,18 +56,43 @@ function Header( {
 	setEntitiesSavedStatesCallback,
 	setListViewToggleElement,
 } ) {
-	const isLargeViewport = useViewportMatch( 'large' );
-	const { hasActiveMetaboxes, isPublishSidebarOpened, showIconLabels } =
-		useSelect(
-			( select ) => ( {
-				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-				isPublishSidebarOpened:
-					select( editPostStore ).isPublishSidebarOpened(),
-				showIconLabels:
-					select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			} ),
-			[]
-		);
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const blockToolbarRef = useRef();
+	const {
+		blockSelectionStart,
+		hasActiveMetaboxes,
+		hasFixedToolbar,
+		isEditingTemplate,
+		isPublishSidebarOpened,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+
+		return {
+			blockSelectionStart:
+				select( blockEditorStore ).getBlockSelectionStart(),
+			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			isPublishSidebarOpened:
+				select( editPostStore ).isPublishSidebarOpened(),
+			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+		};
+	}, [] );
+
+	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
+		useState( true );
+
+	const hasBlockSelected = !! blockSelectionStart;
+
+	useEffect( () => {
+		// If we have a new block selection, show the block tools
+		if ( blockSelectionStart ) {
+			setIsBlockToolsCollapsed( false );
+		}
+	}, [ blockSelectionStart ] );
 
 	return (
 		<div className="edit-post-header">
@@ -65,10 +110,52 @@ function Header( {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar
+					hasFixedToolbar={ hasFixedToolbar }
 					setListViewToggleElement={ setListViewToggleElement }
 				/>
-				<div className="edit-post-header__center">
-					<DocumentActions />
+				{ hasFixedToolbar && isLargeViewport && (
+					<>
+						<div
+							className={ classnames(
+								'selected-block-tools-wrapper',
+								{
+									'is-collapsed': isBlockToolsCollapsed,
+								}
+							) }
+						>
+							<BlockContextualToolbar isFixed />
+						</div>
+						<Popover.Slot
+							ref={ blockToolbarRef }
+							name="block-toolbar"
+						/>
+						{ isEditingTemplate && hasBlockSelected && (
+							<Button
+								className="edit-post-header__block-tools-toggle"
+								icon={ isBlockToolsCollapsed ? next : previous }
+								onClick={ () => {
+									setIsBlockToolsCollapsed(
+										( collapsed ) => ! collapsed
+									);
+								} }
+								label={
+									isBlockToolsCollapsed
+										? __( 'Show block tools' )
+										: __( 'Hide block tools' )
+								}
+							/>
+						) }
+					</>
+				) }
+				<div
+					className={ classnames( 'edit-post-header__center', {
+						'is-collapsed':
+							! isBlockToolsCollapsed &&
+							isLargeViewport &&
+							isEditingTemplate,
+					} ) }
+				>
+					{ isEditingTemplate && <DocumentActions /> }
 				</div>
 			</motion.div>
 			<motion.div
@@ -96,13 +183,13 @@ function Header( {
 						setEntitiesSavedStatesCallback
 					}
 				/>
-				{ ( isLargeViewport || ! showIconLabels ) && (
+				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
 						<PinnedItems.Slot scope="core/edit-post" />
 						<MoreMenu showIconLabels={ showIconLabels } />
 					</>
 				) }
-				{ showIconLabels && ! isLargeViewport && (
+				{ showIconLabels && ! isWideViewport && (
 					<MoreMenu showIconLabels={ showIconLabels } />
 				) }
 			</motion.div>