Skip to content

Commit

Permalink
Updates the template mode canvas padding and adds a back link (#30658)
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad authored Apr 13, 2021
1 parent b33ee20 commit af1950d
Show file tree
Hide file tree
Showing 10 changed files with 69 additions and 21 deletions.
1 change: 0 additions & 1 deletion packages/base-styles/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ $black: #000; // Use only when you truly need pure black. For UI, use $gray-90
$gray-900: #1e1e1e;
$gray-700: #757575; // Meets 4.6:1 text contrast against white.
$gray-600: #949494; // Meets 3:1 UI or large text contrast against white.
$gray-500: #bbb;
$gray-400: #ccc;
$gray-300: #ddd; // Used for most borders.
$gray-200: #e0e0e0; // Used sparingly for light borders.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useRefEffect } from '@wordpress/compose';
*/
import { store as blockEditorStore } from '../../store';

export function useBlockSelectionClearer() {
export function useBlockSelectionClearer( onlySelfClicks = false ) {
const hasSelection = useSelect( ( select ) => {
const { hasSelectedBlock, hasMultiSelection } = select(
blockEditorStore
Expand All @@ -27,7 +27,10 @@ export function useBlockSelectionClearer() {

function onMouseDown( event ) {
// Only handle clicks on the canvas, not the content.
if ( event.target.closest( '.wp-block' ) ) {
if (
event.target.closest( '.wp-block' ) ||
( onlySelfClicks && event.target !== node )
) {
return;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export default function useResizeCanvas(
maxHeight: height,
overflowY: 'auto',
borderRadius: '2px',
border: '1px solid #ddd',
};
default:
return null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ function TemplateSaveButton() {
const { setIsEditingTemplate } = useDispatch( editPostStore );
return (
<>
<Button onClick={ () => setIsEditingTemplate( false ) } isTertiary>
{ __( 'Cancel' ) }
</Button>
<Button
isPrimary
onClick={ () => setIsEntitiesReviewPanelOpen( true ) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,18 @@ function TemplateTitle() {
return null;
}

let templateTitle = __( 'Default' );
if ( template?.title?.raw ) {
templateTitle = template.title.raw;
} else if ( !! template ) {
templateTitle = template.slug;
}

return (
<span className="edit-post-template-title">
{
/* translators: 1: Template name. */
sprintf( __( 'Editing template: %s' ), template.slug )
sprintf( __( 'Editing template: %s' ), templateTitle )
}
</span>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/layout/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
}

.edit-post-layout .interface-interface-skeleton__content {
background-color: $gray-500;
background-color: $gray-100;
}

.edit-post-layout__inserter-panel {
Expand Down
18 changes: 10 additions & 8 deletions packages/edit-post/src/components/sidebar/post-template/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,18 +59,20 @@ function PostTemplate() {
return null;
}

const templateTitle = (
<>
{ !! template && template?.title?.raw }
{ !! template && ! template?.title?.raw && template.slug }
{ ! template && __( 'Default' ) }
</>
);

return (
<PanelRow className="edit-post-post-template">
<span>{ __( 'Template' ) }</span>
{ ! isEditing && (
<div className="edit-post-post-template__value">
<div>
{ !! template && template?.title?.raw }
{ !! template &&
! template?.title?.raw &&
template.slug }
{ ! template && __( 'Default' ) }
</div>
<div>{ templateTitle }</div>
<div className="edit-post-post-template__actions">
{ !! template && (
<Button
Expand All @@ -90,7 +92,7 @@ function PostTemplate() {
) }
{ isEditing && (
<span className="edit-post-post-template__value">
{ template?.slug }
{ templateTitle }
</span>
) }
{ isModalOpen && (
Expand Down
32 changes: 28 additions & 4 deletions packages/edit-post/src/components/visual-editor/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand All @@ -20,10 +25,12 @@ import {
__experimentalUseEditorFeature as useEditorFeature,
__experimentalLayoutStyle as LayoutStyle,
} from '@wordpress/block-editor';
import { Popover } from '@wordpress/components';
import { Popover, Button } from '@wordpress/components';
import { useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { useSelect, useDispatch } from '@wordpress/data';
import { useMergeRefs } from '@wordpress/compose';
import { arrowLeft } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -51,6 +58,7 @@ export default function VisualEditor( { styles } ) {
const { getSettings } = select( blockEditorStore );
return getSettings().supportsLayout;
}, [] );
const { setIsEditingTemplate } = useDispatch( editPostStore );
const desktopCanvasStyles = {
height: '100%',
// Add a constant padding for the typewritter effect. When typing at the
Expand All @@ -70,12 +78,19 @@ export default function VisualEditor( { styles } ) {
useClipboardHandler(),
useCanvasClickRedirect(),
useTypewriter(),
useBlockSelectionClearer(),
useTypingObserver(),
useBlockSelectionClearer(),
] );

const blockSelectionClearerRef = useBlockSelectionClearer( true );

return (
<div className="edit-post-visual-editor">
<div
className={ classnames( 'edit-post-visual-editor', {
'is-template-mode': isTemplateMode,
} ) }
ref={ blockSelectionClearerRef }
>
{ themeSupportsLayout && (
<LayoutStyle
selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
Expand All @@ -85,6 +100,15 @@ export default function VisualEditor( { styles } ) {
<EditorStyles styles={ styles } />
<VisualEditorGlobalKeyboardShortcuts />
<Popover.Slot name="block-toolbar" />
{ isTemplateMode && (
<Button
className="edit-post-visual-editor__exit-template-mode"
icon={ arrowLeft }
onClick={ () => setIsEditingTemplate( false ) }
>
{ __( 'Back' ) }
</Button>
) }
<div
ref={ mergedRefs }
className="editor-styles-wrapper"
Expand Down
15 changes: 15 additions & 0 deletions packages/edit-post/src/components/visual-editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@
@supports (position: sticky) {
flex-basis: 100%;
}

&.is-template-mode {
padding: $grid-unit-60;

.editor-styles-wrapper {
border-radius: 2px;
border: 1px solid $gray-300;
}
}
}

.editor-styles-wrapper {
Expand Down Expand Up @@ -55,3 +64,9 @@
margin-bottom: $default-block-margin;
}
}

.edit-post-visual-editor__exit-template-mode {
position: absolute;
top: $grid-unit-10;
left: $grid-unit-10;
}
2 changes: 1 addition & 1 deletion packages/edit-post/src/store/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export function isSavingMetaBoxes( state ) {
* @return {string} Device type.
*/
export function __experimentalGetPreviewDeviceType( state ) {
return state.deviceType;
return state.isEditingTemplate ? 'Desktop' : state.deviceType;
}

/**
Expand Down

0 comments on commit af1950d

Please sign in to comment.