Deprecate and create new coming soon block version (#49786)
* Migrate coming soon block * Update coming soon patterns * Enqueue styles * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix entire site block --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
parent
ef1a26e69c
commit
f9598fbed1
|
@ -0,0 +1,39 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import { generateStyles } from './styles';
|
||||||
|
import metadata from './block.json';
|
||||||
|
|
||||||
|
const v1 = {
|
||||||
|
attributes: metadata.attributes,
|
||||||
|
supports: metadata.supports,
|
||||||
|
save: ( {
|
||||||
|
attributes,
|
||||||
|
}: {
|
||||||
|
attributes: { color: string; storeOnly: boolean };
|
||||||
|
} ) => {
|
||||||
|
const { color, storeOnly } = attributes;
|
||||||
|
const blockProps = { ...useBlockProps.save() };
|
||||||
|
if ( storeOnly ) {
|
||||||
|
return (
|
||||||
|
<div { ...blockProps }>
|
||||||
|
<InnerBlocks.Content />
|
||||||
|
<style>{ `.woocommerce-breadcrumb {display: none;}` }</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div { ...blockProps }>
|
||||||
|
<InnerBlocks.Content />
|
||||||
|
<style>{ generateStyles( color ) }</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default [ v1 ];
|
|
@ -8,24 +8,28 @@ import {
|
||||||
InnerBlocks,
|
InnerBlocks,
|
||||||
} from '@wordpress/block-editor';
|
} from '@wordpress/block-editor';
|
||||||
import { PanelBody, ColorPicker } from '@wordpress/components';
|
import { PanelBody, ColorPicker } from '@wordpress/components';
|
||||||
|
import { type BlockEditProps } from '@wordpress/blocks';
|
||||||
|
|
||||||
|
export type Attributes = {
|
||||||
|
color: string;
|
||||||
|
storeOnly: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type EditProps = BlockEditProps< Attributes >;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { generateStyles } from './styles';
|
|
||||||
|
|
||||||
export default function Edit( { attributes, setAttributes } ) {
|
export default function Edit( { attributes, setAttributes }: EditProps ) {
|
||||||
const { color, storeOnly } = attributes;
|
const { color, storeOnly } = attributes;
|
||||||
const blockProps = { ...useBlockProps() };
|
const blockProps = { ...useBlockProps() };
|
||||||
|
|
||||||
if ( storeOnly ) {
|
if ( storeOnly ) {
|
||||||
return (
|
return (
|
||||||
<>
|
<div { ...blockProps }>
|
||||||
<div { ...blockProps }>
|
<InnerBlocks />
|
||||||
<InnerBlocks />
|
</div>
|
||||||
</div>
|
|
||||||
<style>{ `.woocommerce-breadcrumb {display: none;}` }</style>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,6 +39,7 @@ export default function Edit( { attributes, setAttributes } ) {
|
||||||
<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
|
<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
color={ color }
|
color={ color }
|
||||||
|
// @ts-expect-error type is not defined in the library
|
||||||
onChange={ ( newColor: string ) =>
|
onChange={ ( newColor: string ) =>
|
||||||
setAttributes( { color: newColor } )
|
setAttributes( { color: newColor } )
|
||||||
}
|
}
|
||||||
|
@ -45,8 +50,8 @@ export default function Edit( { attributes, setAttributes } ) {
|
||||||
</InspectorControls>
|
</InspectorControls>
|
||||||
<div { ...blockProps }>
|
<div { ...blockProps }>
|
||||||
<InnerBlocks />
|
<InnerBlocks />
|
||||||
|
<style>{ `:root{--woocommerce-coming-soon-color: ${ color } }` }</style>
|
||||||
</div>
|
</div>
|
||||||
<style>{ generateStyles( color ) }</style>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,175 @@
|
||||||
|
body:has(.woocommerce-coming-soon-entire-site),
|
||||||
|
body:has(.woocommerce-coming-soon-banner) {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--woocommerce-coming-soon-color);
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
min-width: 320px;
|
||||||
|
--wp--preset--color--contrast: #111;
|
||||||
|
--wp--style--global--wide-size: 1280px;
|
||||||
|
|
||||||
|
/* Reset */
|
||||||
|
h1,
|
||||||
|
p,
|
||||||
|
a {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-layout-constrained > .alignwide {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-coming-soon-banner.alignwide {
|
||||||
|
max-width: 820px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.wp-container-core-group-is-layout-4 {
|
||||||
|
&.wp-container-core-group-is-layout-4 {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-layout-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-block-site-title {
|
||||||
|
p {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: -0.4px;
|
||||||
|
color: var(--wp--preset--color--contrast);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-block-social-links {
|
||||||
|
gap: 0.5em 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-coming-soon-social-login {
|
||||||
|
gap: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-block-loginout {
|
||||||
|
background-color: #000;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
height: 40px;
|
||||||
|
width: 74px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 17px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-block-spacer {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-coming-soon-banner-container {
|
||||||
|
padding-inline: min(5.5rem, 8vw);
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: 660px) {
|
||||||
|
padding-inline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .wp-block-group__inner-container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-coming-soon-powered-by-woo {
|
||||||
|
width: 100%;
|
||||||
|
--wp--preset--spacing--30: 0;
|
||||||
|
--wp--preset--spacing--10: 19px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 19.2px;
|
||||||
|
letter-spacing: -0.12px;
|
||||||
|
color: #3c434a;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: Inter, sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon-is-vertically-aligned-center {
|
||||||
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon-cover {
|
||||||
|
.wp-block-cover__background {
|
||||||
|
background-color: var(--woocommerce-coming-soon-color) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-coming-soon-header {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.wp-block-heading.woocommerce-coming-soon-banner {
|
||||||
|
font-size: clamp(27px, 1.74rem + ((1vw - 3px) * 2), 48px);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 58px;
|
||||||
|
font-family: Cardo, serif;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
max-width: 820px;
|
||||||
|
color: var(--wp--preset--color--contrast);
|
||||||
|
margin: 0 auto;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-editor-block-preview__content-iframe {
|
||||||
|
body:has(.woocommerce-coming-soon-entire-site),
|
||||||
|
body:has(.woocommerce-coming-soon-banner) {
|
||||||
|
/* Set ratio to 1:1 so height is always equal to width for the preview. */
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
}
|
||||||
|
}
|
|
@ -10,10 +10,14 @@ import { registerBlockType } from '@wordpress/blocks';
|
||||||
import Edit from './edit';
|
import Edit from './edit';
|
||||||
import Save from './save';
|
import Save from './save';
|
||||||
import metadata from './block.json';
|
import metadata from './block.json';
|
||||||
|
import deprecated from './deprecated';
|
||||||
|
import './store-only.scss';
|
||||||
|
import './entire-site.scss';
|
||||||
|
|
||||||
registerBlockType( metadata, {
|
registerBlockType( metadata, {
|
||||||
title: __( 'Coming Soon', 'woocommerce' ),
|
title: __( 'Coming Soon', 'woocommerce' ),
|
||||||
edit: Edit,
|
edit: Edit,
|
||||||
save: Save,
|
save: Save,
|
||||||
apiVersion: 2,
|
apiVersion: 2,
|
||||||
|
deprecated,
|
||||||
} );
|
} );
|
||||||
|
|
|
@ -3,28 +3,10 @@
|
||||||
*/
|
*/
|
||||||
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||||
|
|
||||||
/**
|
export default function Save() {
|
||||||
* Internal dependencies
|
|
||||||
*/
|
|
||||||
import { generateStyles } from './styles';
|
|
||||||
|
|
||||||
export default function Save( { attributes } ) {
|
|
||||||
const { color, storeOnly } = attributes;
|
|
||||||
const blockProps = { ...useBlockProps.save() };
|
|
||||||
|
|
||||||
if ( storeOnly ) {
|
|
||||||
return (
|
|
||||||
<div { ...blockProps }>
|
|
||||||
<InnerBlocks.Content />
|
|
||||||
<style>{ `.woocommerce-breadcrumb {display: none;}` }</style>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div { ...blockProps }>
|
<div { ...useBlockProps.save() }>
|
||||||
<InnerBlocks.Content />
|
<InnerBlocks.Content />
|
||||||
<style>{ generateStyles( color ) }</style>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
body:has(.woocommerce-coming-soon-store-only) {
|
||||||
|
.woocommerce-breadcrumb {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,3 +1,4 @@
|
||||||
|
// Deprecated styles since 9.2. Please use *.scss file instead.
|
||||||
export const generateStyles = ( color = '#bea0f2' ) => {
|
export const generateStyles = ( color = '#bea0f2' ) => {
|
||||||
return `
|
return `
|
||||||
/* Reset */
|
/* Reset */
|
||||||
|
@ -25,10 +26,6 @@ export const generateStyles = ( color = '#bea0f2' ) => {
|
||||||
body .is-layout-constrained > .alignwide {
|
body .is-layout-constrained > .alignwide {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.block-editor-block-preview__content-iframe body {
|
|
||||||
/* Set ratio to 1:1 so height is always equal to width for the preview. */
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
}
|
|
||||||
.wp-container-core-group-is-layout-4.wp-container-core-group-is-layout-4 {
|
.wp-container-core-group-is-layout-4.wp-container-core-group-is-layout-4 {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
@ -126,7 +123,7 @@ export const generateStyles = ( color = '#bea0f2' ) => {
|
||||||
.woocommerce-coming-soon-header {
|
.woocommerce-coming-soon-header {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
h1.wp-block-heading.woocommerce-coming-soon-banner {
|
.woocommerce-coming-soon-banner {
|
||||||
font-size: clamp(27px, 1.74rem + ((1vw - 3px) * 2), 48px);
|
font-size: clamp(27px, 1.74rem + ((1vw - 3px) * 2), 48px);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 58px;
|
line-height: 58px;
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Deprecate and create new coming soon block version
|
|
@ -19,8 +19,8 @@ if ( 'twentytwentyfour' === $current_theme ) {
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!-- wp:woocommerce/coming-soon {"color":"#bea0f2","storeOnly":false,"className":"wp-block-woocommerce-background-color"} -->
|
<!-- wp:woocommerce/coming-soon {"color":"#bea0f2","storeOnly":false,"className":"woocommerce-coming-soon-entire-site wp-block-woocommerce-background-color"} -->
|
||||||
<div class="wp-block-woocommerce-coming-soon wp-block-woocommerce-background-color"><!-- wp:cover {"minHeight":100,"minHeightUnit":"vh","isDark":false,"className":"coming-soon-is-vertically-aligned-center coming-soon-cover","layout":{"type":"default"}} -->
|
<div class="woocommerce-coming-soon-entire-site wp-block-woocommerce-coming-soon wp-block-woocommerce-background-color"><!-- wp:cover {"minHeight":100,"minHeightUnit":"vh","isDark":false,"className":"coming-soon-is-vertically-aligned-center coming-soon-cover","layout":{"type":"default"}} -->
|
||||||
<div class="wp-block-cover is-light coming-soon-is-vertically-aligned-center coming-soon-cover" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style=""></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"woocommerce-coming-soon-banner-container","layout":{"type":"default"}} -->
|
<div class="wp-block-cover is-light coming-soon-is-vertically-aligned-center coming-soon-cover" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style=""></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"woocommerce-coming-soon-banner-container","layout":{"type":"default"}} -->
|
||||||
<div class="wp-block-group woocommerce-coming-soon-banner-container"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"3px","bottom":"20px"}}},"className":"woocommerce-coming-soon-header","layout":{"type":"constrained"}} -->
|
<div class="wp-block-group woocommerce-coming-soon-banner-container"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"3px","bottom":"20px"}}},"className":"woocommerce-coming-soon-header","layout":{"type":"constrained"}} -->
|
||||||
<div class="wp-block-group alignwide woocommerce-coming-soon-header has-background" style="padding-top:3px;padding-bottom:20px"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
|
<div class="wp-block-group alignwide woocommerce-coming-soon-header has-background" style="padding-top:3px;padding-bottom:20px"><!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
|
||||||
|
@ -60,144 +60,5 @@ if ( 'twentytwentyfour' === $current_theme ) {
|
||||||
<!-- /wp:group --></div>
|
<!-- /wp:group --></div>
|
||||||
<!-- /wp:group --></div>
|
<!-- /wp:group --></div>
|
||||||
<!-- /wp:group --></div></div>
|
<!-- /wp:group --></div></div>
|
||||||
<!-- /wp:cover --><style>
|
<!-- /wp:cover --></div>
|
||||||
/* Reset */
|
|
||||||
h1, p, a {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
body,
|
|
||||||
body.custom-background {
|
|
||||||
margin: 0;
|
|
||||||
background-color: #bea0f2;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
min-width: 320px;
|
|
||||||
--wp--preset--color--contrast: #111111;
|
|
||||||
--wp--style--global--wide-size: 1280px;
|
|
||||||
}
|
|
||||||
body .is-layout-constrained > .alignwide {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.block-editor-block-preview__content-iframe body {
|
|
||||||
/* Set ratio to 1:1 so height is always equal to width for the preview. */
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
}
|
|
||||||
.wp-container-core-group-is-layout-4.wp-container-core-group-is-layout-4 {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.is-layout-flex {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.wp-block-site-title p {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.wp-block-site-title a {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: normal;
|
|
||||||
letter-spacing: -0.4px;
|
|
||||||
color: var(--wp--preset--color--contrast);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.wp-block-social-links {
|
|
||||||
gap: 0.5em 18px;
|
|
||||||
}
|
|
||||||
.woocommerce-coming-soon-social-login {
|
|
||||||
gap: 48px;
|
|
||||||
}
|
|
||||||
.wp-block-loginout {
|
|
||||||
background-color: #000000;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
|
||||||
height: 40px;
|
|
||||||
width: 74px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.wp-block-loginout a {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: 17px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.wp-block-spacer {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.woocommerce-coming-soon-banner-container {
|
|
||||||
padding-inline: min(5.5rem, 8vw);
|
|
||||||
margin: 0;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
@media (max-width: 660px) {
|
|
||||||
.woocommerce-coming-soon-banner-container {
|
|
||||||
padding-inline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.woocommerce-coming-soon-banner-container > .wp-block-group__inner-container {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.woocommerce-coming-soon-powered-by-woo {
|
|
||||||
width: 100%;
|
|
||||||
--wp--preset--spacing--30: 0;
|
|
||||||
--wp--preset--spacing--10: 19px;
|
|
||||||
}
|
|
||||||
.woocommerce-coming-soon-powered-by-woo p {
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 160%; /* 19.2px */
|
|
||||||
letter-spacing: -0.12px;
|
|
||||||
color: #3C434A;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: Inter;
|
|
||||||
}
|
|
||||||
.woocommerce-coming-soon-powered-by-woo a {
|
|
||||||
font-family: Inter;
|
|
||||||
}
|
|
||||||
body .is-layout-constrained > .woocommerce-coming-soon-banner.alignwide {
|
|
||||||
max-width: 820px;
|
|
||||||
}
|
|
||||||
.coming-soon-is-vertically-aligned-center {
|
|
||||||
width: 100%;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
.coming-soon-cover .wp-block-cover__background {
|
|
||||||
background-color: #bea0f2 !important;
|
|
||||||
}
|
|
||||||
.woocommerce-coming-soon-header {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
h1.wp-block-heading.woocommerce-coming-soon-banner {
|
|
||||||
font-size: clamp(27px, 1.74rem + ((1vw - 3px) * 2), 48px);
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 58px;
|
|
||||||
font-family: 'Cardo', serif;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
max-width: 820px;
|
|
||||||
color: var(--wp--preset--color--contrast);
|
|
||||||
margin: 0 auto;
|
|
||||||
text-wrap: balance;
|
|
||||||
}</style></div>
|
|
||||||
<!-- /wp:woocommerce/coming-soon -->
|
<!-- /wp:woocommerce/coming-soon -->
|
||||||
|
|
|
@ -20,8 +20,8 @@ if ( 'twentytwentyfour' === $current_theme ) {
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!-- wp:woocommerce/coming-soon {"storeOnly":true} -->
|
<!-- wp:woocommerce/coming-soon {"storeOnly":true, "className":"woocommerce-coming-soon-store-only"} -->
|
||||||
<div class="wp-block-woocommerce-coming-soon">
|
<div class="wp-block-woocommerce-coming-soon woocommerce-coming-soon-store-only">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
if ( wc_current_theme_is_fse_theme() ) {
|
if ( wc_current_theme_is_fse_theme() ) {
|
||||||
|
@ -56,6 +56,5 @@ if ( wc_current_theme_is_fse_theme() ) {
|
||||||
echo '<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->';
|
echo '<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->';
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
</div>
|
||||||
<style>.woocommerce-breadcrumb {display: none;}</style></div>
|
|
||||||
<!-- /wp:woocommerce/coming-soon -->
|
<!-- /wp:woocommerce/coming-soon -->
|
||||||
|
|
|
@ -21,12 +21,24 @@ class ComingSoon extends AbstractBlock {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the frontend style handle for this block type.
|
* Enqueue frontend assets for this block, just in time for rendering.
|
||||||
*
|
*
|
||||||
* @return null
|
* @internal This prevents the block script being enqueued on all pages. It is only enqueued as needed. Note that
|
||||||
|
* we intentionally do not pass 'script' to register_block_type.
|
||||||
|
*
|
||||||
|
* @param array $attributes Any attributes that currently are available from the block.
|
||||||
|
* @param string $content The block content.
|
||||||
|
* @param WP_Block $block The block object.
|
||||||
*/
|
*/
|
||||||
protected function get_block_type_style() {
|
protected function enqueue_assets( array $attributes, $content, $block ) {
|
||||||
return null;
|
parent::enqueue_assets( $attributes, $content, $block );
|
||||||
|
|
||||||
|
if ( isset( $attributes['color'] ) ) {
|
||||||
|
wp_add_inline_style(
|
||||||
|
'wc-blocks-style',
|
||||||
|
':root{--woocommerce-coming-soon-color: ' . esc_html( $attributes['color'] ) . '}'
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue