PLANET-7442 Move P4 Columns block to the theme (#2256)

This is to eventually have a monorepo

assets/src/blocks/Columns/ColumnConstants.js

@@ -0,0 +1,7 @@
+export const LAYOUT_NO_IMAGE = 'no_image';
+export const LAYOUT_TASKS = 'tasks';
+export const LAYOUT_ICONS = 'icons';
+export const LAYOUT_IMAGES = 'image';
+
+export const MAX_COLUMNS_AMOUNT = 4;
+export const MIN_COLUMNS_AMOUNT = 2;

assets/src/blocks/Columns/Columns.js

@@ -0,0 +1,110 @@
+import {ColumnsImagePlaceholder} from './ColumnsImagePlaceholder';
+import {LAYOUT_NO_IMAGE, LAYOUT_ICONS, LAYOUT_TASKS} from './ColumnConstants';
+import {ColumnsTasks} from './ColumnsTasks';
+import {IMAGE_SIZES} from './imageSizes';
+
+export const Columns = ({columns, columns_block_style, isCampaign, isExample = false}) => {
+  if (!columns || !columns.length) {
+    return null;
+  }
+
+  if (columns_block_style === LAYOUT_TASKS) {
+    return <ColumnsTasks columns={columns} isCampaign={isCampaign} />;
+  }
+
+  return (
+    <div className="row">
+      {columns.map((column, index) => {
+        const {
+          cta_link,
+          cta_text,
+          attachment,
+          attachment_srcset,
+          link_new_tab,
+          title,
+          description,
+        } = column;
+        const titleAnalytics = {
+          'data-ga-category': 'Columns Block',
+          'data-ga-action': 'Title',
+          'data-ga-label': 'n/a',
+        };
+
+        const hasImage = attachment !== 0 && attachment !== undefined;
+        const columnsWidth = columns_block_style !== LAYOUT_ICONS ? '100%' : 100;
+
+        const columnsHeight = columns_block_style !== LAYOUT_ICONS ? 150 : 100;
+
+        return (
+          <div key={`column-${index}`} className="col-md-6 col-lg column-wrap">
+            {(hasImage || isExample) && columns_block_style !== LAYOUT_NO_IMAGE &&
+              <div className="attachment-container">
+                { isExample &&
+                  <ColumnsImagePlaceholder
+                    width={columnsWidth}
+                    height={columnsHeight}
+                  />
+                }
+
+                { (!isExample && cta_link) ?
+                  <a
+                    href={cta_link}
+                    data-ga-category="Columns Block"
+                    data-ga-action={columns_block_style === LAYOUT_ICONS ? 'Icon' : 'Image'}
+                    data-ga-label={cta_link}
+                    {...link_new_tab && {target: '_blank', rel: 'noreferrer'}}
+                  >
+                    <img src={attachment}
+                      srcSet={attachment_srcset || null}
+                      sizes={IMAGE_SIZES[`col-${columns.length}`] ?? ''}
+                      alt={title}
+                      title={title}
+                      loading="lazy" />
+                  </a> :
+                  <img src={attachment}
+                    srcSet={attachment_srcset || null}
+                    sizes={IMAGE_SIZES[`col-${columns.length}`] ?? ''}
+                    alt={title}
+                    title={title}
+                    loading="lazy" />
+                }
+              </div>
+            }
+            <h3 {...isCampaign ? titleAnalytics : {}} >
+              {cta_link && !isCampaign ?
+                <a
+                  href={cta_link}
+                  data-ga-category="Columns Block"
+                  data-ga-action="Title"
+                  data-ga-label={cta_link}
+                  {...link_new_tab && {target: '_blank', rel: 'noreferrer'}}
+                >
+                  {title}
+                </a> :
+                title
+              }
+            </h3>
+            {description &&
+              <p dangerouslySetInnerHTML={{__html: description}} />
+            }
+            {cta_text && cta_link &&
+              <a
+                href={cta_link}
+                className={isCampaign || columns_block_style === LAYOUT_NO_IMAGE ?
+                  `btn btn-${isCampaign ? 'primary' : 'secondary'}` :
+                  'standalone-link'}
+                data-ga-category="Columns Block"
+                data-ga-action="Call to Action"
+                data-ga-label={cta_link}
+                {...link_new_tab && {target: '_blank', rel: 'noreferrer'}}
+              >
+                {cta_text}
+              </a>
+            }
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+

assets/src/blocks/Columns/ColumnsBlock.js

@@ -0,0 +1,110 @@
+import {ColumnsEditor} from './ColumnsEditor.js';
+import {LAYOUT_NO_IMAGE, LAYOUT_IMAGES, LAYOUT_ICONS, LAYOUT_TASKS} from './ColumnConstants.js';
+import {example} from './example';
+import {getStyleLabel} from '../../functions/getStyleLabel';
+
+export const registerColumnsBlock = () => {
+  const {__} = wp.i18n;
+  const {registerBlockType, getBlockTypes} = wp.blocks;
+
+  const BLOCK_NAME = 'planet4-blocks/columns';
+
+  const blockAlreadyExists = getBlockTypes().find(block => block.name === BLOCK_NAME);
+
+  if (blockAlreadyExists) {
+    return;
+  }
+
+  registerBlockType(BLOCK_NAME, {
+    title: 'Planet 4 Columns',
+    icon: 'grid-view',
+    category: 'planet4-blocks',
+    attributes: {
+      columns_block_style: {
+        type: 'string',
+        default: LAYOUT_NO_IMAGE,
+      },
+      columns_title: {
+        type: 'string',
+      },
+      columns_description: {
+        type: 'string',
+      },
+      columns: {
+        type: 'array',
+        default: [{}, {}, {}],
+        title: {
+          type: 'string',
+        },
+        description: {
+          type: 'string',
+        },
+        attachment: {
+          type: 'integer',
+          default: 0,
+        },
+        cta_link: {
+          type: 'string',
+        },
+        link_new_tab: {
+          type: 'boolean',
+        },
+        cta_text: {
+          type: 'string',
+        },
+      },
+      isExample: {
+        type: 'boolean',
+        default: false,
+      },
+      exampleColumns: { // Used for the block's preview
+        type: 'array',
+      },
+    },
+    edit: ColumnsEditor,
+    save() {
+      return null;
+    },
+    styles: [
+      {
+        name: LAYOUT_NO_IMAGE,
+        label: getStyleLabel(
+          'No Image',
+          __('Optional headers, description text and buttons in a column display.', 'planet4-blocks-backend')
+        ),
+        isDefault: true,
+      },
+      {
+        name: LAYOUT_TASKS,
+        label: getStyleLabel(
+          'Tasks',
+          __(
+            'Used on Take Action pages, this display has ordered tasks, and call to action buttons.',
+            'planet4-blocks-backend'
+          )
+        ),
+      },
+      {
+        name: LAYOUT_ICONS,
+        label: getStyleLabel(
+          'Icons',
+          __(
+            'For more static content, this display has an icon, header, description and text link.',
+            'planet4-blocks-backend'
+          )
+        ),
+      },
+      {
+        name: LAYOUT_IMAGES,
+        label: getStyleLabel(
+          'Images',
+          __(
+            'For more static content, this display has an image, header, description and text link.',
+            'planet4-blocks-backend'
+          )
+        ),
+      },
+    ],
+    example,
+  });
+};