1

Hey folks So Im pretty new to this react + php in wordpress and I found one article where it showed how to extend a core block, which works fine for group and some basic block but When i tried to extend some settings of core/navigation it starts behaving weird and dont actually add the class in FE based on newly added/updated attributes further i did some debugging and it looks like editor only reads core/navigation and not its nested child which I'm guessing is core/navigation-link when i use

addFilter("blocks.getSaveContent.extraProps");

So here is the whole snippet which explain what I'm trying to do.

function addaddRadiusSliderAttrToNavLink(settings, name) {
// this works fine and it extends the settings
  if (typeof settings.attributes !== "undefined") {
    if (
      name == "core/navigation-link" ||
    ) {
      settings.attributes = Object.assign(settings.attributes, {
        borderRadius: {
          type: "number",
        },
      });
        }
  }
  return settings;
}

addFilter(
  "blocks.registerBlockType",
  "awp/add-border-radius",
  addaddRadiusSliderAttrToNavLink
);


// works fine and updates attributes
const addRadiusSliderToNavigationLink = createHigherOrderComponent(
  (BlockEdit) => {
    return (props) => {

      return (
        <>
          <Fragment>
            <BlockEdit {...props} />
            {props.isSelected &&
              (props.name == "core/navigation-link" ) && (
                <InspectorControls>
                  <PanelBody
                    title={__("Border setting", "awp")}
                    initialOpen={false}
                  >
                    <RangeControl
                      label={__("Set Border Radius", "awhitepixel")}
                      value={props.attributes.borderRadius}
                      onChange={(val) => {
                        props.setAttributes({
                          borderRadius: val,
                        });
                      }}
                      min={0}
                      max={8}
                      beforeIcon="format-image"
                      allowReset={true}
                      resetFallbackValue={7}
                      withInputField={false}
                    />
                  </PanelBody>
                </InspectorControls>
              )}
          </Fragment>
        </>
      );
    };
  },
  "addRadiusSliderToNavigationLink"
);

addFilter(
  "editor.BlockEdit",
  "awp/group-advanced-control",
  addRadiusSliderToNavigationLink
);

Issue is here in below function

const applyRadiusSliderToNavigationLink = (
  extraProps,
  blockType,
  attributes
) => {
  if (
    blockType.name == "core/navigation-link" 
  ) {
    // Apply your class logic to navigation-list block
    const { borderRadius} = attributes;
    extraProps.className = classnames(extraProps.className, {
      "border-radius-": borderRadius,
    });
  }

  return extraProps;
};


addFilter(
  "blocks.getSaveContent.extraProps",
  "awp/group-apply-responsive-class",
  applyRadiusSliderToNavigationLink
);

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.