@wordpress/editor 14.11.0 → 14.12.1-next.082ed6819.0

package/src/components/post-type-support-check/index.js

@@ -13,13 +13,13 @@ import { store as editorStore } from '../../store';
  * A component which renders its own children only if the current editor post
  * type supports one of the given `supportKeys` prop.
  *
- * @param {Object}            props             Props.
- * @param {Element}           props.children    Children to be rendered if post
- *                                              type supports.
- * @param {(string|string[])} props.supportKeys String or string array of keys
- *                                              to test.
+ * @param {Object}             props             Props.
+ * @param {React.ReactElement} props.children    Children to be rendered if post
+ *                                               type supports.
+ * @param {(string|string[])}  props.supportKeys String or string array of keys
+ *                                               to test.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactElement} The component to be rendered.
  */
 function PostTypeSupportCheck( { children, supportKeys } ) {
 	const postType = useSelect( ( select ) => {

package/src/components/post-url/check.js

@@ -12,10 +12,10 @@ import { store as editorStore } from '../../store';
 /**
  * Check if the post URL is valid and visible.
  *
- * @param {Object}  props          The component props.
- * @param {Element} props.children The child components.
+ * @param {Object}             props          The component props.
+ * @param {React.ReactElement} props.children The child components.
  *
- * @return {Component|null} The child components if the post URL is valid and visible, otherwise null.
+ * @return {React.ReactElement} The child components if the post URL is valid and visible, otherwise null.
  */
 export default function PostURLCheck( { children } ) {
 	const isVisible = useSelect( ( select ) => {

package/src/components/post-url/index.js

@@ -34,7 +34,7 @@ import { store as editorStore } from '../../store';
  *
  * @param {Function} onClose Callback function to be executed when the popover is closed.
  *
- * @return {Component} The rendered PostURL component.
+ * @return {React.ReactNode} The rendered PostURL component.
  */
 export default function PostURL( { onClose } ) {
 	const {

package/src/components/post-url/label.js

@@ -12,7 +12,7 @@ import { store as editorStore } from '../../store';
 /**
  * Represents a label component for a post URL.
  *
- * @return {Component} The PostURLLabel component.
+ * @return {React.ReactNode} The PostURLLabel component.
  */
 export default function PostURLLabel() {
 	return usePostURLLabel();

package/src/components/post-url/panel.js

@@ -19,7 +19,7 @@ import { store as editorStore } from '../../store';
 /**
  * Renders the `PostURLPanel` component.
  *
- * @return {JSX.Element} The rendered PostURLPanel component.
+ * @return {React.ReactNode} The rendered PostURLPanel component.
  */
 export default function PostURLPanel() {
 	const { isFrontPage } = useSelect( ( select ) => {

package/src/components/post-visibility/check.js

@@ -15,7 +15,7 @@ import { store as editorStore } from '../../store';
  * @param {Object}   props        The component props.
  * @param {Function} props.render Function to render the component.
  *                                Receives an object with a `canEdit` property.
- * @return {JSX.Element} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function PostVisibilityCheck( { render } ) {
 	const canEdit = useSelect( ( select ) => {

package/src/components/post-visibility/index.js

@@ -22,7 +22,7 @@ import { store as editorStore } from '../../store';
  *
  * @param {Object}   props         The component props.
  * @param {Function} props.onClose Function to call when the popover is closed.
- * @return {JSX.Element} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function PostVisibility( { onClose } ) {
 	const instanceId = useInstanceId( PostVisibility );

package/src/components/preferences-modal/block-visibility.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { BlockManager } = unlock( blockEditorPrivateApis );
+
+export default function BlockVisibility() {
+	const { showBlockTypes, hideBlockTypes } = unlock(
+		useDispatch( editorStore )
+	);
+
+	const {
+		blockTypes,
+		allowedBlockTypes: _allowedBlockTypes,
+		hiddenBlockTypes: _hiddenBlockTypes,
+	} = useSelect( ( select ) => {
+		return {
+			blockTypes: select( blocksStore ).getBlockTypes(),
+			allowedBlockTypes:
+				select( editorStore ).getEditorSettings().allowedBlockTypes,
+			hiddenBlockTypes:
+				select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ??
+				[],
+		};
+	}, [] );
+
+	const allowedBlockTypes = useMemo( () => {
+		if ( _allowedBlockTypes === true ) {
+			return blockTypes;
+		}
+		return blockTypes.filter( ( { name } ) => {
+			return _allowedBlockTypes?.includes( name );
+		} );
+	}, [ _allowedBlockTypes, blockTypes ] );
+
+	const filteredBlockTypes = allowedBlockTypes.filter(
+		( blockType ) =>
+			hasBlockSupport( blockType, 'inserter', true ) &&
+			( ! blockType.parent ||
+				blockType.parent.includes( 'core/post-content' ) )
+	);
+
+	// Some hidden blocks become unregistered
+	// by removing for instance the plugin that registered them, yet
+	// they're still remain as hidden by the user's action.
+	// We consider "hidden", blocks which were hidden and
+	// are still registered.
+	const hiddenBlockTypes = _hiddenBlockTypes.filter( ( hiddenBlock ) => {
+		return filteredBlockTypes.some(
+			( registeredBlock ) => registeredBlock.name === hiddenBlock
+		);
+	} );
+
+	const selectedBlockTypes = filteredBlockTypes.filter(
+		( blockType ) => ! hiddenBlockTypes.includes( blockType.name )
+	);
+
+	const onChangeSelectedBlockTypes = ( newSelectedBlockTypes ) => {
+		if ( selectedBlockTypes.length > newSelectedBlockTypes.length ) {
+			const blockTypesToHide = selectedBlockTypes.filter(
+				( blockType ) =>
+					! newSelectedBlockTypes.find(
+						( { name } ) => name === blockType.name
+					)
+			);
+			hideBlockTypes( blockTypesToHide.map( ( { name } ) => name ) );
+		} else if ( selectedBlockTypes.length < newSelectedBlockTypes.length ) {
+			const blockTypesToShow = newSelectedBlockTypes.filter(
+				( blockType ) =>
+					! selectedBlockTypes.find(
+						( { name } ) => name === blockType.name
+					)
+			);
+			showBlockTypes( blockTypesToShow.map( ( { name } ) => name ) );
+		}
+	};
+
+	return (
+		<BlockManager
+			blockTypes={ filteredBlockTypes }
+			selectedBlockTypes={ selectedBlockTypes }
+			onChange={ onChangeSelectedBlockTypes }
+		/>
+	);
+}

package/src/components/preferences-modal/enable-panel.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
 /**
@@ -13,18 +12,29 @@ import { store as editorStore } from '../../store';
 
 const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
-export default compose(
-	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } =
-			select( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( panelName ),
-			isChecked: isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onChange: () =>
-			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
-	} ) )
-)( PreferenceBaseOption );
+export default function EnablePanelOption( props ) {
+	const { toggleEditorPanelEnabled } = useDispatch( editorStore );
+	const { isChecked, isRemoved } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelRemoved } =
+				select( editorStore );
+			return {
+				isChecked: isEditorPanelEnabled( props.panelName ),
+				isRemoved: isEditorPanelRemoved( props.panelName ),
+			};
+		},
+		[ props.panelName ]
+	);
+
+	if ( isRemoved ) {
+		return null;
+	}
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ () => toggleEditorPanelEnabled( props.panelName ) }
+			{ ...props }
+		/>
+	);
+}

package/src/components/preferences-modal/enable-publish-sidebar.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
 /**
@@ -13,16 +12,20 @@ import { store as editorStore } from '../../store';
 
 const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
-export default compose(
-	withSelect( ( select ) => ( {
-		isChecked: select( editorStore ).isPublishSidebarEnabled(),
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { enablePublishSidebar, disablePublishSidebar } =
-			dispatch( editorStore );
-		return {
-			onChange: ( isEnabled ) =>
-				isEnabled ? enablePublishSidebar() : disablePublishSidebar(),
-		};
-	} )
-)( PreferenceBaseOption );
+export default function EnablePublishSidebarOption( props ) {
+	const isChecked = useSelect( ( select ) => {
+		return select( editorStore ).isPublishSidebarEnabled();
+	}, [] );
+	const { enablePublishSidebar, disablePublishSidebar } =
+		useDispatch( editorStore );
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ ( isEnabled ) =>
+				isEnabled ? enablePublishSidebar() : disablePublishSidebar()
+			}
+			{ ...props }
+		/>
+	);
+}

package/src/components/preferences-modal/index.js

@@ -18,7 +18,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 import EnablePanelOption from './enable-panel';
 import EnablePluginDocumentSettingPanelOption from './enable-plugin-document-setting-panel';
 import EnablePublishSidebarOption from './enable-publish-sidebar';
-import BlockManager from '../block-manager';
+import BlockVisibility from './block-visibility';
 import PostTaxonomies from '../post-taxonomies';
 import PostFeaturedImageCheck from '../post-featured-image/check';
 import PostExcerptCheck from '../post-excerpt/check';
@@ -36,25 +36,40 @@ const {
 } = unlock( preferencesPrivateApis );
 
 export default function EditorPreferencesModal( { extraSections = {} } ) {
+	const isActive = useSelect( ( select ) => {
+		return select( interfaceStore ).isModalActive( 'editor/preferences' );
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	// Please wrap all contents inside PreferencesModalContents to prevent all
+	// hooks from executing when the modal is not open.
+	return (
+		<PreferencesModal closeModal={ closeModal }>
+			<PreferencesModalContents extraSections={ extraSections } />
+		</PreferencesModal>
+	);
+}
+
+function PreferencesModalContents( { extraSections = {} } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isActive, showBlockBreadcrumbsOption } = useSelect(
+	const showBlockBreadcrumbsOption = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
 			const { get } = select( preferencesStore );
-			const { isModalActive } = select( interfaceStore );
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
 			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
-			return {
-				showBlockBreadcrumbsOption:
-					! isDistractionFreeEnabled &&
-					isLargeViewport &&
-					isRichEditingEnabled,
-				isActive: isModalActive( 'editor/preferences' ),
-			};
+			return (
+				! isDistractionFreeEnabled &&
+				isLargeViewport &&
+				isRichEditingEnabled
+			);
 		},
 		[ isLargeViewport ]
 	);
-	const { closeModal } = useDispatch( interfaceStore );
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
@@ -282,7 +297,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 									"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
 								) }
 							>
-								<BlockManager />
+								<BlockVisibility />
 							</PreferencesModalSection>
 						</>
 					),
@@ -330,13 +345,5 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 		]
 	);
 
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return (
-		<PreferencesModal closeModal={ closeModal }>
-			<PreferencesModalTabs sections={ sections } />
-		</PreferencesModal>
-	);
+	return <PreferencesModalTabs sections={ sections } />;
 }

package/src/components/preferences-modal/test/index.js

@@ -19,7 +19,7 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
 	it( 'should not render when the modal is not active', () => {
-		useSelect.mockImplementation( () => [ false, false, false ] );
+		useSelect.mockImplementation( () => false );
 		render( <EditPostPreferencesModal /> );
 		expect(
 			screen.queryByRole( 'dialog', { name: 'Preferences' } )

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

@@ -16,7 +16,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { desktop, mobile, tablet, external } from '@wordpress/icons';
+import { desktop, mobile, tablet, external, check } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -31,21 +31,32 @@ import PostPreviewButton from '../post-preview-button';
 import { unlock } from '../../lock-unlock';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
-		useSelect( ( select ) => {
-			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getEntityRecord, getPostType } = select( coreStore );
-			const { get } = select( preferencesStore );
-			const _currentPostType = getCurrentPostType();
-			return {
-				deviceType: getDeviceType(),
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				isTemplate: _currentPostType === 'wp_template',
-				isViewable: getPostType( _currentPostType )?.viewable ?? false,
-				showIconLabels: get( 'core', 'showIconLabels' ),
-			};
-		}, [] );
-	const { setDeviceType } = useDispatch( editorStore );
+	const {
+		deviceType,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+		isTemplateHidden,
+		templateId,
+	} = useSelect( ( select ) => {
+		const { getDeviceType, getCurrentPostType, getCurrentTemplateId } =
+			select( editorStore );
+		const { getRenderingMode } = unlock( select( editorStore ) );
+		const { getEntityRecord, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			deviceType: getDeviceType(),
+			homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+			isTemplate: _currentPostType === 'wp_template',
+			isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isTemplateHidden: getRenderingMode() === 'post-only',
+			templateId: getCurrentTemplateId(),
+		};
+	}, [] );
+	const { setDeviceType, setRenderingMode } = useDispatch( editorStore );
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
@@ -142,6 +153,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 							</MenuItem>
 						</MenuGroup>
 					) }
+					{ ! isTemplate && !! templateId && (
+						<MenuGroup>
+							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isSelected={ ! isTemplateHidden }
+								role="menuitemcheckbox"
+								onClick={ () => {
+									setRenderingMode(
+										isTemplateHidden
+											? 'template-locked'
+											: 'post-only'
+									);
+								} }
+							>
+								{ __( 'Show template' ) }
+							</MenuItem>
+						</MenuGroup>
+					) }
 					{ isViewable && (
 						<MenuGroup>
 							<PostPreviewButton

package/src/components/provider/index.js

@@ -72,8 +72,7 @@ const NON_CONTEXTUAL_POST_TYPES = [
  * @return {Array} Block editor props.
  */
 function useBlockEditorProps( post, template, mode ) {
-	const rootLevelPost =
-		mode === 'post-only' || ! template ? 'post' : 'template';
+	const rootLevelPost = mode === 'template-locked' ? 'template' : 'post';
 	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		post.type,
@@ -164,30 +163,48 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
-		const { editorSettings, selection, isReady, mode, postTypeEntities } =
-			useSelect(
-				( select ) => {
-					const {
-						getEditorSettings,
-						getEditorSelection,
-						getRenderingMode,
-						__unstableIsEditorReady,
-					} = select( editorStore );
-					const { getEntitiesConfig } = select( coreStore );
+		const {
+			editorSettings,
+			selection,
+			isReady,
+			mode,
+			defaultMode,
+			postTypeEntities,
+			hasLoadedPostObject,
+		} = useSelect(
+			( select ) => {
+				const {
+					getEditorSettings,
+					getEditorSelection,
+					getRenderingMode,
+					__unstableIsEditorReady,
+				} = select( editorStore );
+				const { getEntitiesConfig } = select( coreStore );
+
+				const postTypeObject = select( coreStore ).getPostType(
+					post.type
+				);
+
+				const _hasLoadedPostObject = select(
+					coreStore
+				).hasFinishedResolution( 'getPostType', [ post.type ] );
 
-					return {
-						editorSettings: getEditorSettings(),
-						isReady: __unstableIsEditorReady(),
-						mode: getRenderingMode(),
-						selection: getEditorSelection(),
-						postTypeEntities:
-							post.type === 'wp_template'
-								? getEntitiesConfig( 'postType' )
-								: null,
-					};
-				},
-				[ post.type ]
-			);
+				return {
+					hasLoadedPostObject: _hasLoadedPostObject,
+					editorSettings: getEditorSettings(),
+					isReady: __unstableIsEditorReady(),
+					mode: getRenderingMode(),
+					defaultMode:
+						postTypeObject?.default_rendering_mode ?? 'post-only',
+					selection: getEditorSelection(),
+					postTypeEntities:
+						post.type === 'wp_template'
+							? getEntitiesConfig( 'postType' )
+							: null,
+				};
+			},
+			[ post.type ]
+		);
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
@@ -282,7 +299,15 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					}
 				);
 			}
-		}, [] );
+		}, [
+			createWarningNotice,
+			initialEdits,
+			settings,
+			post,
+			recovery,
+			setupEditor,
+			updatePostLock,
+		] );
 
 		// Synchronizes the active post with the state
 		useEffect( () => {
@@ -301,15 +326,15 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 
 		// Sets the right rendering mode when loading the editor.
 		useEffect( () => {
-			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
-		}, [ settings.defaultRenderingMode, setRenderingMode ] );
+			setRenderingMode( defaultMode );
+		}, [ defaultMode, setRenderingMode ] );
 
 		useHideBlocksFromInserter( post.type, mode );
 
 		// Register the editor commands.
 		useCommands();
 
-		if ( ! isReady ) {
+		if ( ! isReady || ! mode || ! hasLoadedPostObject ) {
 			return null;
 		}
 
@@ -386,7 +411,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
  * </EditorProvider>
  * ```
  *
- * @return {JSX.Element} The rendered EditorProvider component.
+ * @return {React.ReactNode} The rendered EditorProvider component.
  */
 export function EditorProvider( props ) {
 	return (

package/src/components/provider/use-block-editor-settings.js

@@ -7,6 +7,7 @@ import {
 	store as coreStore,
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
+	privateApis as coreDataPrivateApis,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -29,17 +30,12 @@ import { useGlobalStylesContext } from '../global-styles-provider';
 const EMPTY_OBJECT = {};
 
 function __experimentalReusableBlocksSelect( select ) {
-	const { getEntityRecords, hasFinishedResolution } = select( coreStore );
-	const reusableBlocks = getEntityRecords( 'postType', 'wp_block', {
+	const { RECEIVE_INTERMEDIATE_RESULTS } = unlock( coreDataPrivateApis );
+	const { getEntityRecords } = select( coreStore );
+	return getEntityRecords( 'postType', 'wp_block', {
 		per_page: -1,
+		[ RECEIVE_INTERMEDIATE_RESULTS ]: true,
 	} );
-	return hasFinishedResolution( 'getEntityRecords', [
-		'postType',
-		'wp_block',
-		{ per_page: -1 },
-	] )
-		? reusableBlocks
-		: undefined;
 }
 
 const BLOCK_EDITOR_SETTINGS = [
@@ -332,6 +328,10 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			[ sectionRootClientIdKey ]: sectionRootClientId,
+			editorTool:
+				renderingMode === 'post-only' && postType !== 'wp_template'
+					? 'edit'
+					: undefined,
 		};
 
 		return blockEditorSettings;
@@ -359,6 +359,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		sectionRootClientId,
 		globalStylesData,
 		globalStylesLinksData,
+		renderingMode,
 	] );
 }
 

package/src/components/sidebar/post-summary.js

@@ -87,11 +87,11 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostsPerPage />
 										<SiteDiscussion />
 										<PostFormatPanel />
+										{ fills }
 									</VStack>
 									<PostTrash
 										onActionPerformed={ onActionPerformed }
 									/>
-									{ fills }
 								</VStack>
 							) }
 						</VStack>

package/src/components/sidebar/style.scss

@@ -1,11 +1,9 @@
 .components-panel__header.editor-sidebar__panel-tabs {
 	padding-left: 0;
-	padding-right: $grid-unit-15;
+	padding-right: $grid-unit-10;
 
 	.components-button.has-icon {
 		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
 
 		@include break-medium() {
 			display: flex;