Aljullu

<!-- wp:heading {"anchor":"banner"} -->
<h2 class="wp-block-heading" id="banner">Banner</h2>
<!-- /wp:heading -->

<!-- wp:group {"align":"wide","style":{"color":{"background":"#f9eddb","text":"#443127"},"spacing":{"padding":{"right":"50px","bottom":"50px","left":"50px","top":"50px"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignwide has-text-color has-background" style="color:#443127;background-color:#f9eddb;padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"left":"110px"}}}} -->
<div class="wp-block-column" style="padding-left:110px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","left":"0"}}},"layout":{"type":"constrained","wideSize":"360px","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-left:0"><!-- wp:paragraph {"style":{"color":{"text":"#c85643"},"typography":{"fontSize":"18px"},"spacing

Aljullu

<!-- wp:woocommerce/featured-product {"editMode":false,"productId":15} -->
<!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://ephemeral-aljullu-20200929.atomicsites.blog/product/beanie/">Shop now</a></div>
<!-- /wp:button -->
<!-- /wp:woocommerce/featured-product -->

<!-- wp:woocommerce/featured-category {"editMode":false,"categoryId":16} -->
<!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://ephemeral-aljullu-20200929.atomicsites.blog/product-category/clothing/">Shop now</a></div>
<!-- /wp:button -->

Aljullu

// Sets the colors of the Button component used in the Cart and Checkout blocks.
// https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/main/docs/theming/cart-and-checkout.md#button
.wc-block-components-button {
  background-color: $heading-color;
  color: $background-color;
}

// Sets the colors of the summary item quantity badge shown in the Cart sidebar.
// See https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/main/docs/theming/cart-and-checkout.md#item-quantity-badge
.wc-block-components-order-summary-item__quantity {

Aljullu

diff --git a/assets/js/base/components/checkbox-list/index.js b/assets/js/base/components/checkbox-list/index.js
index d36b116..c540916 100644
--- a/assets/js/base/components/checkbox-list/index.js
+++ b/assets/js/base/components/checkbox-list/index.js
@@ -99,9 +99,9 @@ const CheckboxList = ( {
 				{ options.map( ( option, index ) => (
 					<Fragment key={ option.value }>
 						<li
-							{ ...shouldTruncateOptions &&
+							{ ...( shouldTruncateOptions &&

Aljullu

import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

const MyImage = ({ image }) => (
  <div>
    <LazyLoadImage
      alt={image.alt}
      height={image.height}
      src={image.src}
      width={image.width} />

Aljullu

import React from 'react';
import { ArticleContent, ArticleComments } from 'my-app';
import { LazyLoadComponent } from 'react-lazy-load-image-component';

const Article = ({ articleId }) => (
  <div>
    <ArticleContent id={articleId} />
    <LazyLoadComponent>
      <ArticleComments id={articleId} />
    </LazyLoadComponent>

Aljullu

import React from 'react';
import { LazyLoadImage, trackWindowScroll }
  from 'react-lazy-load-image-component';

const Gallery = ({ images, scrollPosition }) => (
  <div>
    {images.map((image) =>
      <LazyLoadImage
        key={image.key}
        alt={image.alt}