@brilo/base-blocks 0.1.44 → 0.1.45

package/src/components/ItemSpacingControl/index.tsx

@@ -0,0 +1,59 @@
+import {PanelBody, RangeControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+
+export const ITEM_SPACING_MIN = 0
+export const ITEM_SPACING_MAX = 48
+export const ITEM_SPACING_STEP = 4
+
+const ITEM_SPACING_MARKS = [
+  {value: 0, label: '0'},
+  {value: 8, label: '8'},
+  {value: 16, label: '16'},
+  {value: 24, label: '24'},
+  {value: 32, label: '32'},
+  {value: 40, label: '40'},
+  {value: 48, label: '48'},
+]
+
+/**
+ * Shared `spacing` attribute for group blocks. Intentionally has no `default`,
+ * so an unset value means "keep the block's default gap-* class".
+ */
+export const ITEM_SPACING_ATTRIBUTE = {
+  spacing: {type: 'number'},
+} as const
+
+/**
+ * Editor container style fragment. Returns `undefined` when spacing is unset so
+ * the block keeps its default gap. Spread into an existing `containerStyle`.
+ */
+export function itemSpacingStyle(spacing: number | undefined): Record<string, string> | undefined {
+  return typeof spacing === 'number' ? {gap: `${spacing}px`} : undefined
+}
+
+export function ItemSpacingPanel({
+  spacing,
+  onChange,
+  initialOpen = false,
+}: {
+  spacing: number | undefined
+  onChange: (spacing: number | undefined) => void
+  initialOpen?: boolean
+}) {
+  return (
+    <PanelBody title={__('Mezery', 'brilo-blocks')} initialOpen={initialOpen}>
+      <RangeControl
+        label={__('Mezera mezi položkami (px)', 'brilo-blocks')}
+        help={__('Není-li nastaveno, použije se výchozí mezera bloku.', 'brilo-blocks')}
+        value={spacing}
+        onChange={onChange}
+        min={ITEM_SPACING_MIN}
+        max={ITEM_SPACING_MAX}
+        step={ITEM_SPACING_STEP}
+        marks={ITEM_SPACING_MARKS}
+        allowReset
+        withInputField
+      />
+    </PanelBody>
+  )
+}

package/src/editor.scss

@@ -35,6 +35,8 @@
 @forward "./blocks/text-and-form/text-and-form-text-column/editor";
 @forward "./blocks/usp/usp-group/editor";
 @forward "./blocks/usp/usp-item/editor";
+@forward "./blocks/list/list-group/editor";
+@forward "./blocks/list/list-item/editor";
 @forward "./blocks/person/person-group/editor";
 @forward "./blocks/person/person-item/editor";
 @forward "./blocks/event/event-calendar-group/editor";

package/src/index.ts

@@ -79,6 +79,10 @@ export type {UspGroupAttributes, UspGroupOptions} from './blocks/usp/usp-group'
 export {createUspGroupBlock, uspGroupDefaults} from './blocks/usp/usp-group'
 export type {UspItemAttributes, UspItemOptions} from './blocks/usp/usp-item'
 export {createUspItemBlock, uspItemDefaults} from './blocks/usp/usp-item'
+export type {ListContentSize, ListGroupAttributes, ListGroupOptions} from './blocks/list/list-group'
+export {createListGroupBlock, listGroupDefaults} from './blocks/list/list-group'
+export type {ListBulletShape, ListItemAttributes, ListItemOptions} from './blocks/list/list-item'
+export {createListItemBlock, listItemDefaults} from './blocks/list/list-item'
 export type {GalleryGroupAttributes, GalleryGroupOptions} from './blocks/gallery/gallery-group'
 export {createGalleryGroupBlock, galleryGroupDefaults} from './blocks/gallery/gallery-group'
 export type {GalleryItemAttributes, GalleryItemOptions} from './blocks/gallery/gallery-item'