From c19587fc067d060793177ba79576b8f27b179014 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Tue, 1 Mar 2022 18:16:27 +0000
Subject: [PATCH] Add: Option to pick a pattern on page start.

---
 .../wordpress-6.0/block-patterns-update.php   |   8 +-
 .../edit-post/src/components/layout/index.js  |   2 +
 .../components/start-page-options/index.js    | 121 ++++++++++++++++++
 .../components/start-page-options/style.scss  |  27 ++++
 packages/edit-post/src/style.scss             |   1 +
 5 files changed, 155 insertions(+), 4 deletions(-)
 create mode 100644 packages/edit-post/src/components/start-page-options/index.js
 create mode 100644 packages/edit-post/src/components/start-page-options/style.scss

diff --git a/lib/compat/wordpress-6.0/block-patterns-update.php b/lib/compat/wordpress-6.0/block-patterns-update.php
index d3585a774de27d..756bbf662f7308 100644
--- a/lib/compat/wordpress-6.0/block-patterns-update.php
+++ b/lib/compat/wordpress-6.0/block-patterns-update.php
@@ -17,7 +17,7 @@ function gutenberg_register_gutenberg_patterns() {
 	$patterns = array(
 		'query-standard-posts'                 => array(
 			'title'      => _x( 'Standard', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
+			'blockTypes' => array( 'core/query', 'core/post-content' ),
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
 							<div class="wp-block-query">
@@ -35,7 +35,7 @@ function gutenberg_register_gutenberg_patterns() {
 		),
 		'query-medium-posts'                   => array(
 			'title'      => _x( 'Image at left', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
+			'blockTypes' => array( 'core/query', 'core/post-content' ),
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
 							<div class="wp-block-query">
@@ -55,7 +55,7 @@ function gutenberg_register_gutenberg_patterns() {
 		),
 		'query-small-posts'                    => array(
 			'title'      => _x( 'Small image and title', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
+			'blockTypes' => array( 'core/query', 'core/post-content' ),
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
 							<div class="wp-block-query">
@@ -74,7 +74,7 @@ function gutenberg_register_gutenberg_patterns() {
 		),
 		'query-grid-posts'                     => array(
 			'title'      => _x( 'Grid', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
+			'blockTypes' => array( 'core/query', 'core/post-content' ),
 			'categories' => array( 'query' ),
 			'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
 							<div class="wp-block-query">
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 50e388f31b3c85..977ecce2ffde74 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -47,6 +47,7 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
+import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 
 const interfaceLabels = {
@@ -286,6 +287,7 @@ function Layout( { styles } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
+			<StartPageOptions />
 			<Popover.Slot />
 			<PluginArea onError={ onPluginAreaError } />
 		</>
diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js
new file mode 100644
index 00000000000000..6f9e0cebe57dee
--- /dev/null
+++ b/packages/edit-post/src/components/start-page-options/index.js
@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	__experimentalBlockPatternsList as BlockPatternsList,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useAsyncList } from '@wordpress/compose';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+function PatternSelection( { onChoosePattern } ) {
+	const { blockPatterns } = useSelect( ( select ) => {
+		const { __experimentalGetPatternsByBlockTypes } = select(
+			blockEditorStore
+		);
+		return {
+			blockPatterns: __experimentalGetPatternsByBlockTypes(
+				'core/post-content'
+			),
+		};
+	}, [] );
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+	const { resetEditorBlocks } = useDispatch( editorStore );
+	useEffect( () => {
+		if ( blockPatterns.length <= 1 ) {
+			onChoosePattern();
+		}
+	}, [ blockPatterns.length ] );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( _pattern, blocks ) => {
+				resetEditorBlocks( blocks );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+const START_PAGE_MODAL_STATES = {
+	INITIAL: 'INITIAL',
+	PATTERN: 'PATTERN',
+	CLOSED: 'CLOSED',
+};
+
+export default function StartPageOptions() {
+	const [ modalState, setModalState ] = useState(
+		START_PAGE_MODAL_STATES.INITIAL
+	);
+	const shouldOpenModel = useSelect(
+		( select ) => {
+			if ( modalState !== START_PAGE_MODAL_STATES.INITIAL ) {
+				return false;
+			}
+			const { __experimentalGetPatternsByBlockTypes } = select(
+				blockEditorStore
+			);
+			const {
+				getCurrentPostType,
+				getEditedPostContent,
+				isEditedPostSaveable,
+			} = select( editorStore );
+			const { isEditingTemplate, isFeatureActive } = select(
+				editPostStore
+			);
+			return (
+				getCurrentPostType() === 'page' &&
+				! isEditedPostSaveable() &&
+				'' === getEditedPostContent() &&
+				! isEditingTemplate() &&
+				! isFeatureActive( 'welcomeGuide' ) &&
+				__experimentalGetPatternsByBlockTypes( 'core/post-content' )
+					.length >= 1
+			);
+		},
+		[ modalState ]
+	);
+
+	useEffect( () => {
+		if ( shouldOpenModel ) {
+			setModalState( START_PAGE_MODAL_STATES.PATTERN );
+		}
+	}, [ shouldOpenModel ] );
+
+	if (
+		modalState === START_PAGE_MODAL_STATES.INITIAL ||
+		modalState === START_PAGE_MODAL_STATES.CLOSED
+	) {
+		return null;
+	}
+	return (
+		<Modal
+			className="edit-post-start-page-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			onRequestClose={ () => {
+				setModalState( START_PAGE_MODAL_STATES.CLOSED );
+			} }
+		>
+			<div className="edit-post-start-page-options__modal-content">
+				{ modalState === START_PAGE_MODAL_STATES.PATTERN && (
+					<PatternSelection
+						onChoosePattern={ () => {
+							setModalState( START_PAGE_MODAL_STATES.CLOSED );
+						} }
+					/>
+				) }
+			</div>
+		</Modal>
+	);
+}
diff --git a/packages/edit-post/src/components/start-page-options/style.scss b/packages/edit-post/src/components/start-page-options/style.scss
new file mode 100644
index 00000000000000..78c0011aa6f288
--- /dev/null
+++ b/packages/edit-post/src/components/start-page-options/style.scss
@@ -0,0 +1,27 @@
+.edit-post-start-page-options__modal {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: $break-medium - $grid-unit-20 * 2;
+	}
+	@include break-large() {
+		height: 70%;
+	}
+}
+
+.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: $grid-unit-10;
+
+	.block-editor-block-patterns-list__list-item {
+		margin-bottom: 0;
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
+	}
+}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index a8360e0d8be2b7..c4ec7dc7100df1 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -22,6 +22,7 @@
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
+@import "./components/start-page-options/style.scss";
 
 /**
  * Animations