Merge pull request #472 from WebDevStudios/feature/410-expand-block-a…

…ttrs feature/410-expand-block-attrs
WebDevStudios · Jun 1, 2021 · 31859bf · 31859bf · vercel · Jun 1, 2021
2 parents 296d829 + c06c9f5
commit 31859bf
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 23 deletions.
diff --git a/components/atoms/Code/Code.js b/components/atoms/Code/Code.js
@@ -1,3 +1,4 @@
+import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
@@ -15,8 +16,10 @@ import styles from './Code.module.css'
  * @return {Element}                 The Code component.
  */
 export default function Code({id, className, content}) {
-  // Use the className to pass the langauge.
-  const language = className ? className : 'javascript'
+  const classNames = className?.length ? className.split(' ') : []
+
+  // Use the first entry in className to pass the langauge.
+  const language = classNames?.length ? classNames.shift() : 'javascript'
 
   /**
    * Replace any `&lt;` and `&gt; encoded HTML.
@@ -36,7 +39,10 @@ export default function Code({id, className, content}) {
   return (
     <>
       {!!content && (
-        <div id={id ? id : null} className={styles.code}>
+        <div
+          id={id ? id : null}
+          className={cn(styles.code, classNames.join(' '))}
+        >
           <SyntaxHighlighter style={tomorrow} language={language}>
             {codeFormatter(content)}
           </SyntaxHighlighter>

diff --git a/components/atoms/Code/Code.stories.mdx b/components/atoms/Code/Code.stories.mdx
@@ -10,7 +10,10 @@ Use this component to display a code block.
 
 <Canvas>
   <Story name="Component">
-    <Code content="<p>this is a code block!</p>" />
+    <Code
+      content="<p>this is a code block!</p>"
+      className="html custom-class"
+    />
   </Story>
 </Canvas>
 
@@ -25,7 +28,7 @@ export const Template = (args) => <Code {...args} />
     name="Controls"
     args={{
       content: '<p>this is a code block!</p>',
-      className: 'html'
+      className: 'html custom-class'
     }}
   >
     {Template.bind({})}

diff --git a/components/atoms/Separator/Separator.js b/components/atoms/Separator/Separator.js
@@ -8,23 +8,25 @@ import styles from './Separator.module.css'
  *
  * @author WebDevStudios
  * @param  {object}  props           The component properties.
+ * @param  {string}  props.anchor    Optional anchor/id.
  * @param  {string}  props.className Optional classname.
  * @param  {boolean} props.fullWidth Is this a fullwidth block.
  * @return {Element}                 The Separator component.
  */
-export default function Separator({className, fullWidth}) {
+export default function Separator({anchor, className, fullWidth}) {
   return (
     <>
       {fullWidth ? (
-        <hr className={cn(styles.separator, className)} />
+        <hr id={anchor} className={cn(styles.separator, className)} />
       ) : (
-        <hr className={cn(styles.separator, className)} />
+        <hr id={anchor} className={cn(styles.separator, className)} />
       )}
     </>
   )
 }
 
 Separator.propTypes = {
+  anchor: PropTypes.string,
   className: PropTypes.string,
   fullWidth: PropTypes.bool.isRequired
 }

diff --git a/components/blocks/Gutenberg/BlockColumns/BlockColumns.js b/components/blocks/Gutenberg/BlockColumns/BlockColumns.js
@@ -9,22 +9,26 @@ import PropTypes from 'prop-types'
  *
  * @author WebDevStudios
  * @param  {object}  props             The component properties.
- * @param  {object}  props.options     Option props object.
+ * @param  {object}  props.columns     Option props object.
  * @param  {object}  props.innerBlocks The array of inner blocks to display.
  * @return {Element}                   The Columns component.
  */
-export default function BlockColumns({options, innerBlocks}) {
+export default function BlockColumns({columns, innerBlocks}) {
   return (
     <>
       {!!innerBlocks?.length && (
         <Columns
-          id={options?.anchor}
-          className={options?.className}
+          id={columns?.anchor}
+          className={columns?.className}
           columnCount={innerBlocks?.length}
         >
           {innerBlocks.map((block, index) => {
             return (
-              <div key={`column-${index}`}>
+              <div
+                key={`column-${index}`}
+                id={block?.attributes?.anchor}
+                className={block?.attributes?.className}
+              >
                 {!!block?.innerBlocks?.length && (
                   <Blocks blocks={block.innerBlocks} />
                 )}
@@ -38,7 +42,7 @@ export default function BlockColumns({options, innerBlocks}) {
 }
 
 BlockColumns.propTypes = {
-  options: PropTypes.shape({
+  columns: PropTypes.shape({
     anchor: PropTypes.string,
     className: PropTypes.string
   }),

diff --git a/components/blocks/Gutenberg/BlockCover/BlockCover.js b/components/blocks/Gutenberg/BlockCover/BlockCover.js
@@ -17,7 +17,11 @@ export default function BlockCover({media, innerBlocks}) {
   return (
     <>
       {!!media?.url && (
-        <Hero backgroundImage={media} id={media?.anchor}>
+        <Hero
+          backgroundImage={media}
+          id={media?.anchor}
+          className={media?.className}
+        >
           {!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
         </Hero>
       )}
@@ -28,6 +32,7 @@ export default function BlockCover({media, innerBlocks}) {
 BlockCover.propTypes = {
   media: PropTypes.shape({
     anchor: PropTypes.string,
+    className: PropTypes.string,
     url: PropTypes.string
   }),
   innerBlocks: PropTypes.arrayOf(

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -18,6 +18,8 @@ export default function BlockMediaText({media, innerBlocks}) {
     <>
       {!!media && innerBlocks?.length && (
         <MediaText
+          id={media?.anchor}
+          className={media?.className}
           mediaLeft={media?.mediaPosition === 'left' ? true : false}
           image={{url: media?.mediaUrl, alt: media?.mediaAlt}}
         >

diff --git a/components/organisms/Hero/Hero.js b/components/organisms/Hero/Hero.js
@@ -14,6 +14,7 @@ import styles from './Hero.module.css'
  * @param  {any}     props.children        InnerBlocks.
  * @param  {object}  props.ctaText         The cta text.
  * @param  {object}  props.ctaUrl          The cta url.
+ * @param  {string}  props.id              Optional element ID.
  * @param  {string}  props.subtitle        Text for the subtitle.
  * @param  {string}  props.title           Text for the title.
  * @return {Element}                       The Hero component.
@@ -25,11 +26,13 @@ export default function Hero({
   children,
   ctaText,
   ctaUrl,
+  id,
   subtitle,
   title
 }) {
   return (
     <section
+      id={id}
       className={cn(styles.hero, className)}
       style={{
         // These css custom properties are used inside the css module file to set the card's background image, tint overlay, and fallback bg color.
@@ -65,6 +68,7 @@ Hero.propTypes = {
   children: PropTypes.any,
   ctaText: PropTypes.string,
   ctaUrl: PropTypes.string,
+  id: PropTypes.string,
   subtitle: PropTypes.string,
   title: PropTypes.string
 }
diff --git a/components/organisms/Hero/Hero.stories.mdx b/components/organisms/Hero/Hero.stories.mdx
@@ -14,8 +14,7 @@ Use this to display a large CTA, usually at the top of a page.
       title="New Designs"
       body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
       backgroundImage={{
-        url:
-          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60'
+        url: 'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60'
       }}
       cta={{icon: 'arrowRight', text: 'Take a look'}}
     />

diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
@@ -13,6 +13,7 @@ import styles from './MediaText.module.css'
  * @param  {Element} props.children  The child elements.
  * @param  {string}  props.className The className.
  * @param  {object}  props.cta       The cta object with text and url strings.
+ * @param  {string}  props.id        Optional element ID.
  * @param  {object}  props.image     The image object with url and alt text.
  * @param  {boolean} props.mediaLeft Whether to show media on the left of the text.
  * @param  {string}  props.title     The title.
@@ -23,6 +24,7 @@ export default function MediaText({
   children,
   className,
   cta,
+  id,
   image,
   mediaLeft,
   title
@@ -37,6 +39,7 @@ export default function MediaText({
 
   return (
     <section
+      id={id}
       className={cn(
         styles.mediaText,
         mediaLeft ? styles.mediaLeft : null,
@@ -86,6 +89,7 @@ MediaText.propTypes = {
     url: PropTypes.string,
     icon: PropTypes.string
   }),
+  id: PropTypes.string,
   image: PropTypes.shape({
     url: PropTypes.string,
     alt: PropTypes.string

diff --git a/components/organisms/MediaText/MediaText.stories.mdx b/components/organisms/MediaText/MediaText.stories.mdx
@@ -13,8 +13,7 @@ Use this to display media and text in a 50/50 layout.
       title="New Designs"
       body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
       image={{
-        url:
-          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
+        url: 'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
         alt: 'Some alt text'
       }}
       cta={{icon: 'arrowRight', text: 'Take a look'}}
@@ -32,8 +31,7 @@ Media will display on the right on large screens by default. Use the `mediaLeft`
       title="New Designs"
       body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
       image={{
-        url:
-          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
+        url: 'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
         alt: 'Some alt text'
       }}
       cta={{icon: 'arrowRight', text: 'Take a look'}}
@@ -55,8 +53,7 @@ You can display children as an element using the `children` prop. If used, the `
         </div>
       }
       image={{
-        url:
-          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
+        url: 'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
         alt: 'Some alt text'
       }}
       mediaLeft