Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SPT: Isolate TemplateSelectorControl component #38445

Closed
wants to merge 11 commits into from
Closed

SPT: Isolate TemplateSelectorControl component #38445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b6207a8
SPT: Move Template Selector files into separate directory
ockham Dec 16, 2019
2b197af
Moar isolating
ockham Dec 16, 2019
e06b61a
Move more styles
ockham Dec 16, 2019
c2bbed8
Fix a path
ockham Dec 16, 2019
b73066c
Update snapshots
ockham Dec 16, 2019
f4adda3
Use variables from @wordpress/base-styles
ockham Dec 16, 2019
ba960df
Have FSE depend on @wordpress/base-styles
ockham Dec 16, 2019
7b3639e
Fix import
ockham Dec 16, 2019
40b73e8
Aaand add back other needed import
ockham Dec 16, 2019
be80333
Add workaround
ockham Dec 16, 2019
36920fc
Moar workaround
ockham Dec 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...ting-plugin/starter-page-templates/page-template-modal/components/sidebar-modal-opener.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { PageTemplatesPlugin } from '../index';
import TemplateSelectorItem from './template-selector-item';
import TemplateSelectorItem from './template-selector/item';
import replacePlaceholders from '../utils/replace-placeholders';
/* eslint-enable import/no-extraneous-dependencies */
class SidebarModalOpener extends Component {
Expand Down
0 ...emplate-modal/components/block-preview.js → ...onents/template-selector/block-preview.js
View file
Open in desktop
File renamed without changes.
0 ...odal/components/block-template-preview.js → ...mplate-selector/block-template-preview.js
View file
Open in desktop
File renamed without changes.
20 changes: 9 additions & 11 deletions ...l/components/template-selector-control.js → ...dal/components/template-selector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ import { memo } from '@wordpress/element';
/**
* Internal dependencies
*/
import TemplateSelectorItem from './template-selector-item';
import replacePlaceholders from '../utils/replace-placeholders';
import TemplateSelectorItem from './item';
import replacePlaceholders from '../../utils/replace-placeholders';
import './style.scss';

export const TemplateSelectorControl = ( {
export const TemplateSelector = ( {
label,
className,
help,
Expand All @@ -41,21 +42,18 @@ export const TemplateSelectorControl = ( {
return null;
}

const id = `template-selector-control-${ instanceId }`;
const id = `template-selector-${ instanceId }`;

return (
<BaseControl
label={ label }
id={ id }
help={ help }
className={ classnames( className, 'template-selector-control' ) }
className={ classnames( className, 'template-selector' ) }
>
<ul
className="template-selector-control__options"
data-testid="template-selector-control-options"
>
<ul className="template-selector__options" data-testid="template-selector-options">
{ map( templates, ( { slug, title, preview, previewAlt } ) => (
<li key={ `${ id }-${ slug }` } className="template-selector-control__template">
<li key={ `${ id }-${ slug }` } className="template-selector__template">
<TemplateSelectorItem
id={ id }
value={ slug }
Expand All @@ -75,4 +73,4 @@ export const TemplateSelectorControl = ( {
);
};

export default compose( memo, withInstanceId )( TemplateSelectorControl );
export default compose( memo, withInstanceId )( TemplateSelector );
0 ...odal/components/template-selector-item.js → ...odal/components/template-selector/item.js
View file
Open in desktop
File renamed without changes.
0 ...odal/components/preview-template-title.js → ...mplate-selector/preview-template-title.js
View file
Open in desktop
File renamed without changes.
8 changes: 5 additions & 3 deletions ...l/components/template-selector-preview.js → ...l/components/template-selector/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
190 changes: 190 additions & 0 deletions ...ugin/starter-page-templates/page-template-modal/components/template-selector/preview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
@import '~@wordpress/base-styles/colors'; // @TODO: Remove once https://github.com/WordPress/gutenberg/pull/19159 is merged and released.
@import '~@wordpress/base-styles/variables';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since WordPress/gutenberg#19159 is an issue at the moment, you could also import the whole set via this file:

wp-calypso/client/assets/stylesheets/gutenberg-base-styles.scss

Lines 1 to 6 in f2b1724

@import '~@wordpress/base-styles/z-index';
@import '~@wordpress/base-styles/colors';
@import '~@wordpress/base-styles/variables';
@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';
@import '~@wordpress/base-styles/animations';

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I pushed be80333 which seems to be enough.

@import './shared.scss';

// Preview positioning
$preview-max-width: 960px;
$preview-right-margin: 24px;
$preview-left-sidebar-reduced: calc( 30% + #{$admin-sidebar-width-collapsed} );
$preview-left-sidebar-full: calc( 30% + #{$admin-sidebar-width} );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will $admin-sidebar-width work both in wp-admin when WP sidebar is visible and when Gutenberg is iframed in Calypso and the sidebar is hidden?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

idk 😅 -- But all I did in f4adda3 is remove two SASS var definitions with two other ones that I'm importing from @wordpress/base-styles. That shouldn't change any behavior, should it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That shouldn't change any behavior, should it?

It shouldn't indeed and sounds fair! :-) Just good to test both scenarios anyway always when CSS is touched for anything FSE plugin related.


$template-large-preview-title-height: 120px;

// Template Selector Preview
.template-selector-preview {
@media screen and ( max-width: 659px ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have mixins or variables available in Gutenberg for these screen sizes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't find any (tried grepping 660px and 659px).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha — I guess in some follow up some day we could re-use breakpoints from ~@wordpress/base-styles/breakpoints

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% - #{$admin-sidebar-width-collapsed + ( 24px * 2 )} );
}

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

.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%;
}
}
21 changes: 21 additions & 0 deletions ...lugin/starter-page-templates/page-template-modal/components/template-selector/shared.scss
View file
Open in desktop
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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While it's ok to have them here, should these variables be pulled in from Gutenberg base styles or color studio? I.e.:

$template-selector-empty-background: $white;

$template-selector-modal-offset-bottom: 25px;
$template-selector-modal-offset-right: 32px;
$template-selector-blank-template-mobile-height: 70px;

@mixin screen-reader-text() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this mixin either in Calypso or Gutenberg base styles already? Could we import it from there?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find it in Calypso upon a quick search. It appears to be in Gutenberg, https://github.com/WordPress/gutenberg/blob/bfd1117846c7802d62dbba046c27968d961781e7/packages/block-editor/src/components/responsive-block-control/style.scss#L1-L12, so we might be able to use that -- unless there's more implicit dependencies (like this: WordPress/gutenberg#19159).

Overall, this PR is just moving around pre-existing styling; I'd like to limit changes that go beyond that in order to unblock it soon 😬

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(We might actually want to use that entire component rather than just its styling.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just moving things around in this PR makes sense. 👍

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;
}
Loading