Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow creating custom block templates in classic themes #30438

Merged
merged 12 commits into from
Apr 8, 2021
Merged

Allow creating custom block templates in classic themes #30438

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6d74db5
Allow creating custom block templates in classic themes
youknowriad Apr 1, 2021
40b15b5
Fix template fetching
youknowriad Apr 1, 2021
f691e6d
Restore PHP callback
youknowriad Apr 1, 2021
91b24b6
Take into account custom templates (#30464)
aristath Apr 2, 2021
5e58e00
Change the prefix for custom templates (#30467)
aristath Apr 2, 2021
6067b42
Add gutenberg_supports_block_templates (#30465)
aristath Apr 2, 2021
ac79f3e
Missed renaming the theme-support
aristath Apr 2, 2021
72eeb59
Add a modal to edit the template's title before creating it
youknowriad Apr 5, 2021
60dcce8
Fix design and enable for FSE themes
youknowriad Apr 6, 2021
5b8e20f
Add e2e test
youknowriad Apr 8, 2021
1a730f1
Add documentation
youknowriad Apr 8, 2021
7006394
Add some site blocks to the default template
youknowriad Apr 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/client-assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,7 +666,7 @@ function gutenberg_extend_block_editor_styles( $settings ) {
* @return array Filtered editor settings.
*/
function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings ) {
$settings['isFSETheme'] = gutenberg_is_fse_theme();
$settings['supportsTemplateMode'] = true; // gutenberg_is_fse_theme();

// Enable the new layout options for themes with a theme.json file.
$settings['supportsLayout'] = WP_Theme_JSON_Resolver::theme_has_support();
Expand Down
4 changes: 2 additions & 2 deletions lib/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function gutenberg_get_common_block_editor_settings() {
};

$settings = array(
'__unstableEnableFullSiteEditingBlocks' => gutenberg_is_fse_theme(),
'__unstableEnableFullSiteEditingBlocks' => true, // gutenberg_is_fse_theme(),
'disableCustomColors' => get_theme_support( 'disable-custom-colors' ),
'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
'disableCustomGradients' => get_theme_support( 'disable-custom-gradients' ),
Expand Down Expand Up @@ -81,7 +81,7 @@ function gutenberg_extend_post_editor_settings( $settings ) {
$image_sizes = wp_list_pluck( $settings['imageSizes'], 'slug' );

$settings['imageDefaultSize'] = in_array( $image_default_size, $image_sizes, true ) ? $image_default_size : 'large';
$settings['__unstableEnableFullSiteEditingBlocks'] = gutenberg_is_fse_theme();
$settings['__unstableEnableFullSiteEditingBlocks'] = true; // gutenberg_is_fse_theme();

return $settings;
}
Expand Down
20 changes: 7 additions & 13 deletions lib/full-site-editing/page-templates.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,16 @@
* @return array (Maybe) modified page templates array.
*/
function gutenberg_load_block_page_templates( $templates, $theme, $post, $post_type ) {
if ( ! gutenberg_is_fse_theme() ) {
/*if ( ! gutenberg_is_fse_theme() ) {
return $templates;
}
}*/

$data = WP_Theme_JSON_Resolver::get_theme_data()->get_custom_templates();
$custom_templates = array();
if ( isset( $data ) ) {
foreach ( $data as $key => $template ) {
if ( ( ! isset( $template['postTypes'] ) && 'page' === $post_type ) ||
( isset( $template['postTypes'] ) && in_array( $post_type, $template['postTypes'], true ) )
) {
$custom_templates[ $key ] = $template['title'];
}
}
$block_templates = gutenberg_get_block_templates( array(), 'wp_template' );
foreach ( $block_templates as $template ) {
// TODO: exclude templates that are not concerned by the current post type.
$templates[ $template->slug ] = $template->title;
}

return $custom_templates;
return $templates;
}
add_filter( 'theme_templates', 'gutenberg_load_block_page_templates', 10, 4 );
13 changes: 10 additions & 3 deletions lib/full-site-editing/template-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
* Adds necessary filters to use 'wp_template' posts instead of theme template files.
*/
function gutenberg_add_template_loader_filters() {
if ( ! gutenberg_is_fse_theme() ) {
/* if ( ! gutenberg_is_fse_theme() ) {
return;
}
} */

foreach ( gutenberg_get_template_type_slugs() as $template_type ) {
if ( 'embed' === $template_type ) { // Skip 'embed' for now because it is not a regular template type.
Expand Down Expand Up @@ -71,9 +71,16 @@ function gutenberg_override_query_template( $template, $type, array $templates =
foreach ( $templates as $template_item ) {
$template_item_slug = gutenberg_strip_php_suffix( $template_item );

// Is this a custom template?
$is_custom_template = 0 === strpos( $current_block_template_slug, 'custom-template-' );

// Don't override the template if we find a template matching the slug we look for
// and which does not match a block template slug.
if ( $current_template_slug !== $current_block_template_slug && $current_template_slug === $template_item_slug ) {
if (
! $is_custom_template &&
$current_template_slug !== $current_block_template_slug &&
$current_template_slug === $template_item_slug
) {
return $template;
}
}
Expand Down
12 changes: 6 additions & 6 deletions lib/full-site-editing/template-parts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
* Registers block editor 'wp_template_part' post type.
*/
function gutenberg_register_template_part_post_type() {
if ( ! gutenberg_is_fse_theme() ) {
/* if ( ! gutenberg_is_fse_theme() ) {
return;
}
} */

$labels = array(
'name' => __( 'Template Parts', 'gutenberg' ),
Expand Down Expand Up @@ -64,9 +64,9 @@ function gutenberg_register_template_part_post_type() {
* Registers the 'wp_template_part_area' taxonomy.
*/
function gutenberg_register_wp_template_part_area_taxonomy() {
if ( ! gutenberg_is_fse_theme() ) {
/* if ( ! gutenberg_is_fse_theme() ) {
return;
}
} */

register_taxonomy(
'wp_template_part_area',
Expand Down Expand Up @@ -107,9 +107,9 @@ function gutenberg_register_wp_template_part_area_taxonomy() {
* Fixes the label of the 'wp_template_part' admin menu entry.
*/
function gutenberg_fix_template_part_admin_menu_entry() {
if ( ! gutenberg_is_fse_theme() ) {
/* if ( ! gutenberg_is_fse_theme() ) {
return;
}
} */

global $submenu;
if ( ! isset( $submenu['themes.php'] ) ) {
Expand Down
12 changes: 6 additions & 6 deletions lib/full-site-editing/templates.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ function gutenberg_get_template_paths() {
* Registers block editor 'wp_template' post type.
*/
function gutenberg_register_template_post_type() {
if ( ! gutenberg_is_fse_theme() ) {
/* if ( ! gutenberg_is_fse_theme() ) {
return;
}
} */

$labels = array(
'name' => __( 'Templates', 'gutenberg' ),
Expand Down Expand Up @@ -84,9 +84,9 @@ function gutenberg_register_template_post_type() {
* Registers block editor 'wp_theme' taxonomy.
*/
function gutenberg_register_wp_theme_taxonomy() {
if ( ! gutenberg_is_fse_theme() ) {
/* if ( ! gutenberg_is_fse_theme() ) {
return;
}
} */

register_taxonomy(
'wp_theme',
Expand Down Expand Up @@ -139,9 +139,9 @@ function gutenberg_grant_template_caps( array $allcaps ) {
* Fixes the label of the 'wp_template' admin menu entry.
*/
function gutenberg_fix_template_admin_menu_entry() {
if ( ! gutenberg_is_fse_theme() ) {
/* if ( ! gutenberg_is_fse_theme() ) {
return;
}
} */
global $submenu;
if ( ! isset( $submenu['themes.php'] ) ) {
return;
Expand Down
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 20 additions & 6 deletions packages/core-data/src/resolvers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,13 +385,18 @@ export function* __experimentalGetTemplateForLink( link ) {
// Ideally this should be using an apiFetch call
// We could potentially do so by adding a "filter" to the `wp_template` end point.
// Also it seems the returned object is not a regular REST API post type.
const template = yield regularFetch(
addQueryArgs( link, {
'_wp-find-template': true,
} )
);
let template;
try {
template = yield regularFetch(
addQueryArgs( link, {
'_wp-find-template': true,
} )
);
} catch ( e ) {
// For non-FSE themes, it is possible that this request returns an error.
}

if ( template === null ) {
if ( ! template ) {
return;
}

Expand All @@ -410,3 +415,12 @@ export function* __experimentalGetTemplateForLink( link ) {
} );
}
}

__experimentalGetTemplateForLink.shouldInvalidate = ( action ) => {
return (
( action.type === 'RECEIVE_ITEMS' || action.type === 'REMOVE_ITEMS' ) &&
action.invalidateCache &&
action.kind === 'postType' &&
action.name === 'wp_template'
);
};
3 changes: 2 additions & 1 deletion packages/edit-post/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@
"classnames": "^2.2.5",
"lodash": "^4.17.19",
"memize": "^1.1.0",
"rememo": "^3.0.0"
"rememo": "^3.0.0",
"uuid": "8.3.0"
},
"publishConfig": {
"access": "public"
Expand Down
13 changes: 4 additions & 9 deletions packages/edit-post/src/components/header/template-title/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
*/
import { __, sprintf } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
Expand All @@ -13,15 +11,12 @@ import { store as editPostStore } from '../../../store';

function TemplateTitle() {
const { template, isEditing } = useSelect( ( select ) => {
const { getEditedPostAttribute } = select( editorStore );
const { __experimentalGetTemplateForLink } = select( coreStore );
const { isEditingTemplate } = select( editPostStore );
const link = getEditedPostAttribute( 'link' );
const { isEditingTemplate, getEditedPostTemplate } = select(
editPostStore
);
const _isEditing = isEditingTemplate();
return {
template: _isEditing
? __experimentalGetTemplateForLink( link )
: null,
template: _isEditing ? getEditedPostTemplate() : null,
isEditing: _isEditing,
};
}, [] );
Expand Down
122 changes: 64 additions & 58 deletions packages/edit-post/src/components/sidebar/post-template/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,40 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { createInterpolateElement } from '@wordpress/element';
import { store as editorStore } from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';

function PostTemplate() {
const { template, isEditing, isFSETheme } = useSelect( ( select ) => {
const {
getEditedPostAttribute,
getCurrentPostType,
getCurrentPost,
} = select( editorStore );
const { __experimentalGetTemplateForLink, getPostType } = select(
coreStore
);
const { isEditingTemplate } = select( editPostStore );
const link = getEditedPostAttribute( 'link' );
const isFSEEnabled = select( editorStore ).getEditorSettings()
.isFSETheme;
const isViewable =
getPostType( getCurrentPostType() )?.viewable ?? false;
return {
template:
isFSEEnabled &&
isViewable &&
link &&
getCurrentPost().status !== 'auto-draft'
? __experimentalGetTemplateForLink( link )
: null,
isEditing: isEditingTemplate(),
isFSETheme: isFSEEnabled,
};
}, [] );
const { setIsEditingTemplate } = useDispatch( editPostStore );
const { createSuccessNotice } = useDispatch( noticesStore );
const { template, isEditing, supportsTemplateMode } = useSelect(
( select ) => {
const { getCurrentPostType } = select( editorStore );
const { getPostType } = select( coreStore );
const { isEditingTemplate, getEditedPostTemplate } = select(
editPostStore
);
const _supportsTemplateMode = select(
editorStore
).getEditorSettings().supportsTemplateMode;
const isViewable =
getPostType( getCurrentPostType() )?.viewable ?? false;

if ( ! isFSETheme || ! template ) {
return {
template:
supportsTemplateMode &&
isViewable &&
getEditedPostTemplate(),
isEditing: isEditingTemplate(),
supportsTemplateMode: _supportsTemplateMode,
};
},
[]
);
const { __unstableSwitchToEditingMode } = useDispatch( editPostStore );

if ( ! supportsTemplateMode ) {
return null;
}

Expand All @@ -54,38 +49,49 @@ function PostTemplate() {
<span>{ __( 'Template' ) }</span>
{ ! isEditing && (
<span className="edit-post-post-template__value">
{ createInterpolateElement(
sprintf(
/* translators: 1: Template name. */
__( '%s (<a>Edit</a>)' ),
template.slug
),
{
a: (
<Button
isLink
onClick={ () => {
setIsEditingTemplate( true );
createSuccessNotice(
__(
'Editing template. Changes made here affect all posts and pages that use the template.'
),
{
type: 'snackbar',
}
);
} }
>
{ __( 'Edit' ) }
</Button>
{ !! template &&
createInterpolateElement(
sprintf(
/* translators: 1: Template name. */
__( '%s (<a>Edit</a>)' ),
template.slug
),
}
) }
{
a: (
<Button
isLink
onClick={ () =>
__unstableSwitchToEditingMode()
}
>
{ __( 'Edit' ) }
</Button>
),
}
) }
{ ! template &&
createInterpolateElement(
__( 'Default (<create />)' ),
{
create: (
<Button
isLink
onClick={ () =>
__unstableSwitchToEditingMode(
true
)
}
>
{ __( 'Create custom template' ) }
</Button>
),
}
) }
</span>
) }
{ isEditing && (
<span className="edit-post-post-template__value">
{ template.slug }
{ template?.slug }
</span>
) }
</PanelRow>
Expand Down
Loading