@brilo/base-blocks 0.1.22 → 0.1.24

package/src/blocks/layout/layout-content-w-aside/editor.scss

@@ -0,0 +1,35 @@
+@layer base {
+  .l-content-w-aside {
+    padding: 16px;
+    border: 2px dashed #0073aa;
+    flex-shrink: 0;
+
+    &__container {
+      display: flex;
+      gap: 16px;
+
+      &.--aside-small {
+        --aside-width: 15%;
+      }
+
+      &.--aside-medium {
+        --aside-width: 25%;
+      }
+
+      &.--aside-large {
+        --aside-width: 35%;
+      }
+    }
+
+    &::before {
+      content: "Obsah s postranním panelem";
+      display: block;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #0073aa;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+  }
+}

package/src/blocks/layout/layout-content-w-aside/factory.tsx

@@ -0,0 +1,34 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import React from 'react'
+import type {OptionArray} from '~/types'
+import {ASIDE_SIZES} from './constants'
+import {createContentWithAsideEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {ContentWithAsideAttributes, ContentWithAsideOptions} from './types'
+
+export function createContentWithAsideBlock<
+  TAsideSizes extends OptionArray = typeof ASIDE_SIZES,
+>(
+  options: ContentWithAsideOptions<TAsideSizes>,
+): BlockConfiguration<ContentWithAsideAttributes<TAsideSizes[number]['value']>> {
+  const asideSizes = options.asideSizes ?? ASIDE_SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Obsah s postranním panelem', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      asideSize: {
+        type: 'string',
+        default: asideSizes[1].value, // medium
+      },
+    },
+    edit: createContentWithAsideEdit(options as unknown as ContentWithAsideOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<ContentWithAsideAttributes<TAsideSizes[number]['value']>>
+}

package/src/blocks/layout/layout-content-w-aside/icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4H20V20H4V4ZM6 6H13V18H6V6ZM15 6H18V18H15V6Z"
+      fill="currentColor"
+    />
+  </svg>
+)

package/src/blocks/layout/layout-content-w-aside/index.ts

@@ -0,0 +1,13 @@
+export type {ContentWithAsideAttributes, ContentWithAsideOptions} from './types'
+export {createContentWithAsideBlock} from './factory'
+
+import type {ContentWithAsideOptions} from './types'
+
+export const contentWithAsideDefaults: ContentWithAsideOptions = {
+  name: 'brilo/layout-content-w-aside',
+  allowedBlocks: ['brilo/layout-content', 'brilo/layout-aside'],
+  template: [
+    ['brilo/layout-content', {}],
+    ['brilo/layout-aside', {}],
+  ],
+}

package/src/blocks/layout/layout-content-w-aside/types.ts

@@ -0,0 +1,12 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {ASIDE_SIZES} from './constants'
+
+export type AsideSize = (typeof ASIDE_SIZES)[number]['value']
+
+export interface ContentWithAsideAttributes<TAsideSize extends string = AsideSize> extends Record<string, unknown> {
+  asideSize: TAsideSize
+}
+
+export interface ContentWithAsideOptions<TAsideSizes extends OptionArray = typeof ASIDE_SIZES> extends BriloBlockType {
+  asideSizes?: TAsideSizes
+}

package/src/blocks/post/posts-grid/constants.ts

@@ -0,0 +1,3 @@
+export const POSTS_PER_PAGE_MIN = 1
+export const POSTS_PER_PAGE_MAX = 12
+export const POSTS_PER_PAGE_DEFAULT = 6

package/src/blocks/post/posts-grid/edit.tsx

@@ -0,0 +1,105 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  RangeControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {POSTS_PER_PAGE_DEFAULT, POSTS_PER_PAGE_MAX, POSTS_PER_PAGE_MIN} from './constants'
+import type {PostsGridAttributes, PostsGridOptions} from './types'
+
+export function createPostsGridEdit(options: PostsGridOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PostsGridAttributes
+    setAttributes: (a: Partial<PostsGridAttributes>) => void
+  }) {
+    const {mode, postsPerPage, selectedPosts, selectedCategories, showImage, showCategory, showDate, showExcerpt, showAuthor} = attributes
+
+    const blockProps = useBlockProps({className: 'wp-block-section'})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení výpisu', 'brilo-blocks')} initialOpen>
+            <ToggleGroupControl
+              label={__('Režim výběru', 'brilo-blocks')}
+              value={mode}
+              onChange={(value) => setAttributes({mode: value as PostsGridAttributes['mode']})}
+              isBlock
+            >
+              <ToggleGroupControlOption value="manual" label={__('Ruční výběr', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="category" label={__('Dle kategorie', 'brilo-blocks')} />
+              <ToggleGroupControlOption value="latest" label={__('Nejnovější', 'brilo-blocks')} />
+            </ToggleGroupControl>
+
+            {mode !== 'manual' && (
+              <RangeControl
+                label={__('Počet příspěvků na stránku', 'brilo-blocks')}
+                value={postsPerPage}
+                onChange={(value) => setAttributes({postsPerPage: value ?? POSTS_PER_PAGE_DEFAULT})}
+                min={POSTS_PER_PAGE_MIN}
+                max={POSTS_PER_PAGE_MAX}
+              />
+            )}
+          </PanelBody>
+
+          <PanelBody title={__('Zobrazené údaje', 'brilo-blocks')} initialOpen={false}>
+            <ToggleControl
+              label={__('Zobrazit obrázek', 'brilo-blocks')}
+              checked={showImage}
+              onChange={(value) => setAttributes({showImage: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit kategorii', 'brilo-blocks')}
+              checked={showCategory}
+              onChange={(value) => setAttributes({showCategory: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit datum', 'brilo-blocks')}
+              checked={showDate}
+              onChange={(value) => setAttributes({showDate: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit perex', 'brilo-blocks')}
+              checked={showExcerpt}
+              onChange={(value) => setAttributes({showExcerpt: value})}
+            />
+            <ToggleControl
+              label={__('Zobrazit autora', 'brilo-blocks')}
+              checked={showAuthor}
+              onChange={(value) => setAttributes({showAuthor: value})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          {mode === 'category' &&
+            options.renderCategoryControl?.({
+              selectedItems: selectedCategories,
+              onChange: (ids: number[]) => setAttributes({selectedCategories: ids}),
+            })}
+
+          {mode === 'manual' &&
+            options.renderPostsControl?.({
+              selectedItems: selectedPosts,
+              onChange: (ids: number[]) => setAttributes({selectedPosts: ids}),
+            })}
+
+          {mode === 'latest' && (
+            <div className="components-placeholder">
+              <div className="components-placeholder__label">{__('Posts Grid', 'brilo-blocks')}</div>
+              <div className="components-placeholder__instructions">
+                {`${__('Zobrazí', 'brilo-blocks')} ${postsPerPage} ${__('nejnovějších příspěvků.', 'brilo-blocks')}`}
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/post/posts-grid/factory.tsx

@@ -0,0 +1,63 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {POSTS_PER_PAGE_DEFAULT} from './constants'
+import {createPostsGridEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PostsGridAttributes, PostsGridOptions} from './types'
+
+export type {PostsGridAttributes, PostsGridOptions}
+
+export function createPostsGridBlock(options: PostsGridOptions): BlockConfiguration<PostsGridAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Posts Grid', '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: {
+      mode: {
+        type: 'string',
+        default: 'latest',
+        enum: ['manual', 'category', 'latest'],
+      },
+      postsPerPage: {
+        type: 'number',
+        default: POSTS_PER_PAGE_DEFAULT,
+      },
+      selectedPosts: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+      selectedCategories: {
+        type: 'array',
+        default: [],
+        items: {type: 'number'},
+      },
+      showImage: {
+        type: 'boolean',
+        default: true,
+      },
+      showCategory: {
+        type: 'boolean',
+        default: true,
+      },
+      showDate: {
+        type: 'boolean',
+        default: true,
+      },
+      showExcerpt: {
+        type: 'boolean',
+        default: true,
+      },
+      showAuthor: {
+        type: 'boolean',
+        default: true,
+      },
+    },
+    edit: createPostsGridEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<PostsGridAttributes>
+}

package/src/blocks/post/posts-grid/icon.tsx

@@ -0,0 +1,8 @@
+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" y="1" width="8" height="8" stroke="black" fill="none" />
+    <rect x="11" y="1" width="8" height="8" stroke="black" fill="none" />
+    <rect x="1" y="11" width="8" height="8" stroke="black" fill="none" />
+    <rect x="11" y="11" width="8" height="8" stroke="black" fill="none" />
+  </svg>
+)

package/src/blocks/post/posts-grid/index.ts

@@ -0,0 +1,9 @@
+export type {PostsGridAttributes, PostsGridOptions} from './types'
+export {createPostsGridBlock} from './factory'
+
+import type {PostsGridOptions} from './types'
+
+export const postsGridDefaults: PostsGridOptions = {
+  name: 'brilo/posts-grid-group',
+  parent: ['brilo/base-section'],
+}

package/src/blocks/post/posts-grid/types.ts

@@ -0,0 +1,25 @@
+import type {BriloBlockType} from '~/types'
+
+export type PostsGridMode = 'manual' | 'category' | 'latest'
+
+export interface PostsGridAttributes extends Record<string, unknown> {
+  mode: PostsGridMode
+  postsPerPage: number
+  selectedPosts: number[]
+  selectedCategories: number[]
+  showImage: boolean
+  showCategory: boolean
+  showDate: boolean
+  showExcerpt: boolean
+  showAuthor: boolean
+}
+
+export interface SelectControlProps {
+  selectedItems: number[]
+  onChange: (ids: number[]) => void
+}
+
+export interface PostsGridOptions extends BriloBlockType {
+  renderCategoryControl?: (props: SelectControlProps) => JSX.Element
+  renderPostsControl?: (props: SelectControlProps) => JSX.Element
+}

package/src/blocks/sections/base-section/attributes.ts

@@ -18,4 +18,8 @@ export const baseAttributes = {
     type: 'string',
     default: '',
   },
+  decorations: {
+    type: 'object',
+    default: {},
+  },
 } as const

package/src/blocks/sections/base-section/constants.ts

@@ -8,3 +8,13 @@ export const SPACING_POSITIONS = [
 ] as const
 
 export const SPACING_SIZES = ['default', 'sm', 'xs'] as const
+
+export const FLUID_DECORATION_HEIGHT_PRESETS = [32, 56, 88, 128] as const
+
+export const FLUID_DECORATION_DEFAULT_HEIGHT = '56px'
+
+export const FLUID_DECORATION_UNITS = [
+  {value: 'px', label: 'px', default: 56},
+  {value: 'rem', label: 'rem', default: 3.5},
+  {value: '%', label: '%', default: 10},
+]

package/src/blocks/sections/base-section/controls.tsx

@@ -1,15 +1,81 @@
-import {ColorPalette, ContrastChecker} from '@wordpress/block-editor'
+import {ColorPalette, ContrastChecker, MediaUpload, MediaUploadCheck} from '@wordpress/block-editor'
 import {
+  BaseControl,
+  Button,
+  ButtonGroup,
   PanelBody,
+  PanelRow,
   SelectControl,
   TextControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  __experimentalUnitControl as UnitControl,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
-import type {BaseBlockAttributes, ExcludableBaseAttr} from './types'
-import {SPACING_POSITIONS, SPACING_SIZES} from './constants'
+import type {BaseBlockAttributes, ExcludableBaseAttr, FluidDecoration, FluidDecorationImage} from './types'
+import {FLUID_DECORATION_DEFAULT_HEIGHT, FLUID_DECORATION_HEIGHT_PRESETS, FLUID_DECORATION_UNITS, SPACING_POSITIONS, SPACING_SIZES} from './constants'
+
+interface FluidDecorationControlProps {
+  label: string
+  value?: FluidDecoration
+  onChange: (value: FluidDecoration | undefined) => void
+}
+
+function FluidDecorationControl({label, value, onChange}: FluidDecorationControlProps) {
+  const img = value?.img
+  const height = value?.height ?? FLUID_DECORATION_DEFAULT_HEIGHT
+
+  const handleSelect = (media: {id: number; url: string; alt: string; width?: number; height?: number}) => {
+    const nextImg: FluidDecorationImage = {id: media.id, src: media.url, alt: media.alt ?? '', width: media.width, height: media.height}
+    onChange({img: nextImg, height})
+  }
+
+  const handleRemove = () => onChange(undefined)
+
+  return (
+    <BaseControl label={label} __nextHasNoMarginBottom>
+      <MediaUploadCheck>
+        <MediaUpload
+          onSelect={handleSelect}
+          allowedTypes={['image']}
+          value={img?.id || 0}
+          render={({open}: {open: () => void}) => (
+            <PanelRow>
+              {img?.src && <img src={img.src} alt={img.alt} style={{maxWidth: 48, maxHeight: 48, objectFit: 'contain'}} />}
+              <Button onClick={open} variant="secondary" size="small">
+                {img?.src ? __('Změnit', 'brilo-blocks') : __('Vybrat obrázek', 'brilo-blocks')}
+              </Button>
+              {!!img?.src && (
+                <Button onClick={handleRemove} variant="tertiary" size="small" isDestructive>
+                  {__('Odebrat', 'brilo-blocks')}
+                </Button>
+              )}
+            </PanelRow>
+          )}
+        />
+      </MediaUploadCheck>
+
+      {!!img?.src && (
+        <>
+          <UnitControl
+            label={__('Výška', 'brilo-blocks')}
+            value={height}
+            units={FLUID_DECORATION_UNITS}
+            onChange={(next) => onChange({img, height: (next as string) ?? FLUID_DECORATION_DEFAULT_HEIGHT})}
+          />
+          <ButtonGroup>
+            {FLUID_DECORATION_HEIGHT_PRESETS.map((preset) => (
+              <Button key={preset} variant="secondary" size="small" onClick={() => onChange({img, height: `${preset}px`})}>
+                {preset}
+              </Button>
+            ))}
+          </ButtonGroup>
+        </>
+      )}
+    </BaseControl>
+  )
+}
 
 type SpacingPosition = BaseBlockAttributes['spacing']['position']
 type SpacingSize = BaseBlockAttributes['spacing']['size']
@@ -21,8 +87,14 @@ interface BaseControlsProps {
 }
 
 export function BaseControls({attributes, setAttributes, exclude}: BaseControlsProps) {
-  const {id, spacing, background, textColor} = attributes
+  const {id, spacing, background, textColor, decorations} = attributes
   const {paletteColors, resolveHex} = useTenantColorPalette()
+  const fluid = decorations?.fluid ?? {}
+
+  const setFluid = (position: 'top' | 'bottom', value: FluidDecoration | undefined) => {
+    const nextFluid = {...fluid, [position]: value}
+    setAttributes({decorations: {...decorations, fluid: nextFluid}})
+  }
 
   return (
     <>
@@ -65,6 +137,13 @@ export function BaseControls({attributes, setAttributes, exclude}: BaseControlsP
         </PanelBody>
       )}
 
+      {!exclude.includes('decorations') && (
+        <PanelBody title={__('Fluidní dekorace', 'brilo-blocks')} initialOpen={false}>
+          <FluidDecorationControl label={__('Nahoře', 'brilo-blocks')} value={fluid.top} onChange={(value) => setFluid('top', value)} />
+          <FluidDecorationControl label={__('Dole', 'brilo-blocks')} value={fluid.bottom} onChange={(value) => setFluid('bottom', value)} />
+        </PanelBody>
+      )}
+
       {!exclude.includes('id') && (
         <PanelBody title={__('Kotva', 'brilo-blocks')} initialOpen={false}>
           <TextControl

package/src/blocks/sections/base-section/types.ts

@@ -2,6 +2,19 @@ import type {BlockConfiguration, BlockEditProps} from '@wordpress/blocks'
 import type {ReactNode} from 'react'
 import type {BriloBlockType} from '~/types'
 
+export interface FluidDecorationImage {
+  id: number
+  src: string
+  alt: string
+  width?: number
+  height?: number
+}
+
+export interface FluidDecoration {
+  img?: FluidDecorationImage
+  height: string
+}
+
 export interface BaseBlockAttributes extends Record<string, unknown> {
   id: string
   spacing: {
@@ -10,9 +23,15 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
   }
   background: string
   textColor: string
+  decorations: {
+    fluid?: {
+      top?: FluidDecoration
+      bottom?: FluidDecoration
+    }
+  }
 }
 
-export type ExcludableBaseAttr = 'spacing' | 'background' | 'id'
+export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations'
 
 export interface BaseSectionOptions<TExtra extends Record<string, unknown> = Record<string, never>> extends BriloBlockType {
   supports?: BlockConfiguration['supports']

package/src/editor.scss

@@ -1,4 +1,6 @@
 @forward "./globals";
+@forward "./blocks/anchor/anchor-group/editor";
+@forward "./blocks/anchor/anchor-item/editor";
 @forward "./blocks/column/column-group/editor";
 @forward "./blocks/link/link-item/editor";
 @forward "./blocks/column/column-item/editor";
@@ -35,6 +37,9 @@
 @forward "./blocks/person/person-group/editor";
 @forward "./blocks/person/person-item/editor";
 @forward "./blocks/responsive-grid/responsive-grid-item/editor";
+@forward "./blocks/layout/layout-aside/editor";
+@forward "./blocks/layout/layout-content/editor";
+@forward "./blocks/layout/layout-content-w-aside/editor";
 @forward "./components/IconControl/editor";
 @forward "./components/ImagePicker/editor";
 @forward "./components/ItemIconControl/editor";

package/src/index.ts

@@ -1,3 +1,14 @@
+export type {AnchorAlignment, AnchorColumns, AnchorGroupAttributes, AnchorGroupOptions} from './blocks/anchor/anchor-group'
+export {ANCHOR_ALIGNMENTS, ANCHOR_COLUMNS, anchorGroupDefaults, createAnchorGroupBlock} from './blocks/anchor/anchor-group'
+export type {AnchorItemAttributes, AnchorItemOptions} from './blocks/anchor/anchor-item'
+export {
+  ANCHOR_ICON_SIZE_DEFAULT,
+  ANCHOR_ICON_SIZE_RANGE,
+  ANCHOR_ICON_TYPES,
+  anchorItemDefaults,
+  createAnchorItemBlock,
+  createAnchorItemEdit,
+} from './blocks/anchor/anchor-item'
 export type {
   ContactColumns,
   ContactGroupAttributes,
@@ -132,5 +143,13 @@ export type {ResponsiveGridItemAttributes, ResponsiveGridItemOptions} from './bl
 export {createResponsiveGridItemBlock, responsiveGridItemDefaults} from './blocks/responsive-grid/responsive-grid-item'
 export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './blocks/post/post-slider-group'
 export {createPostSliderGroupBlock, postSliderGroupDefaults} from './blocks/post/post-slider-group'
+export type {PostsGridAttributes, PostsGridOptions} from './blocks/post/posts-grid'
+export {createPostsGridBlock, postsGridDefaults} from './blocks/post/posts-grid'
 export type {LinkItemAttributes, LinkItemIcon, LinkItemOptions} from './blocks/link/link-item'
 export {createLinkItemBlock, linkItemDefaults} from './blocks/link/link-item'
+export type {ContentWithAsideAttributes, ContentWithAsideOptions} from './blocks/layout/layout-content-w-aside'
+export {createContentWithAsideBlock, contentWithAsideDefaults} from './blocks/layout/layout-content-w-aside'
+export type {ContentAttributes, ContentOptions} from './blocks/layout/layout-content'
+export {createContentBlock, contentDefaults} from './blocks/layout/layout-content'
+export type {AsideAttributes, AsideOptions} from './blocks/layout/layout-aside'
+export {createAsideBlock, asideDefaults} from './blocks/layout/layout-aside'