i have a custom guttenberg block that creates a grid of icon buttons using the package react-fa-icon-picker, it works fine if the user is a super-admin, but for editors and admins it doesn't work beacuse of the unfiltered_html capability that thay lack.

In my edit function i have this component to let the user choose an icon with the IconPicker component

<div {...blockProps}>
  <div className="button-wrapper__editor">
      onChange={(buttonIcon1) => setAttributes({ buttonIcon1 })}

      onChange={(buttonTitle1) => setAttributes({ buttonTitle1 })}

And on the save function i output the chosen icon with the IconPickerItem component

export default function save(props) {
    const blockProps = useBlockProps.save();

    return (
        <div {...blockProps}>
            <a className="icon-box" href={props.attributes.buttonLink1}>
                <IconPickerItem icon={props.attributes.buttonIcon1} />

                <RichText.Content tagName="h3" value={props.attributes.buttonTitle1} />

I want to avoid just granting this capability to these roles, because it seems to leave my site vulnerable as discussed in this thread

Is there another way to deal with this problem?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.