From 8ce8a8fc5e1006bdfbb5a63c07e9cb0f0af3c231 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 21 Jan 2021 12:46:41 +0100 Subject: [PATCH 1/2] Change the post template visually --- .../src/components/block-preview/index.js | 24 ++-- .../sidebar/post-template/change-modal.js | 126 ++++++++++++++++++ .../components/sidebar/post-template/index.js | 97 ++++++++------ .../sidebar/post-template/style.scss | 40 ++++++ 4 files changed, 239 insertions(+), 48 deletions(-) create mode 100644 packages/edit-post/src/components/sidebar/post-template/change-modal.js diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index d67d044fc27b5b..32d704ad5f804c 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -15,9 +15,11 @@ import { memo, useMemo } from '@wordpress/element'; import BlockEditorProvider from '../provider'; import LiveBlockPreview from './live'; import AutoHeightBlockPreview from './auto'; +import { BlockContextProvider } from '../block-context'; export function BlockPreview( { blocks, + context = {}, __experimentalPadding = 0, viewportWidth = 1200, __experimentalLive = false, @@ -32,16 +34,18 @@ export function BlockPreview( { return null; } return ( - - { __experimentalLive ? ( - - ) : ( - - ) } - + + + { __experimentalLive ? ( + + ) : ( + + ) } + + ); } diff --git a/packages/edit-post/src/components/sidebar/post-template/change-modal.js b/packages/edit-post/src/components/sidebar/post-template/change-modal.js new file mode 100644 index 00000000000000..96738fe12a3ea9 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-template/change-modal.js @@ -0,0 +1,126 @@ +/** + * External dependencies + */ +import { map } from 'lodash'; + +/** + * WordPress dependencies + */ +import { Modal } from '@wordpress/components'; +import { store as editorStore } from '@wordpress/editor'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { store as coreStore } from '@wordpress/core-data'; +import { BlockPreview } from '@wordpress/block-editor'; +import { useMemo } from '@wordpress/element'; +import { parse } from '@wordpress/blocks'; +import { ENTER, SPACE } from '@wordpress/keycodes'; + +function TemplateItem( { slug, name } ) { + const { isResolved, template, postId, postType } = useSelect( + ( select ) => { + const { + getCurrentTheme, + getEntityRecord, + hasFinishedResolution, + } = select( coreStore ); + const { getCurrentPostId, getCurrentPostType } = select( + editorStore + ); + const theme = getCurrentTheme(); + const templateId = theme ? theme.stylesheet + '//' + slug : null; + const getEntityArgs = [ 'postType', 'wp_template', templateId ]; + const entityRecord = templateId + ? getEntityRecord( ...getEntityArgs ) + : null; + const hasResolvedEntity = templateId + ? hasFinishedResolution( 'getEntityRecord', getEntityArgs ) + : false; + + return { + template: entityRecord, + isResolved: hasResolvedEntity, + postId: getCurrentPostId(), + postType: getCurrentPostType(), + }; + }, + [ slug ] + ); + + const { editPost } = useDispatch( editorStore ); + + const blocks = useMemo( () => { + if ( ! template?.content?.raw ) { + return []; + } + return parse( template.content.raw ); + }, [ template ] ); + + const defaultBlockContext = useMemo( () => { + return { postId, postType }; + }, [ postId, postType ] ); + + const onSelect = () => { + editPost( { + template: slug, + } ); + }; + + return ( + isResolved && ( +
{ + if ( ENTER === event.keyCode || SPACE === event.keyCode ) { + onSelect(); + } + } } + > + +
+ { name } +
+
+ ) + ); +} + +function TemplateChangeModal( { onClose } ) { + const { availableTemplates } = useSelect( ( select ) => { + const { getEditorSettings } = select( editorStore ); + const { availableTemplates: _templates } = getEditorSettings(); + return { + availableTemplates: _templates, + }; + }, [] ); + + return ( + +
+ { map( availableTemplates, ( name, slug ) => { + return ( + + ); + } ) } +
+ + ); +} + +export default TemplateChangeModal; diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js index 806f49fa04edb3..b14d292ad089ab 100644 --- a/packages/edit-post/src/components/sidebar/post-template/index.js +++ b/packages/edit-post/src/components/sidebar/post-template/index.js @@ -4,7 +4,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { PanelRow, Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { createInterpolateElement } from '@wordpress/element'; +import { createInterpolateElement, useState } 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'; @@ -13,6 +13,7 @@ import { store as noticesStore } from '@wordpress/notices'; * Internal dependencies */ import { store as editPostStore } from '../../../store'; +import TemplateChangeModal from './change-modal'; function PostTemplate() { const { template, isEditing, isFSETheme } = useSelect( ( select ) => { @@ -44,51 +45,71 @@ function PostTemplate() { }, [] ); const { setIsEditingTemplate } = useDispatch( editPostStore ); const { createSuccessNotice } = useDispatch( noticesStore ); + const [ isChangingTemplate, setIsChangingTemplate ] = useState( false ); if ( ! isFSETheme || ! template ) { return null; } return ( - - { __( 'Template' ) } - { ! isEditing && ( - - { createInterpolateElement( - sprintf( - /* translators: 1: Template name. */ - __( '%s (Edit)' ), - template.slug - ), - { - a: ( - + <> + + { __( 'Template' ) } + { ! isEditing && ( + + { createInterpolateElement( + sprintf( + /* translators: 1: Template name. */ + __( + '%s (Edit | Change)' + ), + template.slug ), - } - ) } - + { + edit: ( + + ), + change: ( + + ), + } + ) } + + ) } + { isEditing && ( + + { template.slug } + + ) } + + { isChangingTemplate && ( + setIsChangingTemplate( false ) } + /> ) } - { isEditing && ( - - { template.slug } - - ) } - + ); } diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss index d625e897224368..4252fa2043c217 100644 --- a/packages/edit-post/src/components/sidebar/post-template/style.scss +++ b/packages/edit-post/src/components/sidebar/post-template/style.scss @@ -11,3 +11,43 @@ .edit-post-post-template__value { padding-left: 6px; } + +.edit-post-template-change-modal__items { + display: grid; + grid-template-columns: repeat(auto-fill, 100px); +} + +.edit-post-template-change-modal__item { + + border-radius: $radius-block-ui; + cursor: pointer; + margin-top: $grid-unit-20; + transition: all 0.05s ease-in-out; + position: relative; + border: $border-width solid transparent; + + &:hover { + border: $border-width solid var(--wp-admin-theme-color); + } + + &:focus { + box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + } + + &.is-placeholder { + min-height: 100px; + } + + &[draggable="true"] .block-editor-block-preview__container { + cursor: grab; + } +} + +.edit-post-template-change-modal__item-title { + padding: $grid-unit-05; + font-size: 12px; + text-align: center; +} From e48c1eedf297e06c3104b63a4c33ff0be1b425d3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 28 Jan 2021 09:28:45 +0100 Subject: [PATCH 2/2] Correctly style the template switching modal --- .../sidebar/post-template/change-modal.js | 71 ++++++++++++------- .../sidebar/post-template/style.scss | 37 +++++++--- 2 files changed, 73 insertions(+), 35 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-template/change-modal.js b/packages/edit-post/src/components/sidebar/post-template/change-modal.js index 96738fe12a3ea9..e0949f0de727cd 100644 --- a/packages/edit-post/src/components/sidebar/post-template/change-modal.js +++ b/packages/edit-post/src/components/sidebar/post-template/change-modal.js @@ -2,11 +2,12 @@ * External dependencies */ import { map } from 'lodash'; +import classnames from 'classnames'; /** * WordPress dependencies */ -import { Modal } from '@wordpress/components'; +import { Modal, Spinner } from '@wordpress/components'; import { store as editorStore } from '@wordpress/editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -16,7 +17,7 @@ import { useMemo } from '@wordpress/element'; import { parse } from '@wordpress/blocks'; import { ENTER, SPACE } from '@wordpress/keycodes'; -function TemplateItem( { slug, name } ) { +function TemplatePreview( { slug } ) { const { isResolved, template, postId, postType } = useSelect( ( select ) => { const { @@ -47,8 +48,6 @@ function TemplateItem( { slug, name } ) { [ slug ] ); - const { editPost } = useDispatch( editorStore ); - const blocks = useMemo( () => { if ( ! template?.content?.raw ) { return []; @@ -60,6 +59,16 @@ function TemplateItem( { slug, name } ) { return { postId, postType }; }, [ postId, postType ] ); + return ! isResolved ? ( + + ) : ( + + ); +} + +function TemplateItem( { slug, name, isSelected } ) { + const { editPost } = useDispatch( editorStore ); + const onSelect = () => { editPost( { template: slug, @@ -67,42 +76,46 @@ function TemplateItem( { slug, name } ) { }; return ( - isResolved && ( -
{ - if ( ENTER === event.keyCode || SPACE === event.keyCode ) { - onSelect(); - } - } } - > - -
- { name } -
+
{ + if ( ENTER === event.keyCode || SPACE === event.keyCode ) { + onSelect(); + } + } } + > +
+ { slug && } +
+
+ { name }
- ) +
); } function TemplateChangeModal( { onClose } ) { - const { availableTemplates } = useSelect( ( select ) => { - const { getEditorSettings } = select( editorStore ); + const { availableTemplates, selectedTemplate } = useSelect( ( select ) => { + const { getEditorSettings, getEditedPostAttribute } = select( + editorStore + ); const { availableTemplates: _templates } = getEditorSettings(); return { + selectedTemplate: getEditedPostAttribute( 'template' ), availableTemplates: _templates, }; }, [] ); return ( ); } ) } diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss index 4252fa2043c217..952e1bcf9a9ae0 100644 --- a/packages/edit-post/src/components/sidebar/post-template/style.scss +++ b/packages/edit-post/src/components/sidebar/post-template/style.scss @@ -8,17 +8,25 @@ } } +.edit-post-post-template-modal { + background-color: $gray-100; + + @include break-small { + width: 80vw; + } +} + .edit-post-post-template__value { padding-left: 6px; } .edit-post-template-change-modal__items { display: grid; - grid-template-columns: repeat(auto-fill, 100px); + grid-template-columns: repeat(auto-fill, minmax(150px, 200px)); + grid-gap: $grid-unit-20; } .edit-post-template-change-modal__item { - border-radius: $radius-block-ui; cursor: pointer; margin-top: $grid-unit-20; @@ -30,24 +38,37 @@ border: $border-width solid var(--wp-admin-theme-color); } - &:focus { + &:focus, + &.is-selected { box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } - &.is-placeholder { - min-height: 100px; - } - &[draggable="true"] .block-editor-block-preview__container { cursor: grab; } } .edit-post-template-change-modal__item-title { - padding: $grid-unit-05; + padding: $grid-unit-10 0; font-size: 12px; text-align: center; + font-weight: 500; +} + +.edit-post-template-change-modal__item-preview { + overflow: hidden; + box-shadow: $shadow-popover; + background-color: $white; + height: 200px; + display: flex; + align-items: center; + justify-content: center; + + .edit-post-template-change-modal__item.is-default & { + opacity: 0.4; + background: repeating-linear-gradient(-45deg, $gray-400, $gray-400 10px, $white 10px, $white 50px); + } }