From 24c207a11f8797d7da1cec26ea290545904bd406 Mon Sep 17 00:00:00 2001 From: Jorge Bernal Date: Mon, 2 Dec 2019 10:52:31 +0100 Subject: [PATCH] Experimental page template selector (#18052) * Adds experiment for Page Templates * First prototype of Page Template Picker. It's very rough, but mostly focused on where is the right place to put the new components and how to connect them. * Refactor Page Template Picker display logic into HOC * Move default templates into separate component * Added missing files for templates * Port template picker to native * Take post type from props in native editor initialization * Render block footer in the right place * Port experimental template picker to native * Fix lint errors * Use custom wrapper for picker container Exporting Fragment directly would fail, since Fragment won't take the style prop * Move the default templates inside the picker component for now They don't make sense right now as a standalone component, and will likely move to the store in the future * Fix __experimentalWithPageTemplatePickerVisible * Also show template picker when there is placeholder content * Lint fixes --- lib/experiments-page.php | 12 ++++++ packages/block-editor/README.md | 1 + .../src/components/block-list-footer/index.js | 10 +++++ .../src/components/block-list/index.js | 3 ++ .../src/components/block-list/index.native.js | 15 ++++--- packages/block-editor/src/components/index.js | 6 +++ .../src/components/index.native.js | 1 + .../components/page-template-picker/button.js | 19 +++++++++ .../page-template-picker/button.native.js | 20 +++++++++ .../page-template-picker/container.js | 9 ++++ .../page-template-picker/container.native.js | 6 +++ .../page-template-picker/default-templates.js | 6 +++ .../components/page-template-picker/index.js | 10 +++++ .../components/page-template-picker/picker.js | 42 +++++++++++++++++++ .../use-page-template-picker-visible.js | 32 ++++++++++++++ .../with-page-template-picker-visible.js | 24 +++++++++++ packages/block-editor/src/store/defaults.js | 2 + .../edit-post/src/components/layout/index.js | 9 +++- .../src/components/layout/index.native.js | 5 ++- .../editor/src/components/provider/index.js | 1 + 20 files changed, 225 insertions(+), 8 deletions(-) create mode 100644 packages/block-editor/src/components/block-list-footer/index.js create mode 100644 packages/block-editor/src/components/page-template-picker/button.js create mode 100644 packages/block-editor/src/components/page-template-picker/button.native.js create mode 100644 packages/block-editor/src/components/page-template-picker/container.js create mode 100644 packages/block-editor/src/components/page-template-picker/container.native.js create mode 100644 packages/block-editor/src/components/page-template-picker/default-templates.js create mode 100644 packages/block-editor/src/components/page-template-picker/index.js create mode 100644 packages/block-editor/src/components/page-template-picker/picker.js create mode 100644 packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js create mode 100644 packages/block-editor/src/components/page-template-picker/with-page-template-picker-visible.js diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 4101924c67ce5..e02d522ad4e0c 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -84,6 +84,17 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-full-site-editing-demo', ) ); + add_settings_field( + 'gutenberg-page-templates', + __( 'Page Templates', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Enable Page Templates', 'gutenberg' ), + 'id' => 'gutenberg-page-templates', + ) + ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' @@ -135,6 +146,7 @@ function gutenberg_experiments_editor_settings( $settings ) { '__experimentalBlockDirectory' => gutenberg_is_experiment_enabled( 'gutenberg-block-directory' ), '__experimentalEnableFullSiteEditing' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ), '__experimentalEnableFullSiteEditingDemo' => gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ), + '__experimentalEnablePageTemplates' => gutenberg_is_experiment_enabled( 'gutenberg-page-templates' ), ); $gradient_presets = current( (array) get_theme_support( '__experimental-editor-gradient-presets' ) ); diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 682ee81ad55f8..213e7d318cc09 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -411,6 +411,7 @@ _Properties_ - _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory - _\_\_experimentalEnableFullSiteEditing_ `boolean`: Whether the user has enabled Full Site Editing - _\_\_experimentalEnableFullSiteEditingDemo_ `boolean`: Whether the user has enabled Full Site Editing Demo Templates +- _\_\_experimentalEnablePageTemplates_ `boolean`: Whether the user has enabled the Page Templates # **SkipToSelectedBlock** diff --git a/packages/block-editor/src/components/block-list-footer/index.js b/packages/block-editor/src/components/block-list-footer/index.js new file mode 100644 index 0000000000000..3beba29d90b0a --- /dev/null +++ b/packages/block-editor/src/components/block-list-footer/index.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +const { Fill: __experimentalBlockListFooter, Slot } = createSlotFill( '__experimentalBlockListFooter' ); + +__experimentalBlockListFooter.Slot = Slot; + +export default __experimentalBlockListFooter; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 4f58be8831dde..26687ca7a0433 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -20,6 +20,7 @@ import { compose } from '@wordpress/compose'; import BlockAsyncModeProvider from './block-async-mode-provider'; import BlockListBlock from './block'; import BlockListAppender from '../block-list-appender'; +import __experimentalBlockListFooter from '../block-list-footer'; /** * If the block count exceeds the threshold, we disable the reordering animation @@ -266,6 +267,8 @@ class BlockList extends Component { rootClientId={ rootClientId } renderAppender={ renderAppender } /> + + <__experimentalBlockListFooter.Slot /> ); } diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index c291cec2215d3..923040799a56d 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -20,6 +20,7 @@ import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/component import styles from './style.scss'; import BlockListBlock from './block'; import BlockListAppender from '../block-list-appender'; +import __experimentalBlockListFooter from '../block-list-footer'; import FloatingToolbar from './block-mobile-floating-toolbar'; const innerToolbarHeight = 44; @@ -109,6 +110,7 @@ export class BlockList extends Component { renderAppender={ this.props.renderAppender } /> } + ); } @@ -156,11 +158,14 @@ export class BlockList extends Component { renderBlockListFooter() { const paragraphBlock = createBlock( 'core/paragraph' ); return ( - { - this.addBlockToEndOfPost( paragraphBlock ); - } } > - - + <> + { + this.addBlockToEndOfPost( paragraphBlock ); + } } > + + + <__experimentalBlockListFooter.Slot /> + ); } } diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index c609173deb18e..1fd101c30082d 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -50,9 +50,15 @@ export { default as withColorContext } from './color-palette/with-color-context' * Content Related Components */ +export { default as __experimentalBlockListFooter } from './block-list-footer'; export { default as __experimentalBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item'; export { default as __experimentalBlockSettingsMenuPluginsExtension } from './block-settings-menu/block-settings-menu-plugins-extension'; export { default as __experimentalInserterMenuExtension } from './inserter-menu-extension'; +export { + __experimentalPageTemplatePicker, + __experimentalWithPageTemplatePickerVisible, + __experimentalUsePageTemplatePickerVisible, +} from './page-template-picker'; export { default as BlockEditorKeyboardShortcuts } from './block-editor-keyboard-shortcuts'; export { default as BlockInspector } from './block-inspector'; export { default as BlockList } from './block-list'; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 6baafd5d8f0bb..5f88d2b81a501 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -27,6 +27,7 @@ export { BottomSheetSettings, BlockSettingsButton } from './block-settings'; export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player'; // Content Related Components +export { __experimentalPageTemplatePicker, __experimentalWithPageTemplatePickerVisible } from './page-template-picker'; export { default as BlockList } from './block-list'; export { default as BlockMover } from './block-mover'; export { default as BlockToolbar } from './block-toolbar'; diff --git a/packages/block-editor/src/components/page-template-picker/button.js b/packages/block-editor/src/components/page-template-picker/button.js new file mode 100644 index 0000000000000..6677fb87af5bc --- /dev/null +++ b/packages/block-editor/src/components/page-template-picker/button.js @@ -0,0 +1,19 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; + +const PickerButton = ( props ) => { + const { + label, + onPress, + } = props; + + return ( + + ); +}; + +export default PickerButton; diff --git a/packages/block-editor/src/components/page-template-picker/button.native.js b/packages/block-editor/src/components/page-template-picker/button.native.js new file mode 100644 index 0000000000000..36f9a97eb6c43 --- /dev/null +++ b/packages/block-editor/src/components/page-template-picker/button.native.js @@ -0,0 +1,20 @@ +/** + * External dependencies + */ +import { Button } from 'react-native'; + +const PickerButton = ( props ) => { + const { + label, + onPress, + } = props; + + return ( +