@brilo/base-blocks 0.1.37 → 0.1.39

package/src/blocks/form/form-group/editor.scss

@@ -1,41 +1,54 @@
 .g-form {
   width: 100%;
+}
 
-  &__fields {
-    display: grid;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    gap: 16px;
-    padding: 16px;
-    padding-bottom: 56px;
-    outline: 1px dashed #ddd;
+.g-form__fields {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 16px;
+  padding: 16px;
+  padding-bottom: 56px;
+  outline: 1px dashed #ddd;
+}
 
-    > * {
-      max-width: 100%;
-    }
-  }
+.g-form__fields > * {
+  max-width: 100%;
+}
 
-  &__gdpr {
-    margin-top: 16px;
-    padding: 16px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: #fff;
-  }
+.g-form__gdpr {
+  margin-top: 16px;
+  padding: 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+}
 
-  &__gdpr-header {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 12px;
-  }
+.g-form__gdpr-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.g-form__gdpr-content {
+  min-height: 56px;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+}
 
-  &__gdpr-content {
-    min-height: 56px;
-    padding: 10px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: #fff;
-  }
+// Rendered inside InspectorControls, not inside the block content area itself.
+.g-form__gtm-preview {
+  max-width: 100%;
+  padding: 8px;
+  overflow-x: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #f0f0f0;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-word;
 }

package/src/blocks/form/form-group/factory.tsx

@@ -29,6 +29,8 @@ export function createFormGroupBlock(options: FormGroupOptions): BlockConfigurat
       submit: {type: 'object', default: {label: 'Odeslat'}},
       gdpr: {type: 'object', default: {content: '', checkbox: true}},
       successMessage: {type: 'string', default: 'Formulář byl úspěšně odeslán.'},
+      gtmEnabled: {type: 'boolean', default: false},
+      gtmEventName: {type: 'string', default: ''},
     },
     edit: createFormGroupEdit(options),
     save: () => <InnerBlocks.Content />,

package/src/blocks/form/form-group/types.ts

@@ -18,6 +18,8 @@ export interface FormGroupAttributes extends Record<string, unknown> {
   submit: {label: string}
   gdpr: {content: string; checkbox: boolean}
   successMessage: string
+  gtmEnabled: boolean
+  gtmEventName: string
 }
 
 export interface FormGroupOptions extends BriloBlockType {}

package/src/blocks/post/post-content/index.ts

@@ -5,4 +5,5 @@ import type {PostContentOptions} from './types'
 
 export const postContentDefaults: PostContentOptions = {
   name: 'brilo/post-content',
+  parent: ['brilo/base-section'],
 }

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

@@ -289,7 +289,11 @@ function BackgroundImageControl({value, onChange}: BackgroundImageControlProps)
             onChange={(next) => update({position: next as BackgroundImagePosition})}
           />
 
-          <BaseControl label={__('Překryv barvou', 'brilo-blocks')} __nextHasNoMarginBottom help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}>
+          <BaseControl
+            label={__('Překryv barvou', 'brilo-blocks')}
+            __nextHasNoMarginBottom
+            help={__('Ztmavení/zabarvení obrázku pro lepší čitelnost textu.', 'brilo-blocks')}
+          >
             <ColorPalette
               colors={paletteColors}
               value={overlayColor || undefined}

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

@@ -26,7 +26,9 @@ export function createBaseSectionEdit<TExtra extends Record<string, unknown> = R
           ? {
               backgroundImage: [tintLayer, `url(${bgImageSrc})`].filter(Boolean).join(', '),
               backgroundSize: [tintLayer ? '100% 100%' : null, backgroundImage?.fit ?? 'cover'].filter(Boolean).join(', '),
-              backgroundPosition: [tintLayer ? 'center center' : null, backgroundImage?.position ?? 'center center'].filter(Boolean).join(', '),
+              backgroundPosition: [tintLayer ? 'center center' : null, backgroundImage?.position ?? 'center center']
+                .filter(Boolean)
+                .join(', '),
               backgroundRepeat: 'no-repeat',
               padding: '16px',
             }

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

@@ -34,9 +34,15 @@ export interface Decoration {
 export type BackgroundImageFit = 'cover' | 'contain'
 
 export type BackgroundImagePosition =
-  | 'left top' | 'center top' | 'right top'
-  | 'left center' | 'center center' | 'right center'
-  | 'left bottom' | 'center bottom' | 'right bottom'
+  | 'left top'
+  | 'center top'
+  | 'right top'
+  | 'left center'
+  | 'center center'
+  | 'right center'
+  | 'left bottom'
+  | 'center bottom'
+  | 'right bottom'
 
 export interface BackgroundImageOverlay {
   color?: string

package/src/components/Document/DocumentTermSelectModal.tsx

@@ -0,0 +1,60 @@
+import type {View} from '@wordpress/dataviews/wp'
+import {__} from '@wordpress/i18n'
+import {createEntitySelectModal} from '~/components/Event/EntitySelectModal'
+
+type DocumentCategoryRecord = {
+  id: number
+  name: string
+  slug: string
+  count?: number
+}
+
+const DEFAULT_VIEW: View = {
+  type: 'table',
+  search: '',
+  filters: [],
+  page: 1,
+  perPage: 20,
+  sort: {field: 'name', direction: 'asc'},
+  fields: ['slug', 'count'],
+  titleField: 'name',
+}
+
+/**
+ * Manual document_category picker (table view, search, sort, checkbox
+ * selection, reorderable selection list) with name/slug/count columns. See
+ * `EntitySelectModal` for the shared DataViews wiring.
+ */
+export const DocumentTermSelectModal = createEntitySelectModal<DocumentCategoryRecord>({
+  endpoint: '/wp/v2/document_category?per_page=100&orderby=name&order=asc&_fields=id,name,slug,count',
+  defaultView: DEFAULT_VIEW,
+  buttonLabel: __('Vybrat kategorie', 'brilo-blocks'),
+  modalTitle: __('Vybrat kategorie', 'brilo-blocks'),
+  emptyLabel: __('Nevybrány žádné kategorie.', 'brilo-blocks'),
+  getItemLabel: (item) => item.name,
+  matchesSearch: (item, needle) => item.name.toLowerCase().includes(needle) || item.slug.toLowerCase().includes(needle),
+  sortValue: (item, field) => (item as Record<string, unknown>)[field] as string | number,
+  fields: [
+    {
+      id: 'name',
+      label: __('Název', 'brilo-blocks'),
+      enableHiding: false,
+      enableSorting: true,
+      render: ({item}: {item: DocumentCategoryRecord}) => item.name || __('(bez názvu)', 'brilo-blocks'),
+    },
+    {
+      id: 'slug',
+      label: __('Slug', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: DocumentCategoryRecord}) => item.slug || '—',
+    },
+    {
+      id: 'count',
+      label: __('Počet', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: DocumentCategoryRecord}) => (undefined !== item.count ? String(item.count) : '—'),
+    },
+  ],
+})
+
+export const DocumentTermSelect = DocumentTermSelectModal

package/src/components/Post/PostSelectModal.tsx

@@ -0,0 +1,51 @@
+import type {View} from '@wordpress/dataviews/wp'
+import {__} from '@wordpress/i18n'
+import {createEntitySelectModal} from '~/components/Event/EntitySelectModal'
+
+type PostRecord = {
+  id: number
+  title: {rendered: string}
+  date: string
+}
+
+const DEFAULT_VIEW: View = {
+  type: 'table',
+  search: '',
+  filters: [],
+  page: 1,
+  perPage: 20,
+  sort: {field: 'title', direction: 'asc'},
+  fields: ['date'],
+  titleField: 'title',
+}
+
+/**
+ * Manual post picker (table view, search, sort, checkbox selection,
+ * reorderable selection list) with title/date columns. See `EntitySelectModal`
+ * for the shared DataViews wiring.
+ */
+export const PostSelectModal = createEntitySelectModal<PostRecord>({
+  endpoint: '/wp/v2/posts?per_page=100&orderby=title&order=asc&_fields=id,title,date',
+  defaultView: DEFAULT_VIEW,
+  buttonLabel: __('Vybrat příspěvky', 'brilo-blocks'),
+  modalTitle: __('Vybrat příspěvky', 'brilo-blocks'),
+  emptyLabel: __('Nevybrány žádné příspěvky.', 'brilo-blocks'),
+  getItemLabel: (item) => item.title.rendered,
+  matchesSearch: (item, needle) => item.title.rendered.toLowerCase().includes(needle),
+  sortValue: (item, field) => ('title' === field ? item.title.rendered : ((item as never)[field] ?? '')),
+  fields: [
+    {
+      id: 'title',
+      label: __('Název', 'brilo-blocks'),
+      enableHiding: false,
+      enableSorting: true,
+      render: ({item}: {item: PostRecord}) => item.title.rendered || __('(bez názvu)', 'brilo-blocks'),
+    },
+    {
+      id: 'date',
+      label: __('Datum', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: PostRecord}) => (item.date ? new Date(item.date).toLocaleDateString() : '—'),
+    },
+  ],
+})

package/src/components/Post/PostTermSelectModal.tsx

@@ -0,0 +1,60 @@
+import type {View} from '@wordpress/dataviews/wp'
+import {__} from '@wordpress/i18n'
+import {createEntitySelectModal} from '~/components/Event/EntitySelectModal'
+
+type PostCategoryRecord = {
+  id: number
+  name: string
+  slug: string
+  count?: number
+}
+
+const DEFAULT_VIEW: View = {
+  type: 'table',
+  search: '',
+  filters: [],
+  page: 1,
+  perPage: 20,
+  sort: {field: 'name', direction: 'asc'},
+  fields: ['slug', 'count'],
+  titleField: 'name',
+}
+
+/**
+ * Manual post category picker (table view, search, sort, checkbox
+ * selection, reorderable selection list) with name/slug/count columns. See
+ * `EntitySelectModal` for the shared DataViews wiring.
+ */
+export const PostTermSelectModal = createEntitySelectModal<PostCategoryRecord>({
+  endpoint: '/wp/v2/categories?per_page=100&orderby=name&order=asc&_fields=id,name,slug,count',
+  defaultView: DEFAULT_VIEW,
+  buttonLabel: __('Vybrat kategorie', 'brilo-blocks'),
+  modalTitle: __('Vybrat kategorie', 'brilo-blocks'),
+  emptyLabel: __('Nevybrány žádné kategorie.', 'brilo-blocks'),
+  getItemLabel: (item) => item.name,
+  matchesSearch: (item, needle) => item.name.toLowerCase().includes(needle) || item.slug.toLowerCase().includes(needle),
+  sortValue: (item, field) => (item as Record<string, unknown>)[field] as string | number,
+  fields: [
+    {
+      id: 'name',
+      label: __('Název', 'brilo-blocks'),
+      enableHiding: false,
+      enableSorting: true,
+      render: ({item}: {item: PostCategoryRecord}) => item.name || __('(bez názvu)', 'brilo-blocks'),
+    },
+    {
+      id: 'slug',
+      label: __('Slug', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: PostCategoryRecord}) => item.slug || '—',
+    },
+    {
+      id: 'count',
+      label: __('Počet', 'brilo-blocks'),
+      enableSorting: true,
+      render: ({item}: {item: PostCategoryRecord}) => (undefined !== item.count ? String(item.count) : '—'),
+    },
+  ],
+})
+
+export const PostTermSelect = PostTermSelectModal

package/src/index.ts

@@ -150,6 +150,8 @@ export type {PostSliderGroupAttributes, PostSliderGroupOptions} from './blocks/p
 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 {PostSelectModal} from './components/Post/PostSelectModal'
+export {PostTermSelectModal} from './components/Post/PostTermSelectModal'
 export type {
   DocumentsGridAttributes,
   DocumentsGridOptions,
@@ -157,7 +159,12 @@ export type {
   DocumentsGridMode,
   DocumentsGridSortBy,
 } from './blocks/document/documents-grid'
-export {createDocumentsGridBlock, documentsGridDefaults, DocumentsSelectModal} from './blocks/document/documents-grid'
+export {
+  createDocumentsGridBlock,
+  documentsGridDefaults,
+  DocumentsSelectModal,
+  DocumentTermSelectModal,
+} from './blocks/document/documents-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'