Add: Modal to choose a start pattern on new templates. #46248
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <?php | ||
| /** | ||
| * REST API: Gutenberg_REST_Templates_Controller_6_2 class | ||
| * | ||
| * @package Gutenberg | ||
| * @subpackage REST_API | ||
| */ | ||
|
|
||
| /** | ||
| * Base Templates REST API Controller. | ||
| */ | ||
| class Gutenberg_REST_Templates_Controller_6_2 extends Gutenberg_REST_Templates_Controller { | ||
|
|
||
| /** | ||
| * Registers the controllers routes. | ||
| * | ||
| * @return void | ||
| */ | ||
| public function register_routes() { | ||
|
|
||
| register_rest_route( | ||
| $this->namespace, | ||
| '/' . $this->rest_base . '/lookup', | ||
| array( | ||
| array( | ||
| 'methods' => WP_REST_Server::READABLE, | ||
| 'callback' => array( $this, 'get_template_fallback' ), | ||
| 'permission_callback' => array( $this, 'get_item_permissions_check' ), | ||
| 'args' => array( | ||
| 'slug' => array( | ||
| 'description' => __( 'The slug of the template to get the fallback for', 'gutenberg' ), | ||
| 'type' => 'string', | ||
| 'required' => true, | ||
| ), | ||
| 'is_custom' => array( | ||
| 'description' => __( 'Indicates if a template is custom or part of the template hierarchy', 'gutenberg' ), | ||
| 'type' => 'boolean', | ||
| ), | ||
| 'template_prefix' => array( | ||
| 'description' => __( 'The template prefix for the created template. This is used to extract the main template type ex. in `taxonomy-books` we extract the `taxonomy`', 'gutenberg' ), | ||
| 'type' => 'string', | ||
| ), | ||
| ), | ||
| ), | ||
| ) | ||
| ); | ||
| parent::register_routes(); | ||
| // Get fallback template content. | ||
| } | ||
|
|
||
| /** | ||
| * Returns the fallback template for a given slug. | ||
| * | ||
| * @param WP_REST_Request $request The request instance. | ||
| * | ||
| * @return WP_REST_Response|WP_Error | ||
| */ | ||
| public function get_template_fallback( $request ) { | ||
| $hierarchy = get_template_hierarchy( $request['slug'], $request['is_custom'], $request['template_prefix'] ); | ||
| $fallback_template = null; | ||
| do { | ||
| $fallback_template = resolve_block_template( $request['slug'], $hierarchy, '' ); | ||
| array_shift( $hierarchy ); | ||
| } while ( ! empty( $hierarchy ) && empty( $fallback_template->content ) ); | ||
| $response = $this->prepare_item_for_response( $fallback_template, $request ); | ||
| return rest_ensure_response( $response ); | ||
| } | ||
| } | ||
|
There was a problem hiding this comment. Maybe we can add a unit test for this endpoint? There was a problem hiding this comment. I added a unit test. |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Modal } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useState, useEffect, useMemo } from '@wordpress/element'; | ||
| import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useAsyncList } from '@wordpress/compose'; | ||
| import { store as preferencesStore } from '@wordpress/preferences'; | ||
| import { parse } from '@wordpress/blocks'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as editSiteStore } from '../../store'; | ||
| import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data'; | ||
| import apiFetch from '@wordpress/api-fetch'; | ||
| import { addQueryArgs } from '@wordpress/url'; | ||
|
|
||
| function useFallbackTemplateContent( slug, isCustom = false ) { | ||
| const [ templateContent, setTemplateContent ] = useState( '' ); | ||
|
|
||
| useEffect( () => { | ||
| apiFetch( { | ||
| path: addQueryArgs( '/wp/v2/templates/lookup', { | ||
youknowriad marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| slug, | ||
| is_custom: isCustom, | ||
| ignore_empty: true, | ||
| } ), | ||
| } ).then( ( { content } ) => setTemplateContent( content.raw ) ); | ||
| }, [ slug ] ); | ||
| return templateContent; | ||
| } | ||
|
|
||
| const START_BLANK_TITLE = __( 'Start blank' ); | ||
|
|
||
| function PatternSelection( { fallbackContent, onChoosePattern, postType } ) { | ||
| const [ , , onChange ] = useEntityBlockEditor( 'postType', postType ); | ||
| const blockPatterns = useMemo( | ||
| () => [ | ||
| { | ||
| name: 'fallback', | ||
| blocks: parse( fallbackContent ), | ||
| title: __( 'Fallback content' ), | ||
| }, | ||
| { | ||
| name: 'start-blank', | ||
| blocks: parse( | ||
| '<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->' | ||
| ), | ||
| title: START_BLANK_TITLE, | ||
| }, | ||
| ], | ||
| [ fallbackContent ] | ||
| ); | ||
| const shownBlockPatterns = useAsyncList( blockPatterns ); | ||
|
|
||
| return ( | ||
| <div | ||
| className="edit-site-start-template-options__pattern-container" | ||
| style={ { | ||
| '--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`, | ||
| } } | ||
| > | ||
| <BlockPatternsList | ||
| blockPatterns={ blockPatterns } | ||
| shownPatterns={ shownBlockPatterns } | ||
| onClickPattern={ ( pattern, blocks ) => { | ||
| onChange( 'start-blank' === pattern.name ? [] : blocks, { | ||
| selection: undefined, | ||
| } ); | ||
| onChoosePattern(); | ||
| } } | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function StartModal( { slug, isCustom, onClose, postType } ) { | ||
| const fallbackContent = useFallbackTemplateContent( slug, isCustom ); | ||
| if ( ! fallbackContent ) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Modal | ||
| className="edit-site-start-template-options__modal" | ||
| title={ __( 'Choose a pattern' ) } | ||
| closeLabel={ __( 'Cancel' ) } | ||
| focusOnMount="firstElement" | ||
| onRequestClose={ onClose } | ||
| > | ||
| <div className="edit-site-start-template-options__modal-content"> | ||
| <PatternSelection | ||
| fallbackContent={ fallbackContent } | ||
| slug={ slug } | ||
| isCustom={ isCustom } | ||
| postType={ postType } | ||
| onChoosePattern={ () => { | ||
| onClose(); | ||
| } } | ||
| /> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| const START_TEMPLATE_MODAL_STATES = { | ||
| INITIAL: 'INITIAL', | ||
| CLOSED: 'CLOSED', | ||
| }; | ||
|
|
||
| export default function StartTemplateOptions() { | ||
| const [ modalState, setModalState ] = useState( | ||
| START_TEMPLATE_MODAL_STATES.INITIAL | ||
| ); | ||
| const { shouldOpenModel, slug, isCustom, postType } = useSelect( | ||
| ( select ) => { | ||
| const { getEditedPostType, getEditedPostId } = | ||
| select( editSiteStore ); | ||
| const _postType = getEditedPostType(); | ||
| const postId = getEditedPostId(); | ||
| const { | ||
| __experimentalGetDirtyEntityRecords, | ||
| getEditedEntityRecord, | ||
| } = select( coreStore ); | ||
| const templateRecord = getEditedEntityRecord( | ||
| 'postType', | ||
| _postType, | ||
| postId | ||
| ); | ||
|
|
||
| const hasDirtyEntityRecords = | ||
| __experimentalGetDirtyEntityRecords().length > 0; | ||
|
|
||
| return { | ||
| shouldOpenModel: | ||
| ! hasDirtyEntityRecords && | ||
| '' === templateRecord.content && | ||
| 'wp_template' === _postType && | ||
| ! select( preferencesStore ).get( | ||
| 'core/edit-site', | ||
| 'welcomeGuide' | ||
| ), | ||
| slug: templateRecord.slug, | ||
| isCustom: templateRecord.is_custom, | ||
| postType: _postType, | ||
| }; | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| if ( | ||
| ( modalState === START_TEMPLATE_MODAL_STATES.INITIAL && | ||
| ! shouldOpenModel ) || | ||
| modalState === START_TEMPLATE_MODAL_STATES.CLOSED | ||
| ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <StartModal | ||
| slug={ slug } | ||
| isCustom={ isCustom } | ||
| postType={ postType } | ||
| onClose={ () => | ||
| setModalState( START_TEMPLATE_MODAL_STATES.CLOSED ) | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why lookup? Should it be
/fallback?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh this doesn't look like a new endpoint, what changed in this PR then?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My changes are in a separate commit at 505d0c0. The rest is just moving the endpoint.