Commit 4a10f0c1 authored by Yahya Al Hamad's avatar Yahya Al Hamad Committed by Yahya Al Hamad
Browse files

Issue #3256238 by YahyaAlHamad: Add a plugin to wrap blocks and act like the module "Field Groups"

parent d21e364c

assets/js/blocks-wrapper.js

+5 −5

File changed.

Preview size limit exceeded, changes collapsed.

assets/js/blocks-wrapper/RegionInput.js

+6 −9
Original line number Diff line number Diff line 
import React, { useEffect, useState } from "react";

import SimpleAccordion from "./SimpleAccordion";

import $ from "jquery";

import {generateUuid} from './helper';

import {

  Group,

  Input,
@@ -18,7 +19,6 @@ const RegionInput = ({ 
  defaultValue,

}) => {

  const [groups, setGroups] = useState([]);

  const [counter, setCounter] = useState(1);



  useEffect(() => {

    onChange(regionId, groups);
@@ -38,9 +38,8 @@ const RegionInput = ({ 
      wrapper: "div",

      attributes: "",

      admin_label: null,

      id: counter,

      id: generateUuid(),

    });

    setCounter(counter + 1);

    setGroups(newGroups);

  };
@@ -70,9 +69,7 @@ const RegionInput = ({ 
          {groups.map((group) => (

            <SimpleAccordion

              key={group.id}

              label={

                group.admin_label ? group.admin_label : `Groups ${group.id}`

              }

              label={group.admin_label ? group.admin_label : `Unnamed Group`}

              classNames="group"

              id={group.id}

              cancel
@@ -82,7 +79,7 @@ const RegionInput = ({ 
                <Label>{Drupal.t("Admin Label")}</Label>

                <Input

                  required

                  value={group.admin_label || ''}

                  value={group.admin_label || ""}

                  name="admin_label"

                  type="text"

                  onChange={(e) => handleChange(group.id, e)}
@@ -93,7 +90,7 @@ const RegionInput = ({ 
                <Select

                  onChange={(e) => handleChange(group.id, e)}

                  required

                  value={group.wrapper || ''}

                  value={group.wrapper || ""}

                  name="wrapper"

                >

                  <option value="div">div</option>
@@ -107,7 +104,7 @@ const RegionInput = ({ 
                  onChange={(e) => handleChange(group.id, e)}

                  type="text"

                  name="attributes"

                  value={group.attributes || ''}

                  value={group.attributes || ""}

                />

              </Group>

              <Group>

assets/js/blocks-wrapper/helper.js

+7 −12
Original line number Diff line number Diff line 
export const map = (collection, callback) => {

  const toReturn = [];

  if (typeof collection === "object") {

    const objectKeys = Object.keys(object);

    objectKeys.forEach((key) => {

      toReturn.push(callback(collection[key], key));

    });

  } else if (collection instanceof Array) {

    return collection.map(callback);

  } else {

    return [];

  }

export const generateUuid = () => {

  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>

    (

      c ^

      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))

    ).toString(16)

  );

};

package-lock.json

+11 −1830

File changed.

Preview size limit exceeded, changes collapsed.

src/Plugin/LayoutField/WrapBlocksField.php

+3 −1
Original line number Diff line number Diff line
@@ -62,7 +62,9 @@ class WrapBlocksField extends LayoutFieldBase { 
        foreach ($children_of_region as $uuid) {

          if (in_array($uuid, $wrap_blocks)) {

            $wrapper[$uuid] = $region_build[$uuid];

            $wrapper['#weight'] = $region_build[$uuid]['#weight'] ?? 0;

            if (isset($region_build[$uuid]['#weight'])) {

              $wrapper['#weight'] = $region_build[$uuid]['#weight'];

            }

            unset($region_build[$uuid]);

          }

        }