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

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

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/background-control/index.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/gutenberg/util/background-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/background-control/index.js#L10-L20`.

```javascript
/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;
const { ToggleControl } = wp.components;

/**
 * Internal dependencies
 */
import OverlayControl from "./overlayControl";
import BgControl from "./bgControl";

export default function BackgroundControl({
  resRequiredProps,
  controlName,
  noOverlay = false,
  noMainBgi = false,
  noOverlayBgi = false,
  noTransition = false,

  // 
   forButton = false,
}) {
  const { setAttributes, attributes } = resRequiredProps;

  const { [`${controlName}isBgOverlay`]: isBgOverlay } = attributes;

  return (
    <>
      <BgControl
        resRequiredProps={resRequiredProps}
        controlName={controlName}
        noMainBgi={forButton === true ? true : noMainBgi}
        noTransition={noTransition}
      />

      {noOverlay === false && forButton == false && (
        <>
          <hr />

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

          {isBgOverlay && (
            <OverlayControl
              resRequiredProps={resRequiredProps}
              controlName={controlName}
              noOverlayBgi={noOverlayBgi}
              noTransition={noTransition}
            />
          )}
        </>
      )}
    </>
  );
}

```