# sliderberg/1.2.3/shared/src/components/SpacingControlWithToolsPanel.tsx

Slider Block by Sliderberg – WordPress Slider & Carousel Plugin for Gutenberg, version 1.2.3. 52 lines.

- Page: https://pluginprobe.com/plugins/sliderberg/1.2.3/code/shared/src/components/SpacingControlWithToolsPanel.tsx
- Raw: https://pluginprobe.com/plugins/sliderberg/1.2.3/raw/shared/src/components/SpacingControlWithToolsPanel.tsx
- Modified: 2026-09-15T03:04:50+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/sliderberg/1.2.3/code/shared/src/components/SpacingControlWithToolsPanel.tsx#L10-L20`.

```tsx
/**
 * WordPress dependencies
 */
import React from "react";
import {
  useBlockEditContext,
  __experimentalSpacingSizesControl as SpacingSizesControl,
} from "@wordpress/block-editor";
import { useSelect, useDispatch } from "@wordpress/data";

/**
 * Internal dependencies
 */
import { SpacingControlWithToolsPanelProps } from "./types";

/**
 * Spacing control with ToolsPanel component
 * Provides spacing control wrapped in ToolsPanel for reset functionality
 */
const SpacingControlWithToolsPanel: React.FC<
  SpacingControlWithToolsPanelProps
> = ({ label, attrKey, minimumCustomValue = 0 }) => {
  const { clientId } = useBlockEditContext();

  const attributes = useSelect((select) =>
    select("core/block-editor").getBlockAttributes(clientId),
  ) as Record<string, any>;

  const { updateBlockAttributes } = useDispatch("core/block-editor") as any;

  const setAttributes = (newAttributes: Record<string, any>) => {
    updateBlockAttributes(clientId, newAttributes);
  };

  return (
    <SpacingSizesControl
      minimumCustomValue={minimumCustomValue}
      allowReset={true}
      label={label}
      values={attributes[attrKey]}
      sides={["top", "right", "bottom", "left"]}
      onChange={(newValue: any) => {
        setAttributes({
          [attrKey]: newValue,
        });
      }}
    />
  );
};

export default SpacingControlWithToolsPanel;

```