Block-based template parts for Classic themes

lib/compat/wordpress-6.1/template-parts-screen.php

@@ -0,0 +1,208 @@
+<?php
+/**
+ * Bootstrapping the Gutenberg Template Parts screen & integration.
+ *
+ * This isn't a new file for wp-admin; just override necessary for `site-editor.php`.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Register Template Parts submenu.
+ *
+ * This should be handled directly in wp-admin/menu.php.
+ *
+ * @return void
+ */
+function gutenberg_template_parts_screen_menu() {
+ // Only add page for Classic theme that support the feature.
+ if ( wp_is_block_theme() ) {
+ return;
+ }
+
+ if ( ! current_theme_supports( 'block-template-parts' ) ) {
+ return;
+ }
+
+ add_theme_page(
+ __( 'Template Parts', 'gutenberg' ),
+ __( 'Template Parts', 'gutenberg' ),
+ 'edit_theme_options',
+ 'gutenberg-template-parts',
+ 'gutenberg_template_parts_screen_render'
+ );
+}
+add_action( 'admin_menu', 'gutenberg_template_parts_screen_menu' );
+
+/**
+ * The page permissions and redirections.
+ *
+ * @return void
+ */
+function gutenberg_template_parts_screen_permissions() {
+ if ( ! current_theme_supports( 'block-template-parts' ) ) {
+ wp_die( __( 'The theme you are currently using doesn\'t block-based template parts.', 'gutenberg' ) );
+ }
+
+ /**
+ * Should be handled directly in /wp-admin/menu.php.
+ * Path: `site-editor.php?postType=wp_template_part`.
+ */
+ if ( ! isset( $_GET['postType'] ) ) {
+ $redirect_url = add_query_arg(
+ array( 'postType' => 'wp_template_part' ),
+ admin_url( 'themes.php?page=gutenberg-template-parts' )
+ );
+ wp_safe_redirect( $redirect_url );
+ exit;
+ }
+}
+add_action( 'load-appearance_page_gutenberg-template-parts', 'gutenberg_template_parts_screen_permissions' );
+
+/**
+ * Initialize the editor for the screen. Most of this is copied from `site-editor.php`.
+ *
+ * Note: Parts that need to be ported back should have inline comments.
+ *
+ * @param string $hook Current page hook.
+ * @return void
+ */
+function gutenberg_template_parts_screen_init( $hook ) {
+ global $current_screen, $editor_styles;
+
+ if ( 'appearance_page_gutenberg-template-parts' !== $hook ) {
+ return;
+ }
+
+ // Flag that we're loading the block editor.
+ $current_screen->is_block_editor( true );
+
+ // Default to is-fullscreen-mode to avoid jumps in the UI.
+ add_filter(
+ 'admin_body_class',
+ static function( $classes ) {
+ return "$classes is-fullscreen-mode";
+ }
+ );
+
+ $indexed_template_types = array();
+ foreach ( get_default_block_template_types() as $slug => $template_type ) {
+ $template_type['slug'] = (string) $slug;
+ $indexed_template_types[] = $template_type;
+ }
+
+ $block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
+ $custom_settings = array(
+ 'siteUrl' => site_url(),
+ 'postsPerPage' => get_option( 'posts_per_page' ),
+ 'styles' => get_block_editor_theme_styles(),
+ 'defaultTemplateTypes' => $indexed_template_types,
+ 'defaultTemplatePartAreas' => get_allowed_block_template_part_areas(),
+ 'supportsLayout' => WP_Theme_JSON_Resolver::theme_has_support(),
+ 'supportsTemplatePartsMode' => ! wp_is_block_theme() && current_theme_supports( 'block-template-parts' ),
+ '__unstableHomeTemplate' => gutenberg_resolve_home_template(),
+ );
+
+ /**
+ * We don't need home template resolution when block template parts are supported.
+ * Set the value to true to satisfy the editor initialization guard clause.
+ */
+ if ( $custom_settings['supportsTemplatePartsMode'] ) {
+ $custom_settings['__unstableHomeTemplate'] = true;
+ }
+
+ // Add additional back-compat patterns registered by `current_screen` et al.
+ $custom_settings['__experimentalAdditionalBlockPatterns'] = WP_Block_Patterns_Registry::get_instance()->get_all_registered( true );
+ $custom_settings['__experimentalAdditionalBlockPatternCategories'] = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered( true );
+
+ $editor_settings = get_block_editor_settings( $custom_settings, $block_editor_context );
+
+ if ( isset( $_GET['postType'] ) && ! isset( $_GET['postId'] ) ) {
+ $post_type = get_post_type_object( $_GET['postType'] );
+ if ( ! $post_type ) {
+ wp_die( __( 'Invalid post type.', 'gutenberg' ) );
+ }
+ }
+
+ $active_global_styles_id = WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
+ $active_theme = wp_get_theme()->get_stylesheet();
+ $preload_paths = array(
+ array( '/wp/v2/media', 'OPTIONS' ),
+ '/wp/v2/types?context=view',
+ '/wp/v2/types/wp_template?context=edit',
+ '/wp/v2/types/wp_template-part?context=edit',
+ '/wp/v2/templates?context=edit&per_page=-1',
+ '/wp/v2/template-parts?context=edit&per_page=-1',
+ '/wp/v2/themes?context=edit&status=active',
+ '/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
+ '/wp/v2/global-styles/' . $active_global_styles_id,
+ '/wp/v2/global-styles/themes/' . $active_theme,
+ );
+
+ block_editor_rest_api_preload( $preload_paths, $block_editor_context );
+
+ wp_add_inline_script(
+ 'wp-edit-site',
+ sprintf(
+ 'wp.domReady( function() {
+ wp.editSite.initializeEditor( "site-editor", %s );
+ } );',
+ wp_json_encode( $editor_settings )
+ )
+ );
+
+ // Preload server-registered block schemas.
+ wp_add_inline_script(
+ 'wp-blocks',
+ 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
+ );
+
+ wp_add_inline_script(
+ 'wp-blocks',
+ sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( $block_editor_context ) ) )
+ );
+
+ wp_enqueue_script( 'wp-edit-site' );
+ wp_enqueue_script( 'wp-format-library' );
+ wp_enqueue_style( 'wp-edit-site' );
+ wp_enqueue_style( 'wp-format-library' );
+ wp_enqueue_media();
+
+ if (
+ current_theme_supports( 'wp-block-styles' ) ||
+ ( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 )
+ ) {
+ wp_enqueue_style( 'wp-block-library-theme' );
+ }
+
+ /** This action is documented in wp-admin/edit-form-blocks.php */
+ do_action( 'enqueue_block_editor_assets' );
+}
+add_action( 'admin_enqueue_scripts', 'gutenberg_template_parts_screen_init' );
+
+/**
+ * The main entry point for the screen.
+ *
+ * @return void
+ */
+function gutenberg_template_parts_screen_render() {
+ echo '<div id="site-editor" class="edit-site"></div>';
+}
+
+/**
+ * Register the new theme feature.
+ *
+ * Migrates into `create_initial_theme_features` method.
+ *
+ * @return void
+ */
+function gutenberg_register_template_parts_theme_feature() {
+ register_theme_feature(
+ 'block-template-parts',
+ array(
+ 'description' => __( 'Whether a theme uses block-based template parts.', 'gutenberg' ),
+ 'show_in_rest' => true,
+ )
+ );
+}
+add_action( 'setup_theme', 'gutenberg_register_template_parts_theme_feature', 5 );

lib/load.php

@@ -91,6 +91,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/date-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/block-patterns.php';
 require __DIR__ . '/compat/wordpress-6.1/edit-form-blocks.php';
+require __DIR__ . '/compat/wordpress-6.1/template-parts-screen.php';
 require __DIR__ . '/compat/wordpress-6.1/theme.php';
 
 // Experimental features.

packages/edit-site/src/components/list/header.js

@@ -9,10 +9,18 @@ import { __experimentalHeading as Heading } from '@wordpress/components';
  * Internal dependencies
  */
 import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
 
 export default function Header( { templateType } ) {
- const postType = useSelect(
- ( select ) => select( coreStore ).getPostType( templateType ),
+ const { canCreate, postType } = useSelect(
+ ( select ) => {
+ const { supportsTemplatePartsMode } =
+ select( editSiteStore ).getSettings();
+ return {
+ postType: select( coreStore ).getPostType( templateType ),
+ canCreate: ! supportsTemplatePartsMode,
+ };
+ },
  [ templateType ]
  );
 
@@ -26,9 +34,11 @@ export default function Header( { templateType } ) {
  { postType.labels?.name }
  </Heading>
 
- <div className="edit-site-list-header__right">
- <AddNewTemplate templateType={ templateType } />
- </div>
+ { canCreate && (
+ <div className="edit-site-list-header__right">
+ <AddNewTemplate templateType={ templateType } />
+ </div>
+ ) }
  </header>
  );
 }

packages/edit-site/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' ) }

packages/edit-site/src/components/sidebar/index.js

@@ -19,32 +19,35 @@ 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'
 );
 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 />
  </>
  );