# betterdocs/4.9.5/react-src/gutenberg/util/border-shadow-control/index.js

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 495 lines.

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/border-shadow-control/index.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/gutenberg/util/border-shadow-control/index.js
- Modified: 2026-10-12T10:07:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/border-shadow-control/index.js#L10-L20`.

```javascript
/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;
const {
  ToggleControl,
  TextControl,
  Button,
  RangeControl,
  BaseControl,
  ButtonGroup,
  SelectControl,
  Dropdown,
} = wp.components;

/**
 * Internal dependencies
 */

import ColorControl from "../color-control";
import ResetControl from "../reset-control";
import ResponsiveDimensionsControl from "../dimensions-control-v2";
import { TypographyIcon } from "../icons";

export default function BorderShadowControl({
  resRequiredProps,
  controlName,
  noBorder,
  noShadow,
  noBdrHover,
  noShdowHover,
}) {
  const { setAttributes, attributes, objAttributes } = resRequiredProps;

  const {
    [`${controlName}borderStyle`]: borderStyle,
    [`${controlName}borderColor`]: borderColor,
    [`${controlName}shadowType`]: shadowType,
    [`${controlName}shadowColor`]: shadowColor,
    [`${controlName}hOffset`]: hOffset,
    [`${controlName}vOffset`]: vOffset,
    [`${controlName}blur`]: blur,
    [`${controlName}spread`]: spread,
    [`${controlName}hoverShadowColor`]: hoverShadowColor,
    [`${controlName}hoverHOffset`]: hoverHOffset,
    [`${controlName}hoverVOffset`]: hoverVOffset,
    [`${controlName}hoverBlur`]: hoverBlur,
    [`${controlName}hoverSpread`]: hoverSpread,
    [`${controlName}inset`]: inset,

    [`${controlName}BorderType`]: BorderType,
    [`${controlName}HborderStyle`]: HborderStyle,
    [`${controlName}HborderColor`]: HborderColor,

    [`${controlName}borderTransition`]: borderTransition,
    [`${controlName}radiusTransition`]: radiusTransition,
    [`${controlName}shadowTransition`]: shadowTransition,
  } = attributes;

  return (
    <>
      {noBorder !== true && (
        <>
          {!noBdrHover && (
            <BaseControl id="eb-infobox-border-hover-ptions">
              <ButtonGroup id="eb-infobox-border-hover-ptions">
                {[
                  { label: "Normal", value: "normal" },
                  { label: "Hover", value: "hover" },
                ].map(({ value, label }) => (
                  <Button
                    isLarge
                    isSecondary={BorderType !== value}
                    isPrimary={BorderType === value}
                    onClick={() =>
                      setAttributes({ [`${controlName}BorderType`]: value })
                    }
                  >
                    {label}
                  </Button>
                ))}
              </ButtonGroup>
            </BaseControl>
          )}

          {(BorderType === "normal" || noBdrHover) && (
            <>
              <SelectControl
                label={__("Border Style", "betterdocs")}
                value={borderStyle}
                options={[
                  { label: __("None", "betterdocs"), value: "none" },
                  { label: __("Dashed", "betterdocs"), value: "dashed" },
                  { label: __("Solid", "betterdocs"), value: "solid" },
                  { label: __("Dotted", "betterdocs"), value: "dotted" },
                  { label: __("Double", "betterdocs"), value: "double" },
                  { label: __("Groove", "betterdocs"), value: "groove" },
                  { label: __("Inset", "betterdocs"), value: "inset" },
                  { label: __("Outset", "betterdocs"), value: "outset" },
                  { label: __("Ridge", "betterdocs"), value: "ridge" },
                ]}
                onChange={(borderStyle) =>
                  setAttributes({
                    [`${controlName}borderStyle`]: borderStyle,
                  })
                }
              />

              {borderStyle !== "none" && (
                <>
                  <ColorControl
                    defaultColor={
                      (objAttributes[`${controlName}borderColor`] || {}).default
                    }
                    label={__("Border Color", "betterdocs")}
                    color={borderColor}
                    onChange={(borderColor) =>
                      setAttributes({
                        [`${controlName}borderColor`]: borderColor,
                      })
                    }
                  />

                  <ResponsiveDimensionsControl
                    resRequiredProps={resRequiredProps}
                    controlName={`${controlName}Bdr_`}
                    baseLabel="Border Width"
                  />
                </>
              )}

              <ResponsiveDimensionsControl
                forBorderRadius
                resRequiredProps={resRequiredProps}
                controlName={`${controlName}Rds_`}
                baseLabel="Border Radius"
              />
            </>
          )}

          {BorderType === "hover" && !noBdrHover && (
            <>
              <SelectControl
                label={__("Border Style", "betterdocs")}
                value={HborderStyle}
                options={[
                  { label: __("None", "betterdocs"), value: "none" },
                  { label: __("Dashed", "betterdocs"), value: "dashed" },
                  { label: __("Solid", "betterdocs"), value: "solid" },
                  { label: __("Dotted", "betterdocs"), value: "dotted" },
                  { label: __("Double", "betterdocs"), value: "double" },
                  { label: __("Groove", "betterdocs"), value: "groove" },
                  { label: __("Inset", "betterdocs"), value: "inset" },
                  { label: __("Outset", "betterdocs"), value: "outset" },
                  { label: __("Ridge", "betterdocs"), value: "ridge" },
                ]}
                onChange={(HborderStyle) =>
                  setAttributes({
                    [`${controlName}HborderStyle`]: HborderStyle,
                  })
                }
              />

              {HborderStyle !== "none" && (
                <>
                  <ColorControl
                    defaultColor={
                      (objAttributes[`${controlName}HborderColor`] || {})
                        .default
                    }
                    label={__("Border Color", "betterdocs")}
                    color={HborderColor}
                    onChange={(HborderColor) =>
                      setAttributes({
                        [`${controlName}HborderColor`]: HborderColor,
                      })
                    }
                  />

                  <ResponsiveDimensionsControl
                    resRequiredProps={resRequiredProps}
                    controlName={`${controlName}HBdr_`}
                    baseLabel="Border Width"
                  />

                  <RangeControl
                    label={__("Border Transition", "betterdocs")}
                    value={borderTransition}
                    onChange={(borderTransition) =>
                      setAttributes({
                        [`${controlName}borderTransition`]: borderTransition,
                      })
                    }
                    step={0.01}
                    min={0}
                    max={5}
                  />
                </>
              )}

              <ResponsiveDimensionsControl
                forBorderRadius
                resRequiredProps={resRequiredProps}
                controlName={`${controlName}HRds_`}
                baseLabel="Border Radius"
              />

              <RangeControl
                label={__("Border Radius Transition", "betterdocs")}
                value={radiusTransition}
                onChange={(radiusTransition) =>
                  setAttributes({
                    [`${controlName}radiusTransition`]: radiusTransition,
                  })
                }
                step={0.01}
                min={0}
                max={5}
              />
            </>
          )}
        </>
      )}

      {noShadow !== true && (
        <>
          <BaseControl label={__("Box Shadow", "betterdocs")} className="eb-typography-base">
            <Dropdown
              className="eb-typography-dropdown"
              contentClassName="my-popover-content-classname"
              position="bottom right"
              renderToggle={({ isOpen, onToggle }) => (
                <Button isSmall onClick={onToggle} aria-expanded={isOpen}>
                  <TypographyIcon />
                </Button>
              )}
              renderContent={() => (
                <>
                  <div
                    className="eb-panel-control"
                    style={{ minWidth: "230px", padding: "10px" }}
                  >
                    {!noShdowHover && (
                      <BaseControl id="eb-infobox-shadow-hover-ptions">
                        <ButtonGroup id="eb-infobox-shadow-hover-ptions">
                          {[
                            { label: "Normal", value: "normal" },
                            { label: "Hover", value: "hover" },
                          ].map(({ value, label }) => (
                            <Button
                              isLarge
                              isSecondary={shadowType !== value}
                              isPrimary={shadowType === value}
                              onClick={() =>
                                setAttributes({
                                  [`${controlName}shadowType`]: value,
                                })
                              }
                            >
                              {label}
                            </Button>
                          ))}
                        </ButtonGroup>
                      </BaseControl>
                    )}

                    <ToggleControl
                      label={__("Inset", "betterdocs")}
                      checked={inset}
                      onChange={() =>
                        setAttributes({ [`${controlName}inset`]: !inset })
                      }
                    />

                    {(shadowType === "normal" || noShdowHover) && (
                      <>
                        <ColorControl
                          defaultColor={
                            (objAttributes[`${controlName}shadowColor`] || {})
                              .default
                          }
                          label={__("Shadow Color", "betterdocs")}
                          color={shadowColor}
                          onChange={(shadowColor) =>
                            setAttributes({
                              [`${controlName}shadowColor`]: shadowColor,
                            })
                          }
                        />

                        <ResetControl
                          onReset={() =>
                            setAttributes({
                              [`${controlName}hOffset`]: undefined,
                            })
                          }
                        >
                          <RangeControl
                            label={__("Horizontal Offset", "betterdocs")}
                            value={hOffset}
                            onChange={(hOffset) =>
                              setAttributes({
                                [`${controlName}hOffset`]: hOffset,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>

                        <ResetControl
                          onReset={() =>
                            setAttributes({
                              [`${controlName}vOffset`]: undefined,
                            })
                          }
                        >
                          <RangeControl
                            label={__("Vertical Offset", "betterdocs")}
                            value={vOffset}
                            onChange={(vOffset) =>
                              setAttributes({
                                [`${controlName}vOffset`]: vOffset,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>

                        <ResetControl
                          onReset={() =>
                            setAttributes({ [`${controlName}blur`]: undefined })
                          }
                        >
                          <RangeControl
                            label={__("Shadow Blur", "betterdocs")}
                            value={blur}
                            onChange={(blur) =>
                              setAttributes({
                                [`${controlName}blur`]: blur,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>

                        <ResetControl
                          onReset={() =>
                            setAttributes({
                              [`${controlName}spread`]: undefined,
                            })
                          }
                        >
                          <RangeControl
                            label={__("Shadow Spread", "betterdocs")}
                            value={spread}
                            onChange={(spread) =>
                              setAttributes({
                                [`${controlName}spread`]: spread,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>
                      </>
                    )}

                    {shadowType === "hover" && !noShdowHover && (
                      <>
                        <ColorControl
                          defaultColor={
                            (
                              objAttributes[`${controlName}hoverShadowColor`] ||
                              {}
                            ).default
                          }
                          label={__("Hover Shadow Color", "betterdocs")}
                          color={hoverShadowColor}
                          onChange={(hoverShadowColor) =>
                            setAttributes({
                              [`${controlName}hoverShadowColor`]:
                                hoverShadowColor,
                            })
                          }
                        />

                        <ResetControl
                          onReset={() =>
                            setAttributes({
                              [`${controlName}hoverHOffset`]: undefined,
                            })
                          }
                        >
                          <RangeControl
                            label={__("Horizontal Offset", "betterdocs")}
                            value={hoverHOffset}
                            onChange={(hoverHOffset) =>
                              setAttributes({
                                [`${controlName}hoverHOffset`]: hoverHOffset,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>

                        <ResetControl
                          onReset={() =>
                            setAttributes({
                              [`${controlName}hoverVOffset`]: undefined,
                            })
                          }
                        >
                          <RangeControl
                            label={__("Vertical Offset", "betterdocs")}
                            value={hoverVOffset}
                            onChange={(hoverVOffset) =>
                              setAttributes({
                                [`${controlName}hoverVOffset`]: hoverVOffset,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>

                        <ResetControl
                          onReset={() =>
                            setAttributes({
                              [`${controlName}hoverBlur`]: undefined,
                            })
                          }
                        >
                          <RangeControl
                            label={__("Shadow Blur", "betterdocs")}
                            value={hoverBlur}
                            onChange={(hoverBlur) =>
                              setAttributes({
                                [`${controlName}hoverBlur`]: hoverBlur,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>

                        <ResetControl
                          onReset={() =>
                            setAttributes({
                              [`${controlName}hoverSpread`]: undefined,
                            })
                          }
                        >
                          <RangeControl
                            label={__("Shadow Spread", "betterdocs")}
                            value={hoverSpread}
                            onChange={(hoverSpread) =>
                              setAttributes({
                                [`${controlName}hoverSpread`]: hoverSpread,
                              })
                            }
                            min={0}
                            max={200}
                          />
                        </ResetControl>

                        <RangeControl
                          label={__("Shadow Transition", "betterdocs")}
                          value={shadowTransition}
                          onChange={(shadowTransition) =>
                            setAttributes({
                              [`${controlName}shadowTransition`]:
                                shadowTransition,
                            })
                          }
                          step={0.01}
                          min={0}
                          max={5}
                        />
                      </>
                    )}
                  </div>
                </>
              )}
            />
          </BaseControl>
        </>
      )}
    </>
  );
}

```