Documentazione · src/config/blocks

I blocchi

Quarantasette file: la superficie che vede chi scrive contenuto. Un blocco dichiara i propri campi, il proprio viewMode di default, e riceve gratis lo stato e gli stili.

Quattro livelli, e cosa può stare dentro cosa

I blocchi sono divisi per livello — atomi, molecole, organismi, contenitori — e la divisione non è tassonomia: dice cosa è annidabile. Atomi, molecole e organismi si possono mettere dentro un altro blocco; i contenitori e i blocchi di sezione no, perché sono loro a contenere.

Il registro completo è quello che finisce in config.blocks di Payload. Da lì in poi la lista dei tipi disponibili in un campo è una scelta di configurazione, non una modifica al motore.

blocks/tiers/atoms.ts

testo, icona, separatore, rich text, figura, progress, selettore di tema

blocks/tiers/molecules.ts

azione, CTA, navigazione, toggle, gruppo di toggle

blocks/tiers/organisms.ts

riferimento, dialogo, hover card

blocks/tiers/containers.ts

card, tabs, avatar, collapsible, swiper

blocks/allBlocks.ts

il registro completo registrato in config.blocks

I quattro livelli, e chi puo annidarsi

const allNestableBlocks = [...atoms, ...molecules, ...organisms, ...containers]

// registro COMPLETO: i nestabili piu i due che vivono solo nel contenuto di una sezione
const allBlocks = [...allNestableBlocks, blockForm, blockAccordion]

Cosa comporta

// `accordion` e `form` NON sono annidabili: metterli nel `content`
// di un altro blocco non da errore — Payload li scarta e salva un array vuoto

blocks/nestableBlockSlugs.ts

quali si possono annidare

La configurazione comune si inietta in un punto solo

Ogni blocco riceve, senza doverli dichiarare, il campo del viewMode, quello delle classi, il gruppo degli stili e il gruppo uiState — lo stato e i comportamenti dell’istanza. L’iniezione avviene in un punto unico, e il punto unico è la ragione per cui aggiungere un campo trasversale è un cambiamento di una riga invece che di quarantasette.

Il gruppo uiState è costruito PER BLOCCO: sa quali slice quel tipo di blocco espone, e le mostra. È una factory e non una costante proprio perché la risposta dipende dallo slug, e l’unico punto che lo conosce è l’iniezione.

blocks/blockConfig.ts

l’iniezione della configurazione comune in ogni blocco

La configurazione comune, iniettata in un punto solo

const MANAGER_NAMES = new Set(['viewMode', 'className', 'slot', 'itemViewMode', 'reactions', 'uiState'])

fields/fieldsViewMode.ts

il campo che nomina la forma

fields/fieldsStyles.ts

gli stili nominati

fields/fieldsUiState.ts

stato, trigger e conseguenze dell’istanza, costruiti per blocco

I blocchi, uno per uno

Ognuno dichiara i propri campi e il viewMode di default. Alcuni sono un solo campo (text), altri portano una configurazione ampia (swiper ha un centinaio di righe di opzioni). La lunghezza del file dice quanta configurazione quel blocco espone, non quanto è importante.

blockText.ts · blockRichText.ts

testo semplice e Lexical

blockIcon.ts · blockSeparator.ts · blockProgress.ts

icona, separatore, barra

blockFigure.ts · blockAvatar.ts

immagini: con didascalia e circolare

blockAction.ts

link, bottone, comando — più la variante CTA

blockNavigation.ts · blockThemeSwitch.ts

menu e selettore di tema

blockCard.ts · blockChildren.ts

contenitori generici

blockAccordion.ts · blockCollapsible.ts · blockTabs.ts

i tre modi di mostrare una cosa alla volta

blockToggle.ts · blockToggleGroup.ts

interruttore singolo e gruppo

blockSwiper.ts

il carosello, con la sua configurazione estesa

blockHoverCard.ts · blockAlertDialog.ts

pannello al passaggio e dialogo modale

blockReference.ts

un documento riferito: menu, form, composizioni, collection del progetto

blockForm.ts · blockFormChildren.ts

il form e i suoi controlli

blockThumbs.ts

le miniature dei blocchi per l’interfaccia: SVG in data-URI, nessuna richiesta

Le sezioni e i form

Le sezioni sono blocchi strutturali di primo livello: una inline (scritta nella pagina) e una per riferimento (scritta una volta nella collection sections e riusata). Sono le uniche che il layout di una pagina accetta direttamente.

I blocchi form sono a parte perché un controllo dichiara cose che gli altri blocchi non hanno — nome, tipo, validazione — e perché i figli ammessi sono solo quelli che un form può contenere.

blocks/sections/blockSectionInline.ts

la sezione scritta nella pagina

blocks/sections/blockSectionReference.ts

la sezione riusata da sections

blocks/sections/uimsSections.ts

il registro delle sezioni

blocks/form/FormControlBlock.ts

il controllo generico

blocks/form/FormSelectBlock.ts + FormRadioBlock.ts

i controlli con opzioni

blocks/form/formBlocks.ts + formControlChildSlugs.ts

il registro e i figli ammessi

I blocchi dell’editor

Tre blocchi che esistono solo per la AdminBar: la sezione modificabile e il suo albero. Stanno in una sottocartella con un registro proprio perché non devono comparire fra i blocchi che si scelgono scrivendo contenuto.

blocks/admin/blockAdminSection.ts

la sezione, in versione editabile

blocks/admin/blockAdminSectionTree.ts

l’albero delle sezioni

blocks/admin/adminBlocks.ts

il registro dell’editor

Continua

Gli eventi← precedente La configurazionesuccessivo →Tutte le diciassette pagineindice