Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block Theme Previews: show modal when previewing theme
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| module.exports = { | ||
| rules: { | ||
| '@wordpress/i18n-text-domain': [ | ||
| 'error', | ||
| { | ||
| allowedTextDomain: 'jetpack-mu-wpcom', | ||
| }, | ||
| ], | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: added | ||
|
|
||
| Block theme previews: show modal when previewing a theme. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import domReady from '@wordpress/dom-ready'; | ||
| import { registerPlugin } from '@wordpress/plugins'; | ||
| import BlockThemePreviewsModal from './modal'; | ||
|
|
||
| domReady( () => { | ||
| registerPlugin( 'block-theme-previews', { | ||
| render: () => <BlockThemePreviewsModal />, | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| @import "@automattic/typography/styles/fonts"; | ||
| @import "@wordpress/base-styles/breakpoints"; | ||
| @import "@wordpress/base-styles/mixins"; | ||
|
|
||
| .wpcom-block-theme-previews-modal { | ||
| .components-modal__content { | ||
| padding: 0; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .components-modal__header { | ||
| height: auto; | ||
| position: absolute; | ||
| border-bottom-width: 0; | ||
| } | ||
|
|
||
| .wpcom-block-theme-previews-modal__content { | ||
| display: flex; | ||
| flex-direction: column-reverse; | ||
| justify-content: flex-end; | ||
| align-items: flex-start; | ||
|
|
||
| @include break-small { | ||
| flex-direction: row; | ||
| justify-content: flex-start; | ||
|
|
||
| @media (min-height: #{ ($break-small) }) { | ||
| align-items: stretch; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .wpcom-block-theme-previews-modal__text, | ||
| .wpcom-block-theme-previews-modal__image { | ||
| width: 100%; | ||
|
|
||
| @include break-small { | ||
| width: auto; | ||
| max-width: 380px; | ||
| } | ||
| } | ||
|
|
||
| .wpcom-block-theme-previews-modal__text { | ||
| padding: 32px; | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| @include break-small { | ||
| @media (min-height: #{ ($break-small) }) { | ||
| padding: 64px 48px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .wpcom-block-theme-previews-modal__heading { | ||
| margin-top: 0; | ||
| font-family: $brand-serif; | ||
| font-weight: 400; | ||
| font-size: 1.75rem; | ||
| line-height: 32px; | ||
| margin-bottom: 16px; | ||
|
|
||
| @include break-small { | ||
| @media (min-height: #{ ($break-small) }) { | ||
| font-size: 2rem; | ||
| line-height: 40px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .wpcom-block-theme-previews-modal__description { | ||
| font-size: 1rem; | ||
| line-height: 24px; | ||
| margin-top: 0; | ||
| margin-bottom: 32px; | ||
| text-wrap: pretty; | ||
| } | ||
|
|
||
| .wpcom-block-theme-previews-modal__actions { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 16px; | ||
| margin-top: auto; | ||
|
|
||
| .components-button { | ||
| flex-grow: 1; | ||
| justify-content: center; | ||
| } | ||
| } | ||
|
|
||
| .wpcom-block-theme-previews-modal__image { | ||
| background-color: #d0cce3; | ||
| padding: 32px 0 32px 32px; | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| max-height: 50vh; | ||
|
|
||
| @include break-small { | ||
| max-height: 70vh; | ||
|
|
||
| @media (min-height: #{ ($break-small) }) { | ||
| max-height: none; | ||
| padding: 64px 0 64px 64px; | ||
| } | ||
| } | ||
|
|
||
| img { | ||
| width: 100%; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { Button, Modal } from '@wordpress/components'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import React from 'react'; | ||
|
|
||
| import './modal.scss'; | ||
|
|
||
| /** | ||
|
Check warning on line 8 in projects/packages/jetpack-mu-wpcom/src/features/block-theme-previews/modal.tsx
|
||
| * | ||
| */ | ||
| export default function BlockThemePreviewsModal() { | ||
| const isInSiteEditor = useSelect( select => !! select( 'core/edit-site' ), [] ); | ||
|
|
||
| if ( ! isInSiteEditor ) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Modal className="wpcom-block-theme-previews-modal" shouldCloseOnClickOutside={ false }> | ||
| <div className="wpcom-block-theme-previews-modal__content"> | ||
| <div className="wpcom-block-theme-previews-modal__text"> | ||
| <h1 className="wpcom-block-theme-previews-modal__heading"> | ||
| { __( "You're previewing theme", 'jetpack-mu-wpcom' ) } | ||
| </h1> | ||
| <p className="wpcom-block-theme-previews-modal__description">xxx</p> | ||
| <div className="wpcom-block-theme-previews-modal__actions"> | ||
| <Button variant="primary">{ __( 'Start customizing', 'jetpack-mu-wpcom' ) }</Button> | ||
| </div> | ||
| </div> | ||
| <div className="wpcom-block-theme-previews-modal__image"></div> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters