Update dynamic block styles and markup for default themes (https://github.com/woocommerce/woocommerce-blocks/pull/576)
* Add missing escape * Revise product structure and introduce woocommerce_blocks_product_grid_item_html filter * Add missing block-button/price styles * Add a themename body class to allow per-theme styling * Add WC style dependencies so block styles are loaded last * Styles with greater specificicity, for 2019 * Default theme styling * SF styles * Ensure dependencies exist * Split sale badge HTML to allow it to be moved more easily * Load stylesheet via WooCommerce filters to ensure they load later than core styles * Make structure in the editor match the product lists on frontend so styles are inherited * Remove quotes around single fontnames (linting rules) * Ensure there is spacing between blocks * Use parent theme name in body class * Fix column alignment in editor by removing inline max width * Put back block styles * Started adding shared styles * Update default styles/add missing shared styles * lint errors * fix indent * No longer a need for shared since we're loading style.css in the editor too * Update tests
This commit is contained in:
Mike Jolley
GitHub
parent
efc96bba85
commit
2eb750881a
|
|
@ -14,120 +14,24 @@
|
|||
}
|
||||
|
||||
// Remove the list styling, which is added back by core GB styles.
|
||||
.editor-styles-wrapper .wc-block-grid {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
.editor-styles-wrapper {
|
||||
.wc-block-grid {
|
||||
.wc-block-grid__products {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
.wc-block-products-grid,
|
||||
.wc-block-grid {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.components-placeholder {
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
&.is-not-found {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Styles for "resuable block" preview.
|
||||
.editor-block-preview & {
|
||||
min-width: 5em;
|
||||
|
||||
@for $i from 1 to 7 {
|
||||
&.cols-#{$i},
|
||||
&.has-#{$i}-columns {
|
||||
min-width: $i * 5em;
|
||||
.wp-block-button__link {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.components-placeholder {
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
&.is-not-found {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 5.3em;
|
||||
height: 1.618em;
|
||||
line-height: 1.618;
|
||||
font-size: 1em;
|
||||
font-family: star; /* stylelint-disable-line */
|
||||
font-weight: 400;
|
||||
|
||||
&::before {
|
||||
content: "\53\53\53\53\53";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
span::before {
|
||||
content: "\53\53\53\53\53";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @todo Remove this once all grid blocks are switched to dynamic.
|
||||
.wc-block-products-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.cols-1 {
|
||||
display: block;
|
||||
|
||||
.wc-block-grid__product {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 2 to 9 {
|
||||
&.cols-#{$i} .wc-block-grid__product {
|
||||
flex: 1 0 calc(#{ 100% / $i });
|
||||
max-width: 100% / $i !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.cols-4:not(.alignwide):not(.alignfull),
|
||||
&.cols-5:not(.alignfull),
|
||||
&.cols-6:not(.alignfull),
|
||||
&.cols-7,
|
||||
&.cols-8 {
|
||||
|
||||
.wc-block-grid__product-title {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-price {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-add-to-cart {
|
||||
font-size: 0.8em !important;
|
||||
line-height: 1.4 !important;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,155 @@
|
|||
.wp-block-woocommerce-handpicked-products,
|
||||
.wp-block-woocommerce-product-best-sellers,
|
||||
.wp-block-woocommerce-product-category,
|
||||
.wp-block-woocommerce-product-top-rated,
|
||||
.wp-block-woocommerce-products-by-attribute {
|
||||
&.is-hidden-title {
|
||||
.woocommerce-loop-product__title {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-hidden-price {
|
||||
.price {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-hidden-rating {
|
||||
.star-rating {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-hidden-button {
|
||||
.add_to_cart_button {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-grid {
|
||||
|
||||
ul {
|
||||
.wc-block-grid__products {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
padding: 0;
|
||||
margin: 0 0 $gap-large;
|
||||
|
||||
.wc-block-grid__product {
|
||||
padding: 0 $gap 0 0;
|
||||
margin: 0 0 $gap-large 0;
|
||||
float: none;
|
||||
width: auto;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.wc-block-grid__product-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-image {
|
||||
text-decoration: none;
|
||||
margin-bottom: $gap;
|
||||
display: block;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-grid__product-title {
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-title,
|
||||
.wc-block-grid__product-price,
|
||||
.wc-block-grid__product-rating {
|
||||
margin-bottom: $gap-small;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-block-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-add-to-cart {
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
|
||||
a {
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
margin: 0;
|
||||
|
||||
&.loading {
|
||||
opacity: 0.25;
|
||||
padding-right: 2.618em;
|
||||
|
||||
&::after {
|
||||
font-family: WooCommerce; /* stylelint-disable-line */
|
||||
content: "\e01c";
|
||||
vertical-align: top;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
top: 0.618em;
|
||||
right: 1em;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.added::after {
|
||||
font-family: WooCommerce; /* stylelint-disable-line */
|
||||
content: "\e017";
|
||||
margin-left: 0.53em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.added_to_cart {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-grid__product-onsale {
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 0.75em;
|
||||
line-height: 1;
|
||||
padding: 0.5em;
|
||||
z-index: 9;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-rating {
|
||||
|
||||
.star-rating {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 5.3em;
|
||||
height: 1.618em;
|
||||
line-height: 1.618;
|
||||
font-size: 1em;
|
||||
font-family: star; /* stylelint-disable-line */
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
content: "\53\53\53\53\53";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
span::before {
|
||||
content: "\53\53\53\53\53";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-1-columns {
|
||||
|
||||
ul {
|
||||
.wc-block-grid__products {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -56,8 +166,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wc-block-grid__product-title {
|
||||
line-height: 1.2;
|
||||
.wc-block-grid__products {
|
||||
font-size: 1em;
|
||||
|
||||
.wc-block-grid__product-title {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-price {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.wp-block-button span.wc-block-grid__product-add-to-cart,
|
||||
.wc-block-grid__product-add-to-cart a {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-4-columns:not(.alignwide):not(.alignfull),
|
||||
|
|
@ -66,49 +190,24 @@
|
|||
&.has-7-columns,
|
||||
&.has-8-columns {
|
||||
|
||||
.wc-block-grid__product-title {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-price {
|
||||
.wc-block-grid__products {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-add-to-cart {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-grid__product {
|
||||
padding-left: $gap/2;
|
||||
padding-right: $gap/2;
|
||||
|
||||
.wc-block-grid__product-image img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-image,
|
||||
.wc-block-grid__product-title,
|
||||
.wc-block-grid__product-price,
|
||||
.wc-block-grid__product-rating {
|
||||
margin-bottom: $gap-small;
|
||||
}
|
||||
|
||||
.wc-block-grid__product-add-to-cart a {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-multiple-rows .wc-block-grid__product {
|
||||
margin-bottom: $gap-large;
|
||||
}
|
||||
|
||||
// Remove some default storefront styles.
|
||||
.site-main & .products li.product {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-twentysixteen {
|
||||
.wc-block-grid {
|
||||
// Prevent white theme styles.
|
||||
.price ins {
|
||||
color: #77a464;
|
||||
}
|
||||
}
|
||||
}
|
||||
.theme-twentynineteen {
|
||||
// Change the title font to match headings.
|
||||
.wc-block-grid__product-title,
|
||||
.wc-block-grid__product-onsale {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ const ProductPreview = ( { product } ) => {
|
|||
return (
|
||||
<div
|
||||
className="wc-product-preview wc-block-grid__product"
|
||||
style={ { maxWidth: `${ wc_product_block_data.thumbnail_size }px` } }
|
||||
>
|
||||
<div className="wc-product-preview__image wc-block-grid__product-image">
|
||||
{ image }
|
||||
|
|
|
|||
|
|
@ -3,11 +3,6 @@
|
|||
exports[`ProductPreview should render a single product preview with an image 1`] = `
|
||||
<div
|
||||
className="wc-product-preview wc-block-grid__product"
|
||||
style={
|
||||
Object {
|
||||
"maxWidth": "300px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="wc-product-preview__image wc-block-grid__product-image"
|
||||
|
|
@ -54,11 +49,6 @@ exports[`ProductPreview should render a single product preview with an image 1`]
|
|||
exports[`ProductPreview should render a single product preview without an image 1`] = `
|
||||
<div
|
||||
className="wc-product-preview wc-block-grid__product"
|
||||
style={
|
||||
Object {
|
||||
"maxWidth": "300px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="wc-product-preview__image wc-block-grid__product-image"
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ abstract class WGPB_Block_Grid_Base {
|
|||
$classes = $this->get_container_classes();
|
||||
$output = implode( '', array_map( array( $this, 'render_product' ), $products ) );
|
||||
|
||||
return sprintf( '<div class="%s"><ul class="wc-block-grid__products products">%s</ul></div>', esc_attr( $classes ), $output );
|
||||
return sprintf( '<div class="%s"><ul class="wc-block-grid__products">%s</ul></div>', esc_attr( $classes ), $output );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -217,7 +217,6 @@ abstract class WGPB_Block_Grid_Base {
|
|||
"wp-block-{$this->block_name}",
|
||||
"wc-block-{$this->block_name}",
|
||||
"has-{$this->attributes['columns']}-columns",
|
||||
'woocommerce',
|
||||
);
|
||||
|
||||
if ( $this->attributes['rows'] > 1 ) {
|
||||
|
|
@ -245,25 +244,30 @@ abstract class WGPB_Block_Grid_Base {
|
|||
}
|
||||
|
||||
$data = (object) array(
|
||||
'permalink' => $product->get_permalink(),
|
||||
'permalink' => esc_url( $product->get_permalink() ),
|
||||
'image' => $this->get_image_html( $product ),
|
||||
'title' => $this->get_title_html( $product ),
|
||||
'rating' => $this->get_rating_html( $product ),
|
||||
'price' => $this->get_price_html( $product ),
|
||||
'badge' => $this->get_sale_badge_html( $product ),
|
||||
'button' => $this->get_button_html( $product ),
|
||||
);
|
||||
|
||||
return "
|
||||
<li class=\"wc-block-grid__product product\">
|
||||
return apply_filters(
|
||||
'woocommerce_blocks_product_grid_item_html',
|
||||
"<li class=\"wc-block-grid__product\">
|
||||
<a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
|
||||
{$data->image}
|
||||
{$data->title}
|
||||
{$data->rating}
|
||||
{$data->price}
|
||||
</a>
|
||||
{$data->price}
|
||||
{$data->badge}
|
||||
{$data->rating}
|
||||
{$data->button}
|
||||
</li>
|
||||
";
|
||||
</li>",
|
||||
$data,
|
||||
$product
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -305,7 +309,7 @@ abstract class WGPB_Block_Grid_Base {
|
|||
|
||||
if ( $rating_count > 0 ) {
|
||||
return sprintf(
|
||||
'<div class="wc-block-grid__product-rating woocommerce-product-rating">%s</div>',
|
||||
'<div class="wc-block-grid__product-rating">%s</div>',
|
||||
wc_get_rating_html( $average, $rating_count )
|
||||
);
|
||||
}
|
||||
|
|
@ -322,17 +326,28 @@ abstract class WGPB_Block_Grid_Base {
|
|||
if ( empty( $this->attributes['contentVisibility']['price'] ) ) {
|
||||
return '';
|
||||
}
|
||||
$badge = '';
|
||||
return sprintf(
|
||||
'<div class="wc-block-grid__product-price price">%s</div>',
|
||||
$product->get_price_html()
|
||||
);
|
||||
}
|
||||
|
||||
if ( $product->is_on_sale() ) {
|
||||
$badge = '<span class="wc-block-grid__product-onsale onsale">' . esc_html__( 'Sale!', 'woo-gutenberg-products-block' ) . '</span>';
|
||||
/**
|
||||
* Get the sale badge.
|
||||
*
|
||||
* @param WC_Product $product Product.
|
||||
* @return string Rendered product output.
|
||||
*/
|
||||
protected function get_sale_badge_html( $product ) {
|
||||
if ( empty( $this->attributes['contentVisibility']['price'] ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return sprintf(
|
||||
'<div class="wc-block-grid__product-price">%s%s</div>',
|
||||
$product->get_price_html(),
|
||||
$badge
|
||||
);
|
||||
if ( ! $product->is_on_sale() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
return '<span class="wc-block-grid__product-onsale">' . esc_html__( 'Sale!', 'woo-gutenberg-products-block' ) . '</span>';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -345,7 +360,7 @@ abstract class WGPB_Block_Grid_Base {
|
|||
if ( empty( $this->attributes['contentVisibility']['button'] ) ) {
|
||||
return '';
|
||||
}
|
||||
return '<div class="wc-block-grid__product-add-to-cart">' . $this->get_add_to_cart( $product ) . '</div>';
|
||||
return '<div class="wp-block-button wc-block-grid__product-add-to-cart">' . $this->get_add_to_cart( $product ) . '</div>';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -355,21 +370,23 @@ abstract class WGPB_Block_Grid_Base {
|
|||
* @return string Rendered product output.
|
||||
*/
|
||||
protected function get_add_to_cart( $product ) {
|
||||
$attributes = array(
|
||||
'aria-label' => $product->add_to_cart_description(),
|
||||
'data-quantity' => '1',
|
||||
'data-product_id' => $product->get_id(),
|
||||
'data-product_sku' => $product->get_sku(),
|
||||
'rel' => 'nofollow',
|
||||
'class' => 'wp-block-button__link add_to_cart_button',
|
||||
);
|
||||
|
||||
if ( $product->supports( 'ajax_add_to_cart' ) ) {
|
||||
return sprintf(
|
||||
'<a href="%1$s" data-quantity="1" data-product_id="%2$s" data-product_sku="%3$s" class="button add_to_cart_button ajax_add_to_cart" rel="nofollow" aria-label="%4$s">%5$s</a>',
|
||||
esc_url( $product->add_to_cart_url() ),
|
||||
esc_attr( $product->get_id() ),
|
||||
esc_attr( $product->get_sku() ),
|
||||
esc_attr( $product->add_to_cart_description() ),
|
||||
esc_html( $product->add_to_cart_text() )
|
||||
);
|
||||
$attributes['class'] .= ' ajax_add_to_cart';
|
||||
}
|
||||
|
||||
return sprintf(
|
||||
'<a href="%1$s" class="button add_to_cart_button" rel="nofollow" aria-label="%2$s">%3$s</a>',
|
||||
'<a href="%s" %s>%s</a>',
|
||||
esc_url( $product->add_to_cart_url() ),
|
||||
esc_attr( $product->add_to_cart_description() ),
|
||||
wc_implode_html_attributes( $attributes ),
|
||||
esc_html( $product->add_to_cart_text() )
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ class WGPB_Block_Library {
|
|||
self::register_assets();
|
||||
add_filter( 'block_categories', array( 'WGPB_Block_Library', 'add_block_category' ) );
|
||||
add_action( 'admin_print_footer_scripts', array( 'WGPB_Block_Library', 'print_script_settings' ), 1 );
|
||||
add_action( 'body_class', array( 'WGPB_Block_Library', 'add_theme_body_class' ), 1 );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -425,6 +426,17 @@ class WGPB_Block_Library {
|
|||
$block = new WGPB_Block_Product_Category( $attributes, $content );
|
||||
return $block->render();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add body classes.
|
||||
*
|
||||
* @param array $classes Array of CSS classnames.
|
||||
* @return array Modified array of CSS classnames.
|
||||
*/
|
||||
public static function add_theme_body_class( $classes = array() ) {
|
||||
$classes[] = 'theme-' . get_template();
|
||||
return $classes;
|
||||
}
|
||||
}
|
||||
|
||||
WGPB_Block_Library::get_instance();
|
||||
|
|
|
|||
Loading…
Reference in New Issue