Criar um Page Builder com o Sage Roots e ACF fields

Criado: 6 de Abril, 2019 Wordpress

Neste artigo vais aprender a criar um Page Builder com componentes que implementas num tema.

Para simplificar a construção das páginas vamos usar o próprio ACF com um campo flexible content para inserir os blocos.
Este campo tem a propriedade layouts onde defines os campos

acf_add_local_field_group(array(
'key' => 'group_5c41b15c6e517',
'title' => 'Page Builder',
'fields' => array(
array(
'key' => 'field_5c41b15c843e2',
'label' => 'Layout',
'name' => 'layout',
'type' => 'flexible_content',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'layouts' => array(
'slideshow' => array(
'key' => 'layout_5c41ba5c0d5fc',
'name' => 'slideshow',
'label' => 'Slideshow',
'display' => 'block',
'sub_fields' => getSlideshowFields('layout_slideshow_'),
'min' => '',
'max' => '',
),
'grid_box_layout' => array(
'key' => 'grid_box_layout',
'name' => 'grid_box',
'label' => 'Grid Box',
'display' => 'block',
'sub_fields' => getGridBoxFields('layout_gridbox_'),
'min' => '',
'max' => '',
)
),
'button_label' => 'Adicionar bloco',
'min' => '',
'max' => '',
),
),
'location' => array(
array(
array(
'param' => 'post_template',
'operator' => '==',
'value' => 'views/template-builder.blade.php',
),
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => 1,
'description' => '',
));

No Sage Roots prefiro manter a pasta partials com views de layout (ex: template de arquivo e singular) e os componentes que estão disponíveis no Page Builder na pasta components. A pasta views poderia ser algo assim:

  • partials/archive-campaign.blade.php
  • partials/single-campaign.blade.php
  • components/heading.blade.php
  • components/slideshow.blade.php
  • components/grid-box.blade.php

Vamos estruturar o tema de modo a que as páginas sejam construídas com o page builder que vamos implementar.
É importante referir que isto não deve ser uma regra para desenhar novas páginas no tema. Se não for algo reutilizável como uma página de contacto que o próprio formulário é diferente do resto do site então usas um template para implementar.

Criamos o ficheiro template-builder.php

{{--
    Template Name: Page Builder
--}}
@extends('layouts.app')
@section('content')
@foreach(get_field('layout', get_the_ID()) ?? [] as $layout)
  @switch($layout['acf_fc_layout'])
    @case('slideshow')
        @include('partials/slideshow', $layout)
    @break

    @case('text_content')
        @include('partials/text-content', $layout)
    @break

    @case('contact_form')
        @include('partials/contact-form', $layout)
    @break

    @case('accordion')
        @include('partials/accordion', $layout)
    @break

    @case('grid_box')
        @include('partials/grid-box', $layout)
    @break

@endswitch
@endforeach
@endsection

A variável layout tem os dados do ACF e como deve ser informação imutável prefiro passar todo o conteúdo dinâmico da view numa só variável (em vez de $title é $layout[‘title’]).

<h1>{{ $layout['title'] }}</h1>
@foreach($layout['slides'] as $entry)
{{ $entry['name'] }}
@endforeach

Quando precisarmos de reutilizar um componente noutra view só temos de passar um array com o layout definido, exemplo da template-contact.php

<h1>Contact Us</h1>
@include('partials/slideshow', ['layout' => [
'slides' => [
[
'title' => get_the_title(),
'img_src' => 'http://google.pt/logo.png',
'cta_show' => false
]
]
]])
<form>
<!-- Contact Form -->
</form>

No exemplo de cima o slideshow é uma componente mas o formulário de contacto não, por apenas ser usado neste template.

Implementação

Quando tenho uma maquete para desenvolver começo por identificar os blocos.
É importante manter uma boa comunicação com o cliente nesta fase para identificar blocos que possam vir a ser usados.

O tempo de implementação desta arquitectura para desenhar as páginas com o page builder não é algo negativo pois também te influencia a implementares boas práticas no frontend. Em vez de teres os estilos dentro de um ficheiro _contact.scss passas a ter vários ficheiros para os componentes, como o Sage Roots vem estruturado de origem:

  • components/_slideshow.scss
  • components/_heading.scss
  • layouts/_contact.scss

Nota: O conteúdo deste blog é exclusivamente para ajudar e partilhar conhecimentos.
Qualquer erro que seja detetado por ti, por favor, avisa-me. Quanto melhor for o conteúdo, melhor para todos nós.

Partilhar este artigo