Skip to content

Commit

Permalink
Moar isolating
Browse files Browse the repository at this point in the history
  • Loading branch information
@ockham
ockham committed Dec 16, 2019
1 parent b6207a8 commit 2b197af
Showing 7 changed files with 346 additions and 340 deletions.
1 change: 1 addition & 0 deletions ...g-plugin/starter-page-templates/page-template-modal/components/template-selector/index.js
View file
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ import { memo } from '@wordpress/element';
*/
import TemplateSelectorItem from './item';
import replacePlaceholders from '../../utils/replace-placeholders';
import './style.scss';

export const TemplateSelector = ( {
label,
8 changes: 5 additions & 3 deletions ...plugin/starter-page-templates/page-template-modal/components/template-selector/preview.js
View file
Original file line number Diff line number Diff line change
@@ -21,6 +21,8 @@ import { useState, useEffect, useLayoutEffect, useRef, useReducer } from '@wordp
import PreviewTemplateTitle from './preview-template-title';
import BlockPreview from './block-preview';

import './preview.scss';

const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
const THRESHOLD_RESIZE = 300;

@@ -67,7 +69,7 @@ const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {

// Try to adjust vertical offset of the large preview.
const offsetCorrectionEl = previewContainerEl.closest(
'.template-selector-preview__offset-correction'
'.template-selector__preview-offset-correction'
);

if ( offsetCorrectionEl && scale ) {
@@ -106,7 +108,7 @@ const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
if ( isEmpty( blocks ) || ! isArray( blocks ) ) {
return (
<div className={ classnames( 'template-selector-preview', 'is-blank-preview' ) }>
<div className="template-selector-preview__placeholder">
<div className="template-selector__preview-placeholder">
{ __( 'Select a layout to preview.', 'full-site-editing' ) }
</div>
</div>
@@ -121,7 +123,7 @@ const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
<div className="editor-styles-wrapper" style={ { visibility } }>
<div className="editor-writing-flow">
<PreviewTemplateTitle title={ title } />
<div className="template-selector-preview__offset-correction">
<div className="template-selector__preview-offset-correction">
<BlockPreview key={ recompute } blocks={ blocks } viewportWidth={ viewportWidth } />
</div>
</div>
182 changes: 182 additions & 0 deletions ...ugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
@import './shared.scss';

// Template Selector Preview
.template-selector-preview {
@media screen and ( max-width: 659px ) {
display: none;
}

@media screen and ( min-width: 783px ) {
width: calc( 70% - 50px );
}

@media screen and ( min-width: 660px ) {
&.is-blank-preview {
align-items: center;
display: flex;
justify-content: center;
}
}

@media screen and ( min-width: 1648px ) {
right: unset;
left: calc(
#{$preview-left-sidebar-full} + (
100vw - #{$preview-left-sidebar-full} - #{$preview-max-width} - #{$preview-right-margin}
) / 2
);
body.folded & {
left: calc(
#{$preview-left-sidebar-reduced} + (
100vw - #{$preview-left-sidebar-reduced} - #{$preview-max-width} - #{$preview-right-margin}
) / 2
);
}
}

position: fixed;
top: 111px;
bottom: 24px;
right: $preview-right-margin;
width: calc( 80% - 50px );
background: $template-selector-empty-background;
border-radius: 2px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.14 ), 0 3px 1px -2px rgba( 0, 0, 0, 0.12 ),
0 1px 5px 0 rgba( 0, 0, 0, 0.2 );

.edit-post-visual-editor {
margin: 0;
padding: 0;
}

.editor-styles-wrapper {
.template-selector__preview-offset-correction {
position: relative;
top: $template-large-preview-title-height;
}

.editor-post-title {
transform-origin: top left;
width: 960px;
display: block;
position: absolute;
top: 0;
}

.editor-post-title,
.editor-post-title__block,
.editor-post-title__input {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
.editor-post-title__input {
margin: 0;
padding: 0;
height: $template-large-preview-title-height;
line-height: $template-large-preview-title-height;
overflow: hidden;
resize: none;
}
}
}
}

body:not( .is-fullscreen-mode ) {
.template-selector-preview {
@media screen and ( min-width: 783px ) {
width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
}

@media screen and ( min-width: 961px ) {
width: calc( 70% - #{$wp-org-sidebar-full} );
}
}
@media screen and ( min-width: 783px ) {
&.folded .template-selector-preview {
width: calc( 70% - #{$wp-org-sidebar-reduced + ( 24px * 2 )} );
}
&:not( .folded ):not( .auto-fold ) .template-selector-preview {
width: calc( 70% - #{$wp-org-sidebar-full} );
}
}
}

.template-selector__preview-placeholder {
color: var( --color-text-subtle );
font-size: 15px;
font-weight: 400;
}

// Preview adjustments.
// Tweak styles which are inside of the preview container.
.block-editor-block-preview__container,
.template-selector-preview {
max-width: $preview-max-width;

.editor-styles-wrapper {
.wp-block {
width: 100%;
}

.wp-block[data-align='wide'] {
//max-width: 800px;
}

// `core/cover`
.wp-block[data-type='core/cover'][data-align='full'] {
margin: 0;
.wp-block-cover {
padding: 0;
}
}

// `core/columns`
.wp-block-columns
> .editor-inner-blocks
> .editor-block-list__layout
> [data-type='core/column'] {
//margin-left: -14px;
//margin-right: -14px;

& > .editor-block-list__block-edit > div > .block-core-columns > .editor-inner-blocks {
margin-top: 0;
margin-bottom: 0;
}
}

.block-editor-block-list__block {
&[data-align='full'] {
margin: 0;
}

.block-editor-block-list__block-edit {
@media screen and ( min-width: 600px ) {
margin: 0;
}
}
}

// Fix upstream: https://github.com/WordPress/gutenberg/pull/17202.
.block-editor-block-list__layout,
.block-editor-block-list__block {
padding: inherit;
}
}
}

// Set full height to preview container to inherits styles defined for themes.
.template-selector-preview .components-disabled,
.template-selector-preview .edit-post-visual-editor,
.template-selector-item__preview-wrap .components-disabled,
.template-selector-item__preview-wrap .edit-post-visual-editor {
height: 100%;

.editor-styles-wrapper {
height: 100%;
}
}

$template-large-preview-title-height: 120px;
21 changes: 21 additions & 0 deletions ...lugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
$template-selector-border-color: #e2e4e7;
$template-selector-border-color-selected: #555d66;
$template-selector-border-color-active: #00a0d2;
$template-selector-border-color-hover: #c9c9ca;
$template-selector-empty-background: #fff;
$template-selector-modal-offset-bottom: 25px;
$template-selector-modal-offset-right: 32px;
$template-selector-blank-template-mobile-height: 70px;

@mixin screen-reader-text() {
border: 0;
clip: rect( 1px, 1px, 1px, 1px );
clip-path: inset( 50% );
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
135 changes: 135 additions & 0 deletions ...plugin/starter-page-templates/page-template-modal/components/template-selector/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
@import './shared.scss';

.components-base-control.template-selector-control {
.components-base-control__label {
@include screen-reader-text();
}
}

.template-selector__options {
display: grid;
// stylelint-disable-next-line unit-whitelist
grid-template-columns: 1fr;
grid-gap: 1.75em;

@media screen and ( min-width: 660px ) {
margin-top: 0;
// stylelint-disable unit-whitelist
grid-template-columns: repeat(
auto-fit,
minmax( 110px, 1fr )
); // allow grid to take over number of cols on large screens
// stylelint-enable unit-whitelist
}
}

.template-selector__option {
margin-bottom: 4px;
}

.template-selector-item__label {
display: block;
width: 100%;
font-size: 14px;
text-align: center;
border: solid 2px $template-selector-border-color;
border-radius: 6px;
cursor: pointer;
appearance: none;
padding: 0;
overflow: hidden;
background-color: #fff;
position: relative;
transform: translateZ( 0 ); // Fix for Safari rounded border overflow (1/2).

.template-selector-item__template-title {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 40px;
line-height: 40px;
background-color: #fff;
}

&:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px $template-selector-border-color-active;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}

&:hover {
border: solid 2px $template-selector-border-color-hover;
}

&.is-selected {
border: solid 2px $template-selector-border-color-selected;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
outline-offset: -2px;

&:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px $template-selector-border-color-active;
border: solid 2px $template-selector-border-color-selected;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 4px solid transparent;
outline-offset: -4px;
}
}
}

.template-selector-item__preview-wrap {
width: 100%;
display: block;
margin: 0 auto;
background: $template-selector-empty-background;
border-radius: 0;
overflow: hidden;
height: 0;
padding-top: 100%; // Aspect radio boxes. It will take the 100% of width.
box-sizing: content-box;
position: relative;
pointer-events: none;
opacity: 1;
transform: translateZ( 0 ); // Fix for Safari rounded border overflow (2/2).

@media screen and ( max-width: 659px ) {
padding-top: 120%;
}

&.is-rendering {
opacity: 0.5;
}

.block-editor-block-list__layout,
.block-editor-block-list__block {
padding: inherit;
}
}

.template-selector-item__media {
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

// Blank template
.template-selector__template:first-child {
.template-selector-item__preview-wrap {
@media screen and ( max-width: 659px ) {
padding-top: 0%;
height: $template-selector-blank-template-mobile-height;
}
}
.template-selector-item__template-title {
@media screen and ( max-width: 659px ) {
height: $template-selector-blank-template-mobile-height;
line-height: $template-selector-blank-template-mobile-height;
}
}
}
2 changes: 1 addition & 1 deletion ...al/components/template-selector/test/__snapshots__/template-selector-preview-test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ exports[`TemplateSelectorPreview Basic rendering renders the preview when blocks
</div>
</div>
<div
class="template-selector-preview__offset-correction"
class="template-selector__preview-offset-correction"
>
<div
data-testid="block-template-preview"
Loading

0 comments on commit 2b197af

Please sign in to comment.