Blocos Customizados

Parceria com o SGMBlocks

O tema SGM trabalha em conjunto com o módulo SGMBlocks para fornecer blocos customizados. O módulo define os layouts, formulários de configuração, e persistência de dados. O tema fornece os templates de visualização que renderizam esses blocos no frontend.

Ordem de resolução de templates

Quando o Omeka S renderiza um bloco, o helper $this->blockLayout()->render($block) resolve o template na seguinte ordem:

1. Tema ativo: themes/sgm/view/common/block-layout/{layout}.phtml
2. Módulo SGMBlocks: modules/SGMBlocks/view/common/block-layout/{layout}.phtml
3. Core do Omeka S: application/view/common/block-layout/{layout}.phtml

Essa hierarquia permite que o tema sobrescreva qualquer bloco do módulo. Se o tema não define um template, a versão do módulo é usada como fallback.

SGMBlocks como dependência

O módulo SGMBlocks é necessário para o funcionamento completo do tema. Sem ele, os blocos customizados não aparecem na interface administrativa. Veja a documentação do módulo para detalhes de instalação e arquitetura.

Blocos disponíveis no tema

O tema define templates para sete blocos do SGMBlocks:

Bloco	Arquivo	Descrição
Acordeão	accordion-block.phtml	Seção expansível com múltiplos itens
Banner de página	banner-page.phtml	Hero banner com imagem de fundo
Preview de browse	browse-preview.phtml	Grid de miniaturas de recursos
Botão	button-block.phtml	Botão com estilos configuráveis
Ícone	icon-block.phtml	Bloco de ícone com título e descrição
Lista de páginas	list-of-pages.phtml	Cards de páginas hierárquicas
Barra de busca	search-bar-block.phtml	Formulário de busca com sugestões

Banner de página

Arquivo: view/common/block-layout/banner-page.phtml

Renderiza um hero banner com imagem de fundo, título, descrição opcional, e formulário de busca integrado.

Campos do bloco:

• image: Asset da imagem de fundo
• title: Título do banner
• description: Descrição do banner
• content_align: Alinhamento do conteúdo, já normalizado pelo módulo para center ou left
• use_overlay: Boolean para overlay escuro; o módulo só passa true quando o alinhamento é center
• show_search_bar: Boolean para formulário de busca; também gated ao center no módulo
• show_search_suggestions: Boolean para sugestões; gated ao center e só faz sentido com a barra ativa

Layout Data:

• fixed_header: Controla se o header é fixo e transparente

Renderização:

O template detecta se está na homepage comparando IDs da página atual e da homepage configurada. Se não estiver na homepage e o alinhamento for left, renderiza breadcrumb com link para homepage e título da página atual.

Com center, a imagem vai em background-image e o overlay bg-zinc-900/25 depende de use_overlay. Com left, o tema usa fundo sólido #212121, imagem em camada e gradiente; overlay e busca não entram. O formulário de busca, quando liberado, vem do partial common/search-form.

Acordeão

Arquivo: view/common/block-layout/accordion-block.phtml

Renderiza uma seção de acordeão com múltiplos itens expansíveis.

Campos do bloco:

• items: Array de objetos com title e text para cada item do acordeão

Cada item é renderizado com botão expansível e painel de conteúdo. Atributos ARIA são aplicados para acessibilidade: aria-expanded, aria-controls, e id correspondente.

Botão

Arquivo: view/common/block-layout/button-block.phtml

Renderiza um botão estilizado com link configurável.

Campos do bloco:

• button_text: Texto do botão
• button_link: URL de destino
• button_style: Estilo visual: default, primary, ou outline
• button_size: Tamanho: default, small, large
• open_in_new_tab: Boolean para abrir em nova aba

O template aplica classes Tailwind baseadas no estilo selecionado. O estilo outline renderiza botão sem fundo com borda e texto coloridos.

Ícone

Arquivo: view/common/block-layout/icon-block.phtml

Renderiza um bloco com ícone de asset, título, e descrição.

Campos do bloco:

• icon: Asset do ícone em formato SVG
• icon_title: Título do bloco
• icon_description: Descrição do bloco
• alignment: Alinhamento do bloco: left, center, ou right

O ícone é exibido com altura fixa de 48px. O container usa flexbox com direção column e alinhamento baseado no campo alignment.

Barra de busca

Arquivo: view/common/block-layout/search-bar-block.phtml

Renderiza um formulário de busca com sugestões configuráveis.

Campos do bloco:

• show_suggestions: Boolean para exibir sugestões de busca

O template inclui o partial common/search-form passando a configuração de sugestões. Sugestões são obtidas do site setting sgmblocks_search_suggestions.

Preview de browse

Arquivo: view/common/block-layout/browse-preview.phtml

Renderiza grid de miniaturas de recursos com títulos e descrições.

Campos do bloco:

• heading: Título da seção
• resources: Array de recursos a exibir
• resourceType: Tipo de recurso
• components: Componentes a renderizar: thumbnail, resource-heading, resource-body

O template implementa grid responsivo com 1 a 4 colunas baseado no breakpoint. Thumbnails são obtidas via $this->thumbnail() com fallback para buscar primeira mídia de imagem.

Títulos respeitam a configuração browse_heading_property_term. Descrições usam browse_body_property_term.

Lista de páginas

Arquivo: view/common/block-layout/list-of-pages.phtml

Renderiza cards de páginas do site em estrutura hierárquica.

Campos do bloco:

• pageList: Array hierárquico de páginas com text, data, e children

O template busca thumbnail de cada página via bloco thumbnail-block e descrição via page-description. Renderização é recursiva para suportar hierarquia infinita de páginas.

Ordem de renderização em páginas

Em view/omeka/site/page/show.phtml, blocos são renderizados em duas fases:

Fase 1: Blocos banner-page:

foreach ($page->blocks() as $block):
    if ($block->layout() === 'banner-page') {
        echo $this->blockLayout()->render($block);
    }
endforeach;

Blocos do tipo banner-page são renderizados primeiro, fora do container principal, permitindo que ocupem largura total da viewport.

Fase 2: Blocos principais:

foreach ($page->blocks() as $block) {
    if (in_array($block->layout(), ['thumbnail-block', 'page-description', 'banner-page'])) {
        continue;
    }
    echo $this->blockLayout()->render($block);
}

Blocos restantes são renderizados dentro do container com sistema de grid. Os tipos thumbnail-block, page-description, e banner-page são excluídos pois são tratados separadamente.

Dados de bloco em templates

Dentro de um template de bloco, o objeto $block está disponível com métodos:

// Obter valor de campo
$title = $block->dataValue('title');

// Obter layout data com valor padrão
$alignment = $block->layoutDataValue('content_align', 'center');

// Obter nome do layout
$layout = $block->layout(); // ex: 'banner-page'

O helper $this->blockLayout()->render($block) automaticamente injeta o objeto $block no template correspondente.