Adding MetaText block

Author: dcooney

components/atoms/Code/Code.js

@@ -19,8 +19,9 @@ export default function Code({id, className, content}) {
   // Use the className to pass the langauge.
   const language = className ? className : 'javascript'
 
-  // Replace any `<` encoded HTML.
-  const code = content.replace(/&lt;/g, '<')
+  // Replace any `&lt;` and `&gt; encoded HTML.
+  let code = content.replace(/&lt;/g, '<')
+  code = code.replace(/&gt;/g, '>')
 
   return (
     <>

components/blocks/BlockMediaText/BlockMediaText.js

@@ -0,0 +1,62 @@
+import Image from '@/components/atoms/Image'
+import Blocks from '@/components/molecules/Blocks'
+import PropTypes from 'prop-types'
+
+/**
+ * Code Block
+ *
+ * The core Code block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {string} className Optional classnames.
+ * @param {string} anchor    Optional anchor/id.
+ * @param {string} content   The content of the block.
+ * @return {Element} The Code component.
+ */
+export default function BlockMediaText({media, innerBlocks}) {
+  //const position = media?.mediaPosition === 'right' ? 'right' : 'left';
+  return (
+    <div>
+      {!!media && (
+        <Image
+          alt={media?.mediaAlt}
+          anchor={media?.anchor}
+          caption={media?.caption}
+          className={media?.className}
+          id={media?.mediaId}
+          href={media?.href}
+          linkTarget={media?.linkTarget}
+          linkClass={media?.linkClass}
+          rel={media?.rel}
+          sizeSlug={media?.sizeSlug}
+          url={media?.mediaUrl}
+        />
+      )}
+      {!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
+    </div>
+  )
+}
+
+BlockMediaText.propTypes = {
+  media: PropTypes.shape({
+    anchor: PropTypes.string,
+    caption: PropTypes.string,
+    className: PropTypes.string,
+    href: PropTypes.string,
+    linkTarget: PropTypes.string,
+    linkClass: PropTypes.string,
+    rel: PropTypes.string,
+    sizeSlug: PropTypes.string,
+    mediaAlt: PropTypes.string,
+    mediaId: PropTypes.number,
+    mediaType: PropTypes.string,
+    mediaUrl: PropTypes.string,
+    mediaPosition: PropTypes.string
+  }),
+  innerBlocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      attributes: PropTypes.object
+    })
+  )
+}

components/blocks/BlockMediaText/index.js

@@ -0,0 +1 @@
+export {default} from './BlockMediaText'

components/blocks/index.js

@@ -14,3 +14,4 @@ export {default as BlockSpacer} from './BlockSpacer'
 export {default as BlockVideoEmbed} from './BlockVideoEmbed'
 export {default as BlockTable} from './BlockTable'
 export {default as BlockCode} from './BlockCode'
+export {default as BlockMediaText} from './BlockMediaText'

functions/displayBlock.js

@@ -7,10 +7,10 @@ import PropTypes from 'prop-types'
  * @author WebDevStudios
  * @param {object} block The block data.
  * @param {number} index A unique key required by React.
- * @return {Element}     A block-based component.
+ * @return {Element} A block-based component.
  */
 export default function displayBlock(block, index) {
-  const {attributes, name} = block
+  const {attributes, name, innerBlocks} = block
 
   // prettier-ignore
   switch (name) {
@@ -23,9 +23,18 @@ export default function displayBlock(block, index) {
     case 'core/pullquote':
       return <Blocks.BlockPullQuote {...attributes} key={index} />
     case 'core/code':
-       return <Blocks.BlockCode {...attributes} key={index} />
+    case 'core/preformatted':
+      return <Blocks.BlockCode {...attributes} key={index} />
     // case 'core/embed':
     //   return <Blocks.BlockVideoEmbed {...attributes} key={index} />
+    case 'core/media-text':
+      return (
+        <Blocks.BlockMediaText
+          media={attributes}
+          innerBlocks={innerBlocks}
+          key={index}
+        />
+      )
     case 'core/heading':
       return <Blocks.BlockHeadings {...attributes} key={index} />
     case 'core/image':