[PB] Page Builder (#1872)

* PB-15: Image content type in Venia UI / PWA Studio - make it prettier * PB-5: WYSIWYG Image optimization in PWA - Update tests for associated content types * PB-5: WYSIWYG Image optimization in PWA - Update tests * PB-11: Heading content type in Venia UI / PWA Studio * PB-35: [Docs] Master format parsing WIP pagebuilder docs setup in menu, etc. * PB-11: Heading content type in Venia UI / PWA Studio * PB-4: Master format parser for PWA Studio * PB-5: WYSIWYG Image optimization in PWA - Prettier * PB-4: Master format parser for PWA Studio * PB-19: Map content type in Venia UI / PWA Studio * PB-5: WYSIWYG Image optimization in PWA - Fix tests * PB-38: [Docs] Initial setup in PWA docs * PB-19: Map content type in Venia UI / PWA Studio - Include cleanup in useEffect hook * PB-34: Implement hide / show functionality for all content types * PB-20: Block content type in Venia UI / PWA Studio - Fix failing test * PB-19: Map content type in Venia UI / PWA Studio - Remove dead code path * PB-19: Map content type in Venia UI / PWA Studio - Add configAggregator.spec.js * PB-19: Map content type in Venia UI / PWA Studio - Add Map to create-reference-docs config for venia-concept * PB-19: Map content type in Venia UI / PWA Studio - Change React-reserved prop 'key' to 'apiKey' * PB-5: WYSIWYG Image optimization in PWA - Include fit cover option to correctly resize images with Fastly * PB-5: WYSIWYG Image optimization in PWA - Include new options in test coverage * PB-19: Map content type in Venia UI / PWA Studio - Initial map component test coverage * PB-5: WYSIWYG Image optimization in PWA - Update express sharp * PB-11 Heading content type in Venia UI / PWA Studio * PB-19: Map content type in Venia UI / PWA Studio - Add more map component coverage * PB-19: Map content type in Venia UI / PWA Studio - Add missing map component coverage * PB-11: Heading content type in Venia UI / PWA Studio - Fix formatting of index.js - Include richContent * PB-19: Map content type in Venia UI / PWA Studio - Prettier formatting * PB-11: Heading content type in Venia UI / PWA Studio - Adjust font sizes with style guide * PB-19: Map content type in Venia UI / PWA Studio - Remove duplicate mock setup and add JSDoc to Map.propTypes * PB-11: Heading content type in Venia UI / PWA Studio * PB-5: WYSIWYG Image optimization in PWA * PB-35: [Docs] Master format parsing Added diagrams and changes to original writeup * PB-35: [Docs] Master format parsing Updated diagrams * PB-35: [Docs] Master format parsing Removing old files that weren't supposed to be included * PB-35: [Docs] Master format parsing Removing more files not to be included * PB-10: Text content type in Venia UI / PWA Studio * PB-10: Text content type in Venia UI / PWA Studio - Everything is flex * PB-35: [Docs] Master format parsing Fixing order of Page Builder render flow and moving files from _draft to source * PB-35: [Docs] Master format parsing Tweak diagram * PB-35: [Docs] Master format parsing Making diagram and processing description more accurate * PB-10: Text content type in Venia UI / PWA Studio * PB-5: WYSIWYG Image optimization in PWA * PB-19: Map content type in Venia UI / PWA Studio - Fix issue with country being an array * PB-10: Text content type in Venia UI / PWA Studio * PB-10: Text content type in Venia UI / PWA Studio * PB-19: Map content type in Venia UI / PWA Studio * PB-19: Map content type in Venia UI / PWA Studio * PB-10: Text content type in Venia UI / PWA Studio - Update gallery snapshot * PB-21: Products content type in Venia UI / PWA Studio - Fix product content type from refactor * PB-22: Handle unsupported content types * PB-21: Products content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio * PB-10: Text content type in Venia UI / PWA Studio * PB-10: Text content type in Venia UI / PWA Studio - Remove dl from styling * PB-35: [Docs] Master format parsing Incorporated feedback from demo and changed directory name to pagebuilder, do dash * PB-10: Text content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio * PB-10: Text content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio - Complete configAggregator for banner * PB-17: Banner content type in Venia UI / PWA Studio - Update propTypes - Implement the majority of banner features * PB-12: Buttons content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio - Add backgroundColor to configAggregator - Add button to banner * PB-17: Banner content type in Venia UI / PWA Studio - Fix test issues * PB-17: Banner content type in Venia UI / PWA Studio - Add link to entire banner * PB-17: Banner content type in Venia UI / PWA Studio - Test coverage * PB-17: Banner content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio - Fix hidden banner * PB-17: Banner content type in Venia UI / PWA Studio * PB-144: Style Map component address popup - Style map tooltip - Fix issue with displaying state * PB-12: Buttons content type in Venia UI / PWA Studio * PB-153: Banner component bugs * PB-17: Banner content type in Venia UI / PWA Studio - add router for links * PB-17: Banner content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio * PB-17: Banner content type in Venia UI / PWA Studio * PB-12: Buttons content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio - Create configAggregator - Add config entries - Add react-slick - Add basic react-slick styling * PB-12: Buttons content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio - Improve styling * PB-18: Slider content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio * PB-12: Buttons content type in Venia UI / PWA Studio * PB-12: Buttons content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio * PB-12: Buttons content type in Venia UI / PWA Studio - Fix import casing for tests * PB-18: Slider content type in Venia UI / PWA Studio - Update yarn lock * PB-18: Slider content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio * PB-21: Products content type in Venia UI / PWA Studio * PB-21: Products content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio * PB-21: Products content type in Venia UI / PWA Studio * PB-12: Buttons content type in Venia UI / PWA Studio * PB-161: Resolve bugs in Image component * PB-161: Resolve bugs in Image component * PB-18: Slider content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio * PB-18: Slider content type in Venia UI / PWA Studio * PB-9: Tabs content type in Venia UI / PWA Studio - add comments, tests - fix minHeight * PB-9: Tabs content type in Venia UI / PWA Studio - make it prettier * Fix image compression in Page Builder * PB-162: Resolve bugs in Map component * PB-9: Tabs content type in Venia UI / PWA Studio * PB-9: Tabs content type in Venia UI / PWA Studio - Tab alignment and borders * PB-9: Tabs content type in Venia UI / PWA Studio - Add test coverage * PB-9: Tabs content type in Venia UI / PWA Studio - Add basic scrollable div into tabs * PB-9: Tabs content type in Venia UI / PWA Studio * PB-9: Tabs content type in Venia UI / PWA Studio - Add gradient at either edge of navigation * PB-9: Tabs content type in Venia UI / PWA Studio * PB-9: Tabs content type in Venia UI / PWA Studio * PB-21: Products content type in Venia UI / PWA Studio - Update products to use hooks * PB-9: Tabs content type in Venia UI / PWA Studio * PB-9: Tabs content type in Venia UI / PWA Studio * PB-9: Tabs content type in Venia UI / PWA Studio * PB-21: Products content type in Venia UI / PWA Studio * PB-36: [Docs] Creating custom Page Builder components Optimizing overview image * PB-36: [Docs] Creating custom Page Builder components Added overview of developer tasks * PB-36: [Docs] Creating custom Page Builder components WIP adding intro content to be expanded * PB-36: [Docs] Creating custom Page Builder components WIP ExampleQuote component * PB-36: [Docs] Creating custom Page Builder components WIP ExampleQuote component * PB-36: [Docs] Creating custom Page Builder components WIP ExampleQuote component * PB-36: [Docs] Creating custom Page Builder components WIP ExampleQuote component * Revert "Merge branch 'PB-17-Banner' into PB-36" This reverts commit d5ad219, reversing changes made to 2ab9ac6. * PB-36: [Docs] Creating custom Page Builder components WIP Create custom component docs draft * PB-36: [Docs] Creating custom Page Builder components WIP Create custom component docs draft * PB-36: [Docs] Creating custom Page Builder components WIP Create custom component docs draft * PB-36: [Docs] Creating custom Page Builder components WIP on lots of stuff * PB-36: [Docs] Creating custom Page Builder components Ran prettier * PB-36: [Docs] Creating custom Page Builder components Fixed code warnings * PB-36: [Docs] Creating custom Page Builder components Refined aggregator docs and added diagrams * PB-36: [Docs] Creating custom Page Builder components Additional info on overview pages * PB-36: [Docs] Creating custom Page Builder components Added remain content type source code docs to host topics * Revert "Revert "Merge branch 'PB-17-Banner' into PB-36"" This reverts commit 72e9fea. * PB-36: [Docs] Creating custom Page Builder components fixed docs * PB-36: [Docs] Creating custom Page Builder components fixed docs * PB-36: [Docs] Creating custom Page Builder components Added added banner to docs * PB-167: Resolve bugs in Row & Column component * Resolve “Forgot Password” button color * Resolve CMS Root component issues * PB-36: [Docs] Creating custom Page Builder components Added stylesheet and component topics * PB-36: [Docs] Creating custom Page Builder components Added stylesheet and component topics * PB-36: [Docs] Creating custom Page Builder components Added stylesheet and component topics * PB-36: [Docs] Creating custom Page Builder components Changes to top nav and various diagrams and component alphabetizing * PB-36: [Docs] Creating custom Page Builder components Removed ExampleQuote component * PB-36: [Docs] Creating custom Page Builder components Removed ExampleQuote component * PB-36: [Docs] Creating custom Page Builder components Optimized images * PB-36: [Docs] Creating custom Page Builder components Optimized images * Optimize imports, remove callback dep, memoize handler * PB-167: Resolve bugs in Row & Column component - Resolve parallax issues * PB-36: [Docs] Creating custom Page Builder components Adding suggestions form review Co-Authored-By: James Calcaben <[email protected]> * PB-36: [Docs] Creating custom Page Builder components Reverted Gemfile.lock and other review comments * PB-36: [Docs] Creating custom Page Builder components Formatting fixes from review * PB-167: Resolve bugs in Row & Column component * Fix function call to preventDefault * Fix console warnings for resourceUrl * PB-167: Resolve bugs in Row & Column component - Add test for full bleed * Improve test coverage * PB-36: [Docs] Creating custom Page Builder components Updates to add mergeClasses * Remove old CSS file * Fix lint rules * PB-36: [Docs] Creating custom Page Builder components Update to add prop-types * Enforce one-var never * Rename Map to GoogleMap in code * Move defaultProps into configAggregator * PB-36: [Docs] Creating custom Page Builder components Updated Known limitations * Refactor tabs useState to useRef, remove box sizing, refactor cssClasses * Fix formatting * Object destructure dynamic import * PB-36: [Docs] Creating custom Page Builder components Fixes from markdown linting * PB-36: [Docs] Creating custom Page Builder components Moved images into image directory * PB-36: [Docs] Creating custom Page Builder components Moved all Page Builder docs to _drafts * Resolve event names and callback dep * Render <CategoryList /> if page content is empty or default
magento · Oct 18, 2019 · 404cd2c · 404cd2c
1 parent a36473f
commit 404cd2c
Show file tree

Hide file tree

Showing 228 changed files with 11,480 additions and 112 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@ lerna-debug.log
 yarn-error.log
 # Packages that build partially transpiled ES modules put them here
 docker/certs
+.history
diff --git a/docker/.env.docker.dev b/docker/.env.docker.dev
@@ -14,3 +14,4 @@ UPWARD_JS_UPWARD_PATH=upward.yml
 UPWARD_JS_BIND_LOCAL=1
 UPWARD_JS_LOG_URL=1
 CHECKOUT_BRAINTREE_TOKEN=sandbox_8yrzsvtm_s2bg8fs563crhqzk
+GOOGLE_MAPS_API_KEY=redacted
diff --git a/docker/.env.docker.prod b/docker/.env.docker.prod
@@ -14,3 +14,4 @@ CUSTOM_ORIGIN_ENABLED=0
 UPWARD_JS_BIND_LOCAL=1
 UPWARD_JS_LOG_URL=1
 CHECKOUT_BRAINTREE_TOKEN=redacted
+GOOGLE_MAPS_API_KEY=redacted
diff --git a/jest.config.js b/jest.config.js
@@ -79,7 +79,9 @@ const testVenia = inPackage => ({
     // @magento namespaced packages like Peregrine and Venia UI as well, when
     // it's testing Venia. That way, changes in sibling packages don't require a
     // full compile.
-    transformIgnorePatterns: ['node_modules/(?!@magento/)'],
+    transformIgnorePatterns: [
+        'node_modules/(?!@magento|jarallax|video-worker/)'
+    ],
     globals: {
         UNION_AND_INTERFACE_TYPES: {
             __schema: {

diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@magento/eslint-config": "~1.4.1",
+    "@types/jest": "~24.0.18",
     "chalk": "~2.4.2",
     "chokidar": "~2.1.2",
     "coveralls": "~3.0.3",

diff --git a/packages/peregrine/lib/Router/magentoRouteHandler.js b/packages/peregrine/lib/Router/magentoRouteHandler.js
@@ -112,8 +112,12 @@ export default class MagentoRouteHandler extends Component {
 
             // associate the matching RootComponent with this location
             this.setRouteComponent(pathname, RootComponent, { id });
-        } catch ({ message }) {
-            const symbol = message === '404' ? NotFound : InternalError;
+        } catch (e) {
+            if (process.env.NODE_ENV === 'development') {
+                console.error(e);
+            }
+
+            const symbol = e.message === '404' ? NotFound : InternalError;
 
             // we don't have a matching RootComponent, but we've checked for one
             // so associate the appropriate error case with this location

diff --git a/packages/peregrine/lib/Router/resolveUnknownRoute.js b/packages/peregrine/lib/Router/resolveUnknownRoute.js
@@ -84,7 +84,7 @@ function remotelyResolveRoute(opts) {
 }
 
 /**
- * @description Calls the GraphQL API for results from the urlResolver query
+ * @description Calls remote endpoints to see if anything can handle this route.
  * @param {{ route: string, apiBase: string}} opts
  * @returns {Promise<{type: "PRODUCT" | "CATEGORY" | "CMS_PAGE"}>}
  */

diff --git a/packages/peregrine/lib/Toasts/useToasts.js b/packages/peregrine/lib/Toasts/useToasts.js
@@ -32,9 +32,9 @@ export const getToastId = ({
 
     // The hashing function below should generally avoid accidental collisions.
     // It exists to give a "readable" identifier to toasts for debugging.
-    let hash = 0,
-        i,
-        chr;
+    let hash = 0;
+    let i;
+    let chr;
     if (combined.length === 0) return hash;
     for (i = 0; i < combined.length; i++) {
         chr = combined.charCodeAt(i);

diff --git a/packages/peregrine/lib/util/getFilterParamsFromUrl.js b/packages/peregrine/lib/util/getFilterParamsFromUrl.js
@@ -2,8 +2,8 @@ import { persistentQueries } from './persistentQueries';
 
 export const getFilterParams = () => {
     const params = new URLSearchParams(window.location.search);
-    let titles,
-        values = [];
+    let titles;
+    let values = [];
 
     const urlFilterParams = {};
 

diff --git a/packages/pwa-buildpack/envVarDefinitions.json b/packages/pwa-buildpack/envVarDefinitions.json
@@ -150,6 +150,17 @@
                     "default": "sandbox_8yrzsvtm_s2bg8fs563crhqzk"
                 }
             ]
+        },
+        {
+            "name": "Google Maps",
+            "variables": [
+                {
+                    "name": "GOOGLE_MAPS_API_KEY",
+                    "type": "str",
+                    "desc": "Specify a Google Maps API token for instantiating a Maps instance for your Page Builder map content type.",
+                    "default": ""
+                }
+            ]
         }
     ],
     "changes": [

diff --git a/packages/pwa-buildpack/lib/Utilities/__tests__/addImgOptMiddleware.spec.js b/packages/pwa-buildpack/lib/Utilities/__tests__/addImgOptMiddleware.spec.js
@@ -10,7 +10,11 @@ const redis = require('redis');
 const mockSharpMiddleware = expressSharp.__mockMiddleware;
 const mockCacheMiddleware = apicache.__mockMiddleware;
 
-let app, config, filterMiddleware, req, res;
+let app;
+let config;
+let filterMiddleware;
+let req;
+let res;
 
 const next = () => {};
 

diff --git a/packages/pwa-buildpack/lib/Utilities/addImgOptMiddleware.js b/packages/pwa-buildpack/lib/Utilities/addImgOptMiddleware.js
@@ -21,8 +21,8 @@ try {
  * UPWARD, and then used in various places: here, the UPWARD resolution
  * path itself, the `makeURL` function in the client, etc.
  */
-const imageExtensions = /\.(jpg|png|gif|webp)$/;
-const imageParameters = ['auto', 'format', 'width', 'height'];
+const imageExtensions = /\.(jpg|jpeg|png|gif|webp)$/;
+const imageParameters = ['auto', 'format', 'width', 'height', 'quality'];
 const wantsResizing = req =>
     req.method === 'GET' &&
     imageExtensions.test(req.path) &&

diff --git a/packages/pwa-buildpack/lib/WebpackTools/plugins/__tests__/UpwardDevServerPlugin.spec.js b/packages/pwa-buildpack/lib/WebpackTools/plugins/__tests__/UpwardDevServerPlugin.spec.js
@@ -34,9 +34,9 @@ test('composes with an existing devServer.after function', () => {
 test('applies to a Webpack compiler and resolves any existing devServer requests', async () => {
     const devServer = {};
     const compiler = {};
-    const req = {},
-        res = {},
-        next = {};
+    const req = {};
+    const res = {};
+    const next = {};
     const app = {
         use: jest.fn()
     };
@@ -100,9 +100,9 @@ test('shares compiler promise', async () => {
 test('shares middleware promise so as not to create multiple middlewares', async () => {
     const devServer = {};
     const compiler = {};
-    const req = {},
-        res = {},
-        next = {};
+    const req = {};
+    const res = {};
+    const next = {};
     const app = {
         use: jest.fn()
     };

diff --git a/packages/upward-js/lib/__tests__/buildResponse.test.js b/packages/upward-js/lib/__tests__/buildResponse.test.js
@@ -1,7 +1,8 @@
 const buildResponse = require('../buildResponse');
 const { getScenarios } = require('@magento/upward-spec');
 
-let scenarios, mockIO;
+let scenarios;
+let mockIO;
 beforeAll(async () => {
     scenarios = await getScenarios(/static\-servers/);
     mockIO = {

diff --git a/packages/upward-js/lib/resolvers/ProxyResolver.js b/packages/upward-js/lib/resolvers/ProxyResolver.js
@@ -38,14 +38,19 @@ class ProxyResolver extends AbstractResolver {
 
         let server = ProxyResolver.servers.get(targetUrl);
         if (!server) {
+            const target = new URL(targetUrl);
             debug(`creating new server for ${targetUrl}`);
-            server = proxyMiddleware({
+            const opts = {
                 target: targetUrl.toString(),
                 secure: !ignoreSSLErrors,
                 changeOrigin: true,
                 autoRewrite: true,
                 cookieDomainRewrite: ''
-            });
+            };
+            if (target.username) {
+                opts.auth = [target.username, target.password].join(':');
+            }
+            server = proxyMiddleware(opts);
             ProxyResolver.servers.set(targetUrl, server);
         }
 

diff --git a/packages/upward-js/lib/resolvers/ServiceResolver.js b/packages/upward-js/lib/resolvers/ServiceResolver.js
@@ -101,9 +101,12 @@ class ServiceResolver extends AbstractResolver {
                     return { data };
                 }
             })
-            .catch(e => {
+            .catch(async e => {
+                const { print } = require('graphql/language/printer');
                 throw new Error(
-                    `ServiceResolver: Request to ${endpoint.toString()} failed: ${e}`
+                    `ServiceResolver: Request to ${endpoint.toString()} failed: ${e}.\n\nQuery: ${print(
+                        await parsedQuery.render()
+                    )}\n\nVariables:\n\n ${JSON.stringify(variables)}`
                 );
             });
     }

diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json
@@ -100,6 +100,7 @@
     "react-feather": "~2.0.3",
     "react-redux": "~7.1.1",
     "react-router-dom": "~5.0.0",
+    "react-tabs": "~3.0.0",
     "react-test-renderer": "~16.9.0",
     "redux": "~4.0.1",
     "redux-actions": "~2.6.4",

diff --git a/packages/venia-ui/lib/RootComponents/CMS/cms.js b/packages/venia-ui/lib/RootComponents/CMS/cms.js
@@ -1,8 +1,48 @@
 import React from 'react';
+import { useQuery } from '@apollo/react-hooks';
+import cmsPageQuery from '../../queries/getCmsPage.graphql';
+import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
+import RichContent from '../../components/RichContent';
+import { number } from 'prop-types';
 import CategoryList from '../../components/CategoryList';
 
-const CMS = () => {
-    return <CategoryList title="Shop by category" id={2} />;
+const CMSPage = props => {
+    const { id } = props;
+    const { loading, error, data } = useQuery(cmsPageQuery, {
+        variables: {
+            id: Number(id),
+            onServer: false
+        }
+    });
+
+    if (error) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.error(error);
+        }
+        return <div>Page Fetch Error</div>;
+    }
+
+    if (loading) {
+        return fullPageLoadingIndicator;
+    }
+
+    if (data) {
+        // Only render <RichContent /> if the page isn't empty and doesn't contain the default CMS Page text.
+        if (
+            data.cmsPage.content &&
+            data.cmsPage.content.length > 0 &&
+            !data.cmsPage.content.includes('CMS homepage content goes here.')
+        ) {
+            return <RichContent html={data.cmsPage.content} />;
+        }
+
+        return <CategoryList title="Shop by category" id={2} />;
+    }
+    return null;
+};
+
+CMSPage.propTypes = {
+    id: number
 };
 
-export default CMS;
+export default CMSPage;
diff --git a/packages/venia-ui/lib/components/Button/button.css b/packages/venia-ui/lib/components/Button/button.css
@@ -56,7 +56,6 @@
 .root_lowPriority {
     composes: root;
     border-width: 0;
-    color: rgb(var(--venia-error));
     text-decoration: underline;
 }
 

diff --git a/packages/venia-ui/lib/components/CmsBlock/__tests__/__snapshots__/block.spec.js.snap b/packages/venia-ui/lib/components/CmsBlock/__tests__/__snapshots__/block.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a Block component 1`] = `
+<div>
+  RichContent
+</div>
+`;
diff --git a/packages/venia-ui/lib/components/CmsBlock/__tests__/block.spec.js b/packages/venia-ui/lib/components/CmsBlock/__tests__/block.spec.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import Block from '../block';
+
+jest.mock('../../RichContent', () => {
+    return () => <div>RichContent</div>;
+});
+
+test('renders a Block component', () => {
+    const component = createTestInstance(<Block />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/CmsBlock/block.css b/packages/venia-ui/lib/components/CmsBlock/block.css
diff --git a/packages/venia-ui/lib/components/CmsBlock/block.js b/packages/venia-ui/lib/components/CmsBlock/block.js
@@ -1,27 +1,28 @@
-import React, { Component } from 'react';
-import { shape, string } from 'prop-types';
+import React from 'react';
+import { string } from 'prop-types';
+import RichContent from '../RichContent';
 
-import classify from '../../classify';
-import defaultClasses from './block.css';
+/**
+ * CMS Block component.
+ *
+ * @typedef Block
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a CMS Block.
+ */
+const Block = ({ content }) => <RichContent html={content} />;
 
-class Block extends Component {
-    static propTypes = {
-        classes: shape({
-            root: string
-        }),
-        content: string.isRequired
-    };
+/**
+ * Props for {@link Block}
+ *
+ * @typedef props
+ *
+ * @property {String} content Rich content of the block
+ */
+Block.propTypes = {
+    content: string
+};
 
-    render() {
-        const { classes, content: __html } = this.props;
-
-        return (
-            <div
-                className={classes.root}
-                dangerouslySetInnerHTML={{ __html }}
-            />
-        );
-    }
-}
-
-export default classify(defaultClasses)(Block);
+export default Block;
diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
@@ -15,6 +15,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       <img
         alt="Test Product 1"
         height="375"
+        loading="lazy"
         sizes="300px"
         src="a.url"
         srcSet="a.url 40w,a.url 80w,a.url 160w,a.url 320w,a.url 640w,a.url 1280w,a.url 1600w,a.url 2560w"
@@ -37,6 +38,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       <img
         alt="Test Product 2"
         height="375"
+        loading="lazy"
         sizes="300px"
         src="a.url"
         srcSet="a.url 40w,a.url 80w,a.url 160w,a.url 320w,a.url 640w,a.url 1280w,a.url 1600w,a.url 2560w"

diff --git a/packages/venia-ui/lib/components/Gallery/item.js b/packages/venia-ui/lib/components/Gallery/item.js
@@ -127,6 +127,7 @@ class GalleryItem extends Component {
                 alt={name}
                 width={imageWidth}
                 height={imageHeight}
+                loading="lazy"
                 sizes={`${imageWidth}px`}
                 srcSet={generateSrcset(small_image, 'image-product')}
             />