@wordpress/edit-site 4.13.1-next.957ca95e4c.0 → 4.14.0

package/src/components/navigation-sidebar/navigation-panel/index.js

@@ -40,22 +40,23 @@ function NavLink( { params, replace, ...props } ) {
 }
 
 const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
-	const { homeTemplate, isNavigationOpen, siteTitle } = useSelect(
-		( select ) => {
+	const { homeTemplate, isNavigationOpen, isTemplatePartsMode, siteTitle } =
+		useSelect( ( select ) => {
 			const { getEntityRecord } = select( coreDataStore );
 			const { getSettings, isNavigationOpened } = select( editSiteStore );
 
 			const siteData =
 				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+			const { supportsTemplatePartsMode, __unstableHomeTemplate } =
+				getSettings();
 
 			return {
 				siteTitle: siteData.name,
-				homeTemplate: getSettings().__unstableHomeTemplate,
+				homeTemplate: __unstableHomeTemplate,
 				isNavigationOpen: isNavigationOpened(),
+				isTemplatePartsMode: !! supportsTemplatePartsMode,
 			};
-		},
-		[]
-	);
+		}, [] );
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const closeOnEscape = ( event ) => {
@@ -91,24 +92,29 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
-								<NavLink
-									icon={ siteIcon }
-									title={ __( 'Site' ) }
-									item={ SITE_EDITOR_KEY }
-									params={ {
-										postId: homeTemplate?.postId,
-										postType: homeTemplate?.postType,
-									} }
-								/>
-								<NavLink
-									icon={ templateIcon }
-									title={ __( 'Templates' ) }
-									item="wp_template"
-									params={ {
-										postId: undefined,
-										postType: 'wp_template',
-									} }
-								/>
+								{ ! isTemplatePartsMode && (
+									<>
+										<NavLink
+											icon={ siteIcon }
+											title={ __( 'Site' ) }
+											item={ SITE_EDITOR_KEY }
+											params={ {
+												postId: homeTemplate?.postId,
+												postType:
+													homeTemplate?.postType,
+											} }
+										/>
+										<NavLink
+											icon={ templateIcon }
+											title={ __( 'Templates' ) }
+											item="wp_template"
+											params={ {
+												postId: undefined,
+												postType: 'wp_template',
+											} }
+										/>
+									</>
+								) }
 								<NavLink
 									icon={ templatePartIcon }
 									title={ __( 'Template Parts' ) }

package/src/components/sidebar/index.js

@@ -19,6 +19,7 @@ import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
+import { store as editSiteStore } from '../../store';
 
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
@@ -26,25 +27,27 @@ const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 export const SidebarInspectorFill = InspectorFill;
 
 export function SidebarComplementaryAreaFills() {
-	const { sidebar, isEditorSidebarOpened, hasBlockSelection } = useSelect(
-		( select ) => {
-			const _sidebar =
-				select( interfaceStore ).getActiveComplementaryArea(
-					STORE_NAME
-				);
-			const _isEditorSidebarOpened = [
-				SIDEBAR_BLOCK,
-				SIDEBAR_TEMPLATE,
-			].includes( _sidebar );
-			return {
-				sidebar: _sidebar,
-				isEditorSidebarOpened: _isEditorSidebarOpened,
-				hasBlockSelection:
-					!! select( blockEditorStore ).getBlockSelectionStart(),
-			};
-		},
-		[]
-	);
+	const {
+		sidebar,
+		isEditorSidebarOpened,
+		hasBlockSelection,
+		supportsGlobalStyles,
+	} = useSelect( ( select ) => {
+		const _sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
+		const _isEditorSidebarOpened = [
+			SIDEBAR_BLOCK,
+			SIDEBAR_TEMPLATE,
+		].includes( _sidebar );
+		const settings = select( editSiteStore ).getSettings();
+		return {
+			sidebar: _sidebar,
+			isEditorSidebarOpened: _isEditorSidebarOpened,
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
+			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
+		};
+	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	useEffect( () => {
@@ -89,7 +92,7 @@ export function SidebarComplementaryAreaFills() {
 					<InspectorSlot bubblesVirtually />
 				) }
 			</DefaultSidebar>
-			<GlobalStylesSidebar />
+			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 			<MaybeNavigationMenuSidebar />
 		</>
 	);

package/src/components/template-part-converter/convert-to-template-part.js

@@ -6,7 +6,7 @@ import { kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
 	store as blockEditorStore,
@@ -23,6 +23,7 @@ import { symbolFilled } from '@wordpress/icons';
  * Internal dependencies
  */
 import CreateTemplatePartModal from '../create-template-part-modal';
+import { store as editSiteStore } from '../../store';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -30,6 +31,18 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	}, [] );
+
+	if ( ! canCreate ) {
+		return null;
+	}
+
 	const onConvert = async ( { title, area } ) => {
 		// Currently template parts only allow latin chars.
 		// Fallback slug will receive suffix by default.

package/src/index.js

@@ -107,6 +107,10 @@ export function reinitializeEditor( target, settings ) {
 		}
 	}
 
+	// Prevent the default browser action for files dropped outside of dropzones.
+	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
+	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
+
 	render( <EditSiteApp reboot={ reboot } />, target );
 }
 

package/src/style.scss

@@ -26,6 +26,7 @@ html.wp-toolbar {
 	background: $white;
 }
 
+body.appearance_page_gutenberg-template-parts,
 body.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }