@brilo/base-blocks 0.1.40 → 0.1.42

package/src/blocks/career/career-benefits/constants.ts

@@ -0,0 +1,7 @@
+export const TITLE_STYLES = [
+  {value: 'h1', label: 'H1'},
+  {value: 'h2', label: 'H2'},
+  {value: 'h3', label: 'H3'},
+  {value: 'h4', label: 'H4'},
+  {value: 'h5', label: 'H5'},
+] as const

package/src/blocks/career/career-benefits/edit.tsx

@@ -0,0 +1,55 @@
+import {ColorPalette, InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {PanelBody, SelectControl, TextControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {TITLE_STYLES} from './constants'
+import type {CareerBenefitsAttributes, CareerBenefitsOptions} from './types'
+
+export function createCareerBenefitsEdit(_options: CareerBenefitsOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: CareerBenefitsAttributes
+    setAttributes: (a: Partial<CareerBenefitsAttributes>) => void
+  }) {
+    const {title, titleColor, titleStyle} = attributes
+    const {paletteColors} = useTenantColorPalette()
+
+    const blockProps = useBlockProps({className: 'wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')} initialOpen>
+            <TextControl label={__('Titulek', 'brilo-blocks')} value={title} onChange={(value) => setAttributes({title: value})} />
+            <SelectControl
+              label={__('Styl titulku', 'brilo-blocks')}
+              value={titleStyle}
+              options={TITLE_STYLES.map((s): {value: string; label: string} => ({value: s.value, label: s.label}))}
+              onChange={(value) => setAttributes({titleStyle: value})}
+            />
+          </PanelBody>
+
+          <PanelBody title={__('Barvy', 'brilo-blocks')}>
+            <p>{__('Barva titulku', 'brilo-blocks')}</p>
+            <ColorPalette
+              colors={paletteColors}
+              value={titleColor || undefined}
+              onChange={(value) => setAttributes({titleColor: value ?? ''})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="components-placeholder">
+            <div className="components-placeholder__label">{__('Benefity kariéry', 'brilo-blocks')}</div>
+            <div className="components-placeholder__instructions">
+              {__('Zobrazí výpis benefitů aktuální pozice (taxonomie benefity).', 'brilo-blocks')}
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/career/career-benefits/factory.tsx

@@ -0,0 +1,26 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createCareerBenefitsEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {CareerBenefitsAttributes, CareerBenefitsOptions} from './types'
+
+export type {CareerBenefitsAttributes, CareerBenefitsOptions}
+
+export function createCareerBenefitsBlock(options: CareerBenefitsOptions): BlockConfiguration<CareerBenefitsAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Benefity kariéry', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'widgets',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      titleColor: {type: 'string', default: ''},
+      titleStyle: {type: 'string', default: 'h2'},
+    },
+    edit: createCareerBenefitsEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<CareerBenefitsAttributes>
+}

package/src/blocks/career/career-benefits/icon.tsx

@@ -0,0 +1,10 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 5.5L5 7.5L9 3.5" stroke="black" strokeWidth="1.2" fill="none" />
+    <path d="M3 10.5L5 12.5L9 8.5" stroke="black" strokeWidth="1.2" fill="none" />
+    <path d="M3 15.5L5 17.5L9 13.5" stroke="black" strokeWidth="1.2" fill="none" />
+    <line x1="11" y1="5" x2="18" y2="5" stroke="black" />
+    <line x1="11" y1="10" x2="18" y2="10" stroke="black" />
+    <line x1="11" y1="15" x2="18" y2="15" stroke="black" />
+  </svg>
+)

package/src/blocks/career/career-benefits/index.ts

@@ -0,0 +1,9 @@
+export type {CareerBenefitsAttributes, CareerBenefitsOptions} from './types'
+export {createCareerBenefitsBlock} from './factory'
+
+import type {CareerBenefitsOptions} from './types'
+
+export const careerBenefitsDefaults: CareerBenefitsOptions = {
+  name: 'brilo/career-benefits',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/career/career-benefits/types.ts

@@ -0,0 +1,9 @@
+import type {BriloBlockType} from '~/types'
+
+export interface CareerBenefitsAttributes extends Record<string, unknown> {
+  title: string
+  titleColor: string
+  titleStyle: string
+}
+
+export type CareerBenefitsOptions = BriloBlockType

package/src/blocks/career/career-header/constants.ts

@@ -1 +1,9 @@
 export const DEFAULT_ALLOWED_BLOCKS: string[] = ['brilo/button-group']
+
+export const TITLE_STYLES = [
+  {value: 'h1', label: 'H1'},
+  {value: 'h2', label: 'H2'},
+  {value: 'h3', label: 'H3'},
+  {value: 'h4', label: 'H4'},
+  {value: 'h5', label: 'H5'},
+] as const

package/src/blocks/career/career-header/edit.tsx

@@ -1,7 +1,8 @@
-import {InspectorControls, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
-import {PanelBody, ToggleControl} from '@wordpress/components'
+import {ColorPalette, InspectorControls, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {PanelBody, SelectControl, ToggleControl} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
-import {DEFAULT_ALLOWED_BLOCKS} from './constants'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {DEFAULT_ALLOWED_BLOCKS, TITLE_STYLES} from './constants'
 import type {CareerHeaderAttributes, CareerHeaderOptions} from './types'
 
 export function createCareerHeaderEdit(options: CareerHeaderOptions) {
@@ -12,7 +13,8 @@ export function createCareerHeaderEdit(options: CareerHeaderOptions) {
     attributes: CareerHeaderAttributes
     setAttributes: (a: Partial<CareerHeaderAttributes>) => void
   }) {
-    const {showExcerpt, showLocation, showSalary, showBenefits, showEmploymentType} = attributes
+    const {showExcerpt, showLocation, showSalary, showBenefits, showEmploymentType, titleColor, titleStyle} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const blockProps = useBlockProps({className: 'wp-block-section'})
     const innerBlocksProps = useInnerBlocksProps({}, {allowedBlocks: options.allowedBlocks ?? DEFAULT_ALLOWED_BLOCKS})
@@ -47,6 +49,21 @@ export function createCareerHeaderEdit(options: CareerHeaderOptions) {
               onChange={(value) => setAttributes({showEmploymentType: value})}
             />
           </PanelBody>
+
+          <PanelBody title={__('Titulek', 'brilo-blocks')}>
+            <SelectControl
+              label={__('Styl titulku', 'brilo-blocks')}
+              value={titleStyle}
+              options={TITLE_STYLES.map((s): {value: string; label: string} => ({value: s.value, label: s.label}))}
+              onChange={(value) => setAttributes({titleStyle: value})}
+            />
+            <p>{__('Barva titulku', 'brilo-blocks')}</p>
+            <ColorPalette
+              colors={paletteColors}
+              value={titleColor || undefined}
+              onChange={(value) => setAttributes({titleColor: value ?? ''})}
+            />
+          </PanelBody>
         </InspectorControls>
 
         <div {...blockProps}>

package/src/blocks/career/career-header/factory.tsx

@@ -22,6 +22,8 @@ export function createCareerHeaderBlock(options: CareerHeaderOptions): BlockConf
       showSalary: {type: 'boolean', default: true},
       showBenefits: {type: 'boolean', default: true},
       showEmploymentType: {type: 'boolean', default: true},
+      titleColor: {type: 'string', default: ''},
+      titleStyle: {type: 'string', default: 'h2'},
     },
     edit: createCareerHeaderEdit(options),
     save: () => <InnerBlocks.Content />,

package/src/blocks/career/career-header/types.ts

@@ -6,6 +6,8 @@ export interface CareerHeaderAttributes extends Record<string, unknown> {
   showSalary: boolean
   showBenefits: boolean
   showEmploymentType: boolean
+  titleColor: string
+  titleStyle: string
 }
 
 export type CareerHeaderOptions = BriloBlockType

package/src/blocks/core/basic-button/edit.tsx

@@ -26,7 +26,7 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
     attributes: BasicButtonAttributes
     setAttributes: (a: Partial<BasicButtonAttributes>) => void
   }) {
-    const {title, variant, outline, fullWidth, size, url, icon} = attributes
+    const {title, variant, outline, fullWidth, size, url, icon, iconOnly} = attributes
     const hasIcon = icon.type !== 'none' && (icon.src || icon.media?.id)
 
     const setIconBase = (attrs: {icon: import('~/types').Icon}) => {
@@ -39,6 +39,7 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
         `--size-${size}`,
         outline && '--outline',
         fullWidth !== 'false' && `--full-width-${fullWidth}`,
+        iconOnly && '--icon-only',
       ),
     })
 
@@ -107,15 +108,23 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
             />
             {hasIcon && (
               <>
-                <ToggleGroupControl
-                  isBlock
-                  label={__('Pozice', 'brilo-blocks')}
-                  value={icon.position}
-                  onChange={(v) => setAttributes({icon: {...icon, position: String(v) as 'before' | 'after'}})}
-                >
-                  <ToggleGroupControlOption value="before" label={__('Před', 'brilo-blocks')} />
-                  <ToggleGroupControlOption value="after" label={__('Za', 'brilo-blocks')} />
-                </ToggleGroupControl>
+                <ToggleControl
+                  label={__('Pouze ikona', 'brilo-blocks')}
+                  help={__('Skryje text tlačítka, zůstane jen ikona', 'brilo-blocks')}
+                  checked={iconOnly}
+                  onChange={(value) => setAttributes({iconOnly: value})}
+                />
+                {!iconOnly && (
+                  <ToggleGroupControl
+                    isBlock
+                    label={__('Pozice', 'brilo-blocks')}
+                    value={icon.position}
+                    onChange={(v) => setAttributes({icon: {...icon, position: String(v) as 'before' | 'after'}})}
+                  >
+                    <ToggleGroupControlOption value="before" label={__('Před', 'brilo-blocks')} />
+                    <ToggleGroupControlOption value="after" label={__('Za', 'brilo-blocks')} />
+                  </ToggleGroupControl>
+                )}
                 <RangeControl
                   label={__('Velikost (px)', 'brilo-blocks')}
                   value={icon.size}
@@ -135,14 +144,16 @@ export function createBasicButtonEdit(options: BasicButtonOptions) {
                 <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />
               </span>
             )}
-            <RichText
-              tagName="span"
-              className="i-button__label"
-              value={title}
-              onChange={(value) => setAttributes({title: value})}
-              placeholder={__('Text tlačítka...', 'brilo-blocks')}
-              allowedFormats={[]}
-            />
+            {(!iconOnly || !hasIcon) && (
+              <RichText
+                tagName="span"
+                className="i-button__label"
+                value={title}
+                onChange={(value) => setAttributes({title: value})}
+                placeholder={__('Text tlačítka...', 'brilo-blocks')}
+                allowedFormats={[]}
+              />
+            )}
             {hasIcon && icon.position === 'after' && (
               <span className="i-button__icon" style={iconPreviewStyle}>
                 <ItemIconPreview icon={icon as unknown as import('~/types').Icon} setAttributes={setIconBase} options={options} />

package/src/blocks/core/basic-button/factory.tsx

@@ -49,6 +49,7 @@ export function createBasicButtonBlock<
         type: 'object',
         default: {type: 'none', src: '', media: {}, position: 'after', size: 24},
       },
+      iconOnly: {type: 'boolean', default: false},
     },
     edit: createBasicButtonEdit(options as unknown as BasicButtonOptions),
     save: () => null,

package/src/blocks/core/basic-button/types.ts

@@ -25,6 +25,7 @@ export interface BasicButtonAttributes<
   fullWidth: TFullWidth
   size: TSize
   icon: LinkItemIcon
+  iconOnly: boolean
   url: {src: string; blank: boolean}
 }
 

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

@@ -0,0 +1,64 @@
+import * as blockEditor from '@wordpress/block-editor'
+import {ColorPalette, ContrastChecker} from '@wordpress/block-editor'
+import {BoxControl, PanelBody, __experimentalUnitControl as UnitControl} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import type {ComponentType} from 'react'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import type {BoxAttributes, BoxBorderRadius} from './types'
+
+// `__experimentalBorderRadiusControl` is a real runtime export of @wordpress/block-editor (see
+// packages/block-editor/src/components/border-radius-control) but isn't covered by the community
+// @types/wordpress__block-editor typings, so it's pulled off the namespace import and cast by hand.
+interface BorderRadiusControlProps {
+  values?: string | BoxBorderRadius
+  onChange: (next: string | BoxBorderRadius | undefined) => void
+}
+const BorderRadiusControl = (blockEditor as unknown as {__experimentalBorderRadiusControl: ComponentType<BorderRadiusControlProps>})
+  .__experimentalBorderRadiusControl
+
+interface BoxControlsProps {
+  attributes: BoxAttributes
+  setAttributes: (attrs: Partial<BoxAttributes>) => void
+}
+
+export function BoxControls({attributes, setAttributes}: BoxControlsProps) {
+  const {padding, margin, borderRadius, borderWidth, borderColor, background, textColor} = attributes
+  const {paletteColors, resolveHex} = useTenantColorPalette()
+
+  return (
+    <>
+      <PanelBody title={__('Rozestupy', 'brilo-blocks')}>
+        <BoxControl label={__('Padding', 'brilo-blocks')} values={padding} onChange={(next) => setAttributes({padding: next})} />
+        <BoxControl label={__('Margin', 'brilo-blocks')} values={margin} onChange={(next) => setAttributes({margin: next})} />
+      </PanelBody>
+
+      <PanelBody title={__('Ohraničení', 'brilo-blocks')}>
+        <UnitControl
+          label={__('Šířka okraje', 'brilo-blocks')}
+          value={borderWidth}
+          min={0}
+          onChange={(next) => setAttributes({borderWidth: (next as string) ?? ''})}
+        />
+        <p>{__('Barva okraje', 'brilo-blocks')}</p>
+        <ColorPalette
+          colors={paletteColors}
+          value={borderColor || undefined}
+          onChange={(value) => setAttributes({borderColor: value ?? ''})}
+        />
+        <BorderRadiusControl values={borderRadius} onChange={(next) => setAttributes({borderRadius: next ?? ''})} />
+      </PanelBody>
+
+      <PanelBody title={__('Barvy', 'brilo-blocks')}>
+        <p>{__('Pozadí', 'brilo-blocks')}</p>
+        <ColorPalette
+          colors={paletteColors}
+          value={background || undefined}
+          onChange={(value) => setAttributes({background: value ?? ''})}
+        />
+        <p>{__('Barva textu', 'brilo-blocks')}</p>
+        <ColorPalette colors={paletteColors} value={textColor || undefined} onChange={(value) => setAttributes({textColor: value ?? ''})} />
+        {!!background && !!textColor && <ContrastChecker backgroundColor={resolveHex(background)} textColor={resolveHex(textColor)} />}
+      </PanelBody>
+    </>
+  )
+}

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'