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

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

- Page: https://pluginprobe.com/plugins/sliderberg/1.2.3/code/shared/src/components/SpacingControl.tsx
- Raw: https://pluginprobe.com/plugins/sliderberg/1.2.3/raw/shared/src/components/SpacingControl.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/SpacingControl.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 { SpacingControlProps } from "./types";

/**
 * Spacing control component
 * Provides control for padding/margin spacing
 */
const SpacingControl: React.FC<SpacingControlProps> = ({
  label,
  attrKey,
  minimumCustomValue = 0,
  sides = ["top", "right", "bottom", "left"],
}) => {
  const { clientId } = useBlockEditContext();

  const attributes = useSelect(
    (select) => select("core/block-editor").getSelectedBlock()?.attributes
  ) 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={sides}
        onChange={(newValue: any) => {
          setAttributes({
            [attrKey]: newValue,
          });
        }}
      />
    </>
  );
};

export default SpacingControl;

```