Merge pull request #57 from hlxsites/columns-block

Columns block

blocks/columns/columns.js

@@ -0,0 +1,6 @@
+import Grid from '../grid/grid.js';
+
+export default class Columns extends Grid {
+  // only one attribute is observed rest is set as css variables directly
+  static observedAttributes = ['data-reverse'];
+}

blocks/grid-item/grid-item.css

@@ -1,4 +1,4 @@
-raqn-grid-item {
+:where(raqn-grid-item, .raqn-grid-item) {
   --grid-item-justify: initial;
   --grid-item-align: initial;
   --grid-item-order: initial;
@@ -20,7 +20,7 @@ raqn-grid-item {
 }
 
 /* Make grid item sticky */
-raqn-grid-item[data-sticky='true' i] {
+:where(raqn-grid-item, .raqn-grid-item)[data-sticky='true' i] {
   position: sticky;
   top: var(--header-height);
   height: fit-content;
@@ -33,11 +33,11 @@ raqn-grid-item[data-sticky='true' i] {
 /* Start Make entire item clickable 
  * if the first anchor in the grid item is italic
  */
-raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) {
+:where(raqn-grid-item, .raqn-grid-item):has(> p:first-child > em:only-child > a:only-child) {
   position: relative;
 }
 
-raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) > p:first-child a {
+:where(raqn-grid-item, .raqn-grid-item):has(> p:first-child > em:only-child > a:only-child) > p:first-child a {
   position: absolute;
   inset-block-end: 0;
   inset-inline-end: 0;
@@ -49,27 +49,27 @@ raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) > p:first-chi
 }
 
 /* Make other anchor or buttons in the grid item still accessible */
-raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) :where(a, button) {
+:where(raqn-grid-item, .raqn-grid-item):has(> p:first-child > em:only-child > a:only-child) :where(a, button) {
   position: relative;
   z-index: 2;
 }
 
-raqn-grid-item > p:first-child:has(> em:only-child > a:only-child) {
+:where(raqn-grid-item, .raqn-grid-item) > p:first-child:has(> em:only-child > a:only-child) {
   margin: 0;
 }
 
 /* End */
 
 /* Start Remove unwanted spacing from elements inside grid item */
-raqn-grid-item > :first-child {
+:where(raqn-grid-item, .raqn-grid-item) > :first-child {
   margin-block-start: 0;
 }
 
-raqn-grid-item > :last-child {
+:where(raqn-grid-item, .raqn-grid-item) > :last-child {
   margin-block-end: 0;
 }
 
-raqn-grid-item > p:first-child:has(> em:only-child > a:only-child) + * {
+:where(raqn-grid-item, .raqn-grid-item) > p:first-child:has(> em:only-child > a:only-child) + * {
   margin-block-start: 0;
 }
 

blocks/grid-item/grid-item.js

@@ -13,27 +13,6 @@ export default class GridItem extends ComponentBase {
 
   gridParent = null;
 
-  get siblingsItems() {
-    return this.gridParent.gridItems.filter((x) => x !== this);
-  }
-
-  get logicalOrder() {
-    return this.gridParent.gridItems.indexOf(this) + 1;
-  }
-
-  get areaName() {
-    return `item-${this.logicalOrder}`;
-  }
-
-  // This method is called by the gridParent when a grid-template-areas is set.
-  setAutoAreaName(add = true) {
-    if (add) {
-      this.dataset.area = this.areaName;
-    } else {
-      delete this.dataset.area;
-    }
-  }
-
   init() {
     super.init();
     this.gridParent ??= this.parentElement;

blocks/grid/grid.css

@@ -1,4 +1,4 @@
-raqn-grid {
+:where(raqn-grid, .raqn-grid) {
   /* Set to initial to prevent inheritance for nested grids */
   --grid-gap: initial;
   --grid-height: initial;

blocks/grid/grid.js

@@ -28,9 +28,9 @@ export default class Grid extends ComponentBase {
 
     items.forEach((item, index) => {
       if (reverse) {
-        item.dataset.order = index + 1;
+        item.style.setProperty('--grid-item-order', index + 1);
       } else {
-        delete item.dataset.order;
+        item.style.removeProperty('--grid-item-order');
       }
     });
   }

scripts/component-list/component-list.js

@@ -267,6 +267,23 @@ export const componentList = {
       priority: 4,
     },
   },
+  columns: {
+    tag: 'raqn-columns',
+    // method: 'replace',
+    transform(node) {
+      node.tag = this.tag;
+      setPropsAndAttributes(node);
+      node.addClass('raqn-grid');
+      [...node.children].forEach((n) => n.unWrap());
+
+      node.children.forEach((n) => n.addClass('raqn-grid-item'));
+    },
+    module: {
+      path: '/blocks/columns/columns',
+      loadCSS: false,
+      dependencies: ['grid', 'grid-item'],
+    },
+  },
   grid: {
     tag: 'raqn-grid',
     method: 'replace',

scripts/render/dom-reducers.js

@@ -75,7 +75,7 @@ export const toWebComponent = (virtualDom) => {
   // Simple and fast in place tag replacement
   recursive((node) => {
     replaceBlocks.forEach(([blockName, config]) => {
-      if (node?.class?.includes?.(blockName) || config.filterNode?.(node)) {
+      if (node?.hasClass?.(blockName) || config.filterNode?.(node)) {
         node.tag = config.tag;
         setPropsAndAttributes(node);
         addToLoadComponents(blockName, config);
@@ -85,8 +85,7 @@ export const toWebComponent = (virtualDom) => {
 
   // More complex transformation need to be done in order based on a separate query for each component.
   queryBlocks.forEach(([blockName, config]) => {
-    const filter =
-      config.filterNode?.bind(config) || ((node) => node?.class?.includes?.(blockName) || node.tag === blockName);
+    const filter = config.filterNode?.bind(config) || ((node) => node?.hasClass?.(blockName) || node.tag === blockName);
     const nodes = virtualDom.queryAll(filter, { queryLevel: config.queryLevel });
 
     nodes.forEach((node) => {

scripts/render/dom-reducers.preview.js

@@ -6,13 +6,13 @@ import { isTemplatePage } from '../libs.js';
 export const highlightTemplatePlaceholders = (tplVirtualDom) => {
   tplVirtualDom.queryAll((node) => {
     if (!tplPlaceholderCheck('p', node)) return false;
-    node.class.push('template-placeholder');
+    node.addClass('template-placeholder');
     return true;
   });
 };
 
 export const noContentPlaceholder = (node) => {
-  node.class.push('template-placeholder');
+  node.addClass('template-placeholder');
   node.append({
     tag: 'span',
     class: ['error-message-box'],
@@ -40,7 +40,7 @@ export const duplicatedPlaceholder = (placeholdersNodes, placeholders, markAll =
   }
 
   duplicatesNodes.forEach((node) => {
-    node.class.push('template-placeholder');
+    node.addClass('template-placeholder');
     node.append({
       tag: 'span',
       class: ['error-message-box'],

scripts/render/dom.js

@@ -81,9 +81,19 @@ export function nodeProxy(rawNode) {
         return (...classes) => classes.every((cls) => target.class.includes(cls));
       }
 
+      if (prop === 'addClass') {
+        return (cls) => {
+          if (!target.class.includes(cls)) target.class.push(cls);
+        };
+      }
+
       // mehod
       if (prop === 'removeClass') {
-        return (cls) => target.class.splice(target.class.indexOf(cls), 1);
+        return (cls) => {
+          while (target.class.indexOf(cls) !== -1) {
+            target.class.splice(target.class.indexOf(cls), 1);
+          }
+        };
       }
 
       // mehod
@@ -132,6 +142,13 @@ export function nodeProxy(rawNode) {
         };
       }
 
+      // mehod
+      if (prop === 'unWrap') {
+        return () => {
+          proxyNode.replaceWith(...proxyNode.children);
+        };
+      }
+
       // mehod
       if (prop === 'after') {
         return (...nodes) => {