@brilo/base-blocks 0.1.39 → 0.1.41

package/src/blocks/layout/box/edit.tsx

@@ -0,0 +1,52 @@
+import {InspectorControls, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import type {BlockEditProps} from '@wordpress/blocks'
+import type {CSSProperties} from 'react'
+import {BoxControls} from './controls'
+import type {BoxAttributes, BoxOptions} from './types'
+
+export function createBoxEdit(options: BoxOptions) {
+  return function Edit({attributes, setAttributes}: BlockEditProps<BoxAttributes>) {
+    const {padding, margin, borderRadius, borderWidth, borderColor, background, textColor} = attributes
+
+    const style: CSSProperties = {
+      ...(padding?.top && {paddingTop: padding.top}),
+      ...(padding?.right && {paddingRight: padding.right}),
+      ...(padding?.bottom && {paddingBottom: padding.bottom}),
+      ...(padding?.left && {paddingLeft: padding.left}),
+      ...(margin?.top && {marginTop: margin.top}),
+      ...(margin?.right && {marginRight: margin.right}),
+      ...(margin?.bottom && {marginBottom: margin.bottom}),
+      ...(margin?.left && {marginLeft: margin.left}),
+      ...(typeof borderRadius === 'string' && borderRadius && {borderRadius}),
+      ...(typeof borderRadius === 'object' && borderRadius !== null
+        ? {
+            ...(borderRadius.topLeft && {borderTopLeftRadius: borderRadius.topLeft}),
+            ...(borderRadius.topRight && {borderTopRightRadius: borderRadius.topRight}),
+            ...(borderRadius.bottomLeft && {borderBottomLeftRadius: borderRadius.bottomLeft}),
+            ...(borderRadius.bottomRight && {borderBottomRightRadius: borderRadius.bottomRight}),
+          }
+        : {}),
+      ...(borderWidth && {borderWidth, borderStyle: 'solid' as CSSProperties['borderStyle']}),
+      ...(borderColor && {borderColor}),
+      ...(background && {backgroundColor: background}),
+      ...(textColor && {color: textColor}),
+    }
+
+    const blockProps = useBlockProps({className: options.blockClassName ?? 'g-box', style})
+    const innerBlocksProps = useInnerBlocksProps(
+      {className: options.containerClassName ?? 'g-box__inner'},
+      {allowedBlocks: options.allowedBlocks, template: options.template, templateLock: false},
+    )
+
+    return (
+      <>
+        <InspectorControls>
+          <BoxControls attributes={attributes} setAttributes={setAttributes} />
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/layout/box/factory.tsx

@@ -0,0 +1,31 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createBoxEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {BoxAttributes, BoxOptions} from './types'
+
+export function createBoxBlock(options: BoxOptions): BlockConfiguration<BoxAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Box', 'brilo-blocks'),
+    description:
+      options.description ??
+      __('Obecné pouzdro pro libovolný obsah s vlastním paddingem, marginem, ohraničením a barvami.', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      padding: {type: 'object', default: {}},
+      margin: {type: 'object', default: {}},
+      borderRadius: {type: ['string', 'object'], default: ''},
+      borderWidth: {type: 'string', default: ''},
+      borderColor: {type: 'string', default: ''},
+      background: {type: 'string', default: ''},
+      textColor: {type: 'string', default: ''},
+    },
+    edit: createBoxEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as BlockConfiguration<BoxAttributes>
+}

package/src/blocks/layout/box/icon.tsx

@@ -0,0 +1,5 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="17" height="17" rx="2" stroke="black" fill="none" />
+  </svg>
+)

package/src/blocks/layout/box/index.ts

@@ -0,0 +1,10 @@
+export type {BoxAttributes, BoxBorderRadius, BoxOptions, BoxSpacing} from './types'
+export {createBoxBlock} from './factory'
+
+import type {BoxOptions} from './types'
+
+export const boxDefaults: BoxOptions = {
+  name: 'brilo/box',
+  blockClassName: 'g-box',
+  containerClassName: 'g-box__inner',
+}

package/src/blocks/layout/box/types.ts

@@ -0,0 +1,27 @@
+import type {BriloBlockType} from '~/types'
+
+export interface BoxSpacing {
+  top?: string
+  right?: string
+  bottom?: string
+  left?: string
+}
+
+export interface BoxBorderRadius {
+  topLeft?: string
+  topRight?: string
+  bottomLeft?: string
+  bottomRight?: string
+}
+
+export interface BoxAttributes extends Record<string, unknown> {
+  padding: BoxSpacing
+  margin: BoxSpacing
+  borderRadius: string | BoxBorderRadius
+  borderWidth: string
+  borderColor: string
+  background: string
+  textColor: string
+}
+
+export interface BoxOptions extends BriloBlockType {}

package/src/index.ts

@@ -219,7 +219,11 @@ export type {
 export {createJobPositionGroupBlock, jobPositionGroupDefaults, JobPositionsSelectModal} from './blocks/career/job-position-group'
 export type {CareerHeaderAttributes, CareerHeaderOptions} from './blocks/career/career-header'
 export {createCareerHeaderBlock, careerHeaderDefaults} from './blocks/career/career-header'
+export type {CareerBenefitsAttributes, CareerBenefitsOptions} from './blocks/career/career-benefits'
+export {createCareerBenefitsBlock, careerBenefitsDefaults} from './blocks/career/career-benefits'
 export type {PostContentAttributes, PostContentOptions} from './blocks/post/post-content'
 export {createPostContentBlock, postContentDefaults} from './blocks/post/post-content'
 export type {ShareAttributes, ShareOptions} from './blocks/share/share'
 export {createShareBlock, shareDefaults} from './blocks/share/share'
+export type {BoxAttributes, BoxBorderRadius, BoxOptions, BoxSpacing} from './blocks/layout/box'
+export {createBoxBlock, boxDefaults} from './blocks/layout/box'