gutenberg

// -----------------------

/**
 * Declare our custom attribute
 */
const setDecalageButton = (settings, name) => {
  return Object.assign({}, settings, {
    attributes: Object.assign({}, settings.attributes, {
      decallage: { type: "boolean", default: false },
      decallagevalue: { type: "number", default: 0 },
    }),
  });
};

wp.hooks.addFilter(
  "blocks.registerBlockType",
  "custom-attributes-decallage/set-decallage-button-attributes",
  setDecalageButton
);

/**
 * Add Custom Button for added decallage
 */
const decallageButtonToolbar = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { attributes, setAttributes } = props;
    const { decallage, decallagevalue } = attributes;

    return (
      <Fragment>
        <InspectorControls key="setting">
          <div id="gutenpride-controls">
            <fieldset>
              <legend className="blocks-base-control__label">
                {__("Decaller le bloc vers le haut ? ", "gutenpride")}
              </legend>

              <FormToggle
                checked={decallage}
                onChange={(e) => {
                  if (decallage === true) {
                    setAttributes({
                      decallage: false,
                    });
                  } else {
                    setAttributes({
                      decallage: true,
                    });
                  }
                }}
              />

              {decallage === true && (
                <__experimentalNumberControl
                  isShiftStepEnabled={true}
                  onChange={(newValue) => {
                    setAttributes({
                      decallagevalue: newValue,
                    });
                  }}
                  shiftStep={10}
                  value={decallagevalue}
                />
              )}
            </fieldset>
          </div>
        </InspectorControls>

        <BlockEdit {...props} />
      </Fragment>
    );
  };
}, "decallageButtonToolbar");

wp.hooks.addFilter(
  "editor.BlockEdit",
  "custom-attributes-decallage/add-decallage-button",
  decallageButtonToolbar
);

/**
 * Add custom css to block in Edit
 */
const decallageButtonToolbarProps = createHigherOrderComponent(
  (BlockListBlock) => {
    return (props) => {
      const { attributes } = props;
      const { decallage, decallagevalue } = attributes;

      if (decallage && true === decallage) {
        return <BlockListBlock {...props} />;
      } else {
        return <BlockListBlock {...props} />;
      }
    };
  },
  "decallageButtonToolbarProps"
);

wp.hooks.addFilter(
  "editor.BlockListBlock",
  "custom-attributes-decallage/set-decallage-button",
  decallageButtonToolbarProps
);

/**
 * Save our custom attribute
 */
const savedecallageButtonToolbarAttribute = (
  saveElementProps,
  blockType,
  attributes
) => {
  // Do nothing if it's another block than our defined ones.
  const { decallage, decallagevalue } = attributes;
  console.log(decallage);
  console.log(decallagevalue);
  if (decallage && true === decallage) {
    // return Object.assign(saveElementProps, {
    // 	decallagevalue: decallagevalue,
    // 	decallage: decallage,
    // });

    return {
      ...saveElementProps,
      attributes: {
        decallagevalue: decallagevalue,
        decallage: decallage,
      },
    };
  }

  return saveElementProps;
};

wp.hooks.addFilter(
  "blocks.getSaveContent.extraProps",
  "custom-attributes-decallage/save-decallage-button",
  savedecallageButtonToolbarAttribute
);