Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mini Cart Contents: Support link and text colors (https://github.com/woocommerce/woocommerce-blocks/pull/5566)

This commit is contained in:
Tung Du 2022-01-22 00:39:04 +07:00 committed by GitHub
parent aaaf6787a3
commit 718f2dbc6f
8 changed files with 231 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/editor.scss
View File

@ -1,4 +1,4 @@
.editor-styles-wrapper a.wc-block-components-product-name {
.editor-styles-wrapper .wc-block-components-product-title a.wc-block-components-product-name {
color: inherit;
}

61
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss
View File

@ -1,35 +1,44 @@
.wp-block-woocommerce-mini-cart-contents {
.editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
max-width: 480px;
/* We need to override the margin top here to simulate the layout of
the mini cart contents on the front end. */
margin: 0 auto !important;
}
.wp-block-woocommerce-filled-mini-cart-contents-block > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.wp-block-woocommerce-mini-cart-items-block {
display: grid;
flex-grow: 1;
margin-bottom: $gap;
padding: 0 $gap;
> .block-editor-inner-blocks > .block-editor-block-list__layout {
.wp-block-woocommerce-filled-mini-cart-contents-block > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100vh;
}
.wp-block-woocommerce-mini-cart-items-block {
display: grid;
flex-grow: 1;
margin-bottom: $gap;
padding: 0 $gap;
> .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
flex-direction: column;
height: 100%;
}
}
.wp-block-woocommerce-mini-cart-products-table-block {
margin-bottom: auto;
margin-top: $gap;
}
h2.wc-block-mini-cart__title {
@include font-size(larger);
margin: $gap-largest $gap 0;
}
table.wc-block-cart-items {
color: inherit;
}
.block-editor-button-block-appender {
box-shadow: inset 0 0 0 1px;
color: inherit;
}
}
.wp-block-woocommerce-mini-cart-products-table-block {
margin-bottom: auto;
margin-top: $gap;
}
.editor-styles-wrapper h2.wc-block-mini-cart__title {
@include font-size(larger);
margin: $gap-largest $gap 0;
}

2
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx
View File

@ -36,7 +36,7 @@ const settings = {
reusable: false,
inserter: false,
color: {
text: false,
link: true,
},
},
attributes: {

16
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
View File

@ -24,7 +24,12 @@ const PaymentMethodIconsElement = (): JSX.Element => {
);
};
const Block = (): JSX.Element => {
interface Props {
color?: string;
backgroundColor?: string;
}
const Block = ( { color, backgroundColor }: Props ): JSX.Element => {
const { cartTotals } = useStoreCart();
const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
? parseInt( cartTotals.total_items, 10 ) +
@ -47,6 +52,10 @@ const Block = (): JSX.Element => {
<Button
className="wc-block-mini-cart__footer-cart"
href={ CART_URL }
style={ {
color,
borderColor: color,
} }
>
{ __( 'View my cart', 'woo-gutenberg-products-block' ) }
</Button>
@ -55,6 +64,11 @@ const Block = (): JSX.Element => {
<Button
className="wc-block-mini-cart__footer-checkout"
href={ CHECKOUT_URL }
style={ {
color: backgroundColor,
borderColor: color,
backgroundColor: color,
} }
>
{ __(
'Go to checkout',

25
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
View File

@ -3,19 +3,40 @@
*/
import { useBlockProps } from '@wordpress/block-editor';
import Noninteractive from '@woocommerce/base-components/noninteractive';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import Block from './block';
import { blockName as miniCartContentsBlockName } from '../../attributes';
import { useColorProps } from '../../../../../hooks/style-attributes';
export const Edit = (): JSX.Element => {
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
const blockProps = useBlockProps();
const parentAttributes = useSelect( ( select ) => {
const { getBlockAttributes, getBlockParentsByBlockName } = select(
'core/block-editor'
);
const parentBlockIds = getBlockParentsByBlockName(
clientId,
miniCartContentsBlockName
);
if ( parentBlockIds.length !== 1 ) {
return {};
}
return getBlockAttributes( parentBlockIds[ 0 ] );
} );
const parentColorProps = useColorProps( parentAttributes );
return (
<div { ...blockProps }>
<Noninteractive>
<Block />
<Block { ...parentColorProps.style } />
</Noninteractive>
</div>
);

112
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss
View File

@ -62,24 +62,13 @@
position: absolute;
top: $gap-largest;
right: $gap;
}
.wc-block-mini-cart__items {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: hidden;
padding: 0 $gap;
}
button {
color: inherit;
}
.wc-block-mini-cart__products-table {
margin-bottom: auto;
margin-right: -$gap;
overflow-y: auto;
padding-right: $gap;
.wc-block-cart-items__row:last-child::after {
content: none;
svg {
fill: currentColor;
}
}
}
@ -100,50 +89,69 @@ h2.wc-block-mini-cart__title {
margin: $gap-largest $gap 0;
}
.wc-block-mini-cart__items {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: hidden;
padding: 0 $gap;
.wc-block-mini-cart__products-table {
margin-bottom: auto;
margin-right: -$gap;
overflow-y: auto;
padding-right: $gap;
.wc-block-cart-items__row:last-child::after {
content: none;
}
}
}
.wc-block-mini-cart__footer {
border-top: 1px solid $gray-300;
padding: $gap-large $gap;
}
.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
font-weight: 600;
margin-bottom: $gap;
.wc-block-components-totals-item__description {
display: none;
font-size: 0.75em;
font-weight: 400;
@media only screen and (min-width: 480px) {
display: unset;
}
}
}
.wc-block-mini-cart__footer-actions {
display: flex;
gap: $gap;
.wc-block-mini-cart__footer-cart.wc-block-components-button {
background-color: transparent;
border: 1px solid $gray-900;
color: $gray-900;
display: none;
flex-grow: 1;
.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
font-weight: 600;
margin-bottom: $gap;
@media only screen and (min-width: 480px) {
display: inline-flex;
.wc-block-components-totals-item__description {
display: none;
font-size: 0.75em;
font-weight: 400;
@media only screen and (min-width: 480px) {
display: unset;
}
}
}
.wc-block-mini-cart__footer-checkout {
border: 1px solid $gray-900;
flex-grow: 1;
font-weight: 600;
.wc-block-mini-cart__footer-actions {
display: flex;
gap: $gap;
.wc-block-mini-cart__footer-cart.wc-block-components-button {
background-color: transparent;
border: 1px solid $gray-900;
color: $gray-900;
display: none;
flex-grow: 1;
font-weight: 600;
@media only screen and (min-width: 480px) {
display: inline-flex;
}
}
.wc-block-mini-cart__footer-checkout {
border: 1px solid $gray-900;
flex-grow: 1;
font-weight: 600;
}
}
.wc-block-components-payment-method-icons {
margin-top: $gap;
}
}
.wc-block-mini-cart__footer .wc-block-components-payment-method-icons {
margin-top: $gap;
}

78
plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php
View File

@ -5,6 +5,7 @@ use Automattic\WooCommerce\Blocks\Package;
use Automattic\WooCommerce\Blocks\Assets;
use Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry;
use Automattic\WooCommerce\Blocks\StoreApi\Utilities\CartController;
use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
/**
* Mini Cart class.
@ -65,4 +66,81 @@ class MiniCartContents extends AbstractBlock {
return $content;
}
/**
* Enqueue frontend assets for this block, just in time for rendering.
*
* @param array $attributes Any attributes that currently are available from the block.
*/
protected function enqueue_assets( array $attributes ) {
parent::enqueue_assets( $attributes );
$text_color = StyleAttributesUtils::get_text_color_class_and_style( $attributes );
$bg_color = StyleAttributesUtils::get_background_color_class_and_style( $attributes );
$styles = array(
array(
'selector' => '.wc-block-mini-cart__drawer .components-modal__header',
'properties' => array(
array(
'property' => 'color',
'value' => $text_color ? $text_color['value'] : false,
),
),
),
array(
'selector' => '.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button',
'properties' => array(
array(
'property' => 'color',
'value' => $text_color ? $text_color['value'] : false,
),
array(
'property' => 'border-color',
'value' => $text_color ? $text_color['value'] : false,
),
),
),
array(
'selector' => '.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout',
'properties' => array(
array(
'property' => 'color',
'value' => $bg_color ? $bg_color['value'] : false,
),
array(
'property' => 'border-color',
'value' => $text_color ? $text_color['value'] : false,
),
array(
'property' => 'background-color',
'value' => $text_color ? $text_color['value'] : false,
),
),
),
);
$parsed_style = '';
foreach ( $styles as $style ) {
$properties = array_filter(
$style['properties'],
function( $property ) {
return $property['value'];
}
);
if ( ! empty( $properties ) ) {
$parsed_style .= $style['selector'] . '{' . PHP_EOL;
foreach ( $properties as $property ) {
$parsed_style .= $property['property'] . ':' . $property['value'] . ';' . PHP_EOL;
}
$parsed_style .= '}' . PHP_EOL;
}
}
wp_add_inline_style(
'wc-blocks-style',
$parsed_style
);
}
}

19
plugins/woocommerce-blocks/src/Utils/StyleAttributesUtils.php
View File

@ -58,11 +58,13 @@ class StyleAttributesUtils {
return array(
'class' => sprintf( 'has-text-color has-%s-color', $text_color ),
'style' => null,
'value' => self::get_preset_value( $text_color ),
);
} elseif ( $custom_text_color ) {
return array(
'class' => null,
'style' => sprintf( 'color: %s;', $custom_text_color ),
'value' => $custom_text_color,
);
}
return null;
@ -92,12 +94,14 @@ class StyleAttributesUtils {
$parsed_named_link_color = substr( $link_color, $index_named_link_color + 1 );
return array(
'class' => null,
'style' => sprintf( 'color: %s;', $parsed_named_link_color ),
'style' => sprintf( 'color: %s;', self::get_preset_value( $parsed_named_link_color ) ),
'value' => self::get_preset_value( $parsed_named_link_color ),
);
} else {
return array(
'class' => null,
'style' => sprintf( 'color: %s;', $link_color ),
'value' => $link_color,
);
}
}
@ -144,11 +148,13 @@ class StyleAttributesUtils {
return array(
'class' => sprintf( 'has-background has-%s-background-color', $background_color ),
'style' => null,
'value' => self::get_preset_value( $background_color ),
);
} elseif ( '' !== $custom_background_color ) {
return array(
'class' => null,
'style' => sprintf( 'background-color: %s;', $custom_background_color ),
'value' => $custom_background_color,
);
}
return null;
@ -284,4 +290,15 @@ class StyleAttributesUtils {
return $classes_and_styles['styles'];
}
/**
* Get CSS value for color preset.
*
* @param string $preset_name Preset name.
*
* @return string CSS value for color preset.
*/
public static function get_preset_value( $preset_name ) {
return "var(--wp--preset--color--$preset_name)";
}
}