javascript - Extend WordPress Gutenberg corenavigation-link

admin管理员组

文章数量:1122832

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
);

本文标签： javascriptExtend WordPress Gutenberg corenavigationlink