WP Offload Media

p>Eu sou fã dos Campos Personalizados Avançados (ACF) há muito tempo. É usado em quase todos os sites que construí ou trabalhei nos últimos anos.

Para quem não sabe, ACF é um plugin que lhe dá mais controlo sobre o seu conteúdo. Ele usa metáforas personalizadas do post para enriquecer o seu conteúdo com dados estruturados. Ele também permite que você construa e configure os campos de dados em meta boxes quando atualizar posts, páginas, tipos de posts personalizados, e muito mais.

No passado, eu usei o plugin como parte de um projeto no site Delicious Brains. No entanto, este post no blog me mostrou como a solução de terceiros é vital para o desenvolvimento do WordPress. Deixe-me explicar…

Como funciona o ACF

Demorei um pouco para entender o que o ACF faz, então aqui vai um exemplo rápido. Eu o usei em um site de caridade de resgate de cães, onde os usuários adicionam novos cães para rehoming como um tipo de post personalizado. Entretanto, junto com o nome, descrição, título do post e conteúdo do cão, eles também querem armazenar a raça e gênero do cão, um link para um vídeo, e algumas fotos.

Para fazer isso, eu criei um grupo de campos para esses dados a partir dos campos personalizados > Grupos de campos > Adicionar novo menu:

Você pode adicionar campos de vários tipos. Aqui eu usei seleções, caixas de texto, uma caixa de seleção booleana simples e um campo de galeria. Este último é uma opção ACF Pro, e discutirei isto mais tarde.

Aqui está como você configuraria uma caixa de seleção, completa com opções do usuário:

P>Next, eu disse que este grupo só deveria aparecer nas telas de edição para o Dog tipo de post personalizado. Há todo tipo de lógica que você pode usar aqui, como tipos de posts, templates, categorias e funções do usuário:

No entanto, o verdadeiro poder do ACF é quando você adiciona dados.

Adicionando Dados aos Campos ACF

A tela de edição parece diferente quando se trabalha em um Dog post. Ela mostra uma meta caixa personalizada completa com os campos definidos:

Isso facilita a adição de todos os dados extras para os editores de conteúdo. Também permite especificar exatamente onde você quer que os dados sejam renderizados no tema, usando o get_field function code:

<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>

Sem o plugin, eu teria que usar as meta-caixas personalizadas padrão do WordPress, codificar minhas próprias meta-caixas mais ricas a partir do zero, ou calçar a raça e gênero do cão em taxonomias personalizadas. Eu poderia até ter que usar a galeria nativa embutida dentro do conteúdo do post. Shudders.

ACF eleva o WordPress

ACF é exatamente o que o WordPress como Sistema de Gerenciamento de Conteúdo (CMS) tem faltado quando se trata de ter mais controle sobre seu conteúdo. Com mais de um milhão de instalações ativas, ele tem ajudado a tornar a plataforma WordPress mais poderosa, e pode até ter contribuído para o seu crescimento.

Além disso, desenvolvedores e agências têm aproveitado para dar aos clientes o controle de seu conteúdo sem a necessidade de atalhos, construtores de páginas, ou mesmo post_content de forma alguma. Os desenvolvedores têm controle total sobre onde os dados aparecem no front end do site, evitando as inevitáveis edições do cliente que destroem o visual.

Na verdade, ACF é tão popular entre nossos clientes, que tivemos que adicionar uma integração com WP Offload Media. Agora, imagens e recorte funcionam com mídia offloaded para Amazon S3, DigitalOcean Spaces ou Google Cloud Storage.

Adicionando Opções de Campo Extra ao ACF

A versão gratuita do plugin tem muitas funcionalidades. Entretanto, a versão premium é essencial para obter acesso a campos como repetidores, layouts flexíveis e galerias.

Por exemplo, estamos usando o campo Repetidor para permitir que os usuários exibam testemunhos selecionados em uma barra deslizante nas páginas dos produtos. O Repetidor contém um campo de objeto post aninhado:

Aparece ao editar a página, para que possamos controlar quais testemunhos serão exibidos:

Com ações e filtros salpicados ao redor da base de código, ACF sempre foi uma ferramenta extremamente amigável ao desenvolvedor e expansível. Ele também prioriza melhorias que são importantes para seus usuários.

Usando o recurso JSON local

No entanto, um dos poucos problemas que encontrei no passado foi o armazenamento de configurações de campo na base de dados, especificamente tipos de posts personalizados para grupos de campos e campos.

Isso significa que se você alterasse a definição do campo em um site de desenvolvimento, você não poderia empurrar sua base de dados usando uma solução como o WP Migrate DB Pro de volta ao vivo. Você descobriria que a tabela de posts mudaria e perderia os novos dados.

Este é o antigo problema de fusão da base de dados (não me faça começar…). Eu costumava trabalhar em torno disso fazendo mudanças de campo no site ao vivo primeiro. Depois, eu puxava a base de dados para o meu site local para continuar com o desenvolvimento. Não é o ideal.

Felizmente, ACF introduziu a funcionalidade Local JSON. O que isto faz é permitir que as configurações de campo sejam salvas como arquivos JSON, que podem sincronizar com a base de dados.

Esta fantástica funcionalidade resolve o problema de fusão da base de dados para os dados ACF. Isso também significa que você pode manter os arquivos JSON sob controle de versão e fazer a configuração parte do seu processo típico de implantação de arquivos. Enquanto trabalhava com o plugin em nosso site, eu adicionei alguns ajustes para integrá-lo ainda mais com nossa configuração Git e multi-ambiente:

• Eu defini o diretório JSON no nosso app/data diretório fora do tema (como pode mudar).
• O item de menu “Custom Fields” (Campos personalizados) só será exibido em ambientes de desenvolvimento.
• JSON ficheiros com uma configuração de base de dados desactualizada em admin_init irá sincronizar automaticamente.

Even embora tenhamos agora o Editor de Blocos do WordPress (anteriormente conhecido como Gutenberg), eu argumentaria que o ACF ainda é vital para criar uma grande experiência de edição.

Usar o Editor de Blocos juntamente com o ACF

O Editor de Blocos oferece uma direcção para editar conteúdo diferente do ACF. Você cria conteúdo usando Blocos em vez de armazená-lo como meta-dados, o que lhe dá alguma flexibilidade de design.

No início, o Block Editor não suportava meta-caixas. Elas foram até removidas da tela “Edit Post”, o que provocou muita indignação. Agora, o suporte foi adicionado para as meta-caixas. Elas aparecem abaixo do Block Editor com uma Interface de Usuário (UI) mínima e menos refinada.

Using Blocks em vez de campos para dados personalizados, o novo editor tem o potencial de ter um enorme impacto no futuro da ACF. Além disso, novos sites terão muito menos probabilidade de instalar uma ferramenta de terceiros agora que existe uma solução nativa.

No entanto, não é a primeira vez que as alterações propostas ao núcleo ameaçam o futuro da ACF. Alguns anos atrás, uma nova equipe foi montada para o Post Meta. No início, isto parecia que iria acabar com as várias soluções de campos personalizados de terceiros:

Houve uma série de bibliotecas/frameworks/plugins (CMB, SCB, WPAlchemy, ACF, Pods), que preencheram este papel por enquanto. Vamos olhar para estes como prequelas espirituais para um novo plugin que se adequa ao núcleo.

Na altura, escrevi sobre como esta decisão de introduzir novas funcionalidades concorrentes pode tornar alguns plugins redundantes. Finalmente o projeto Post Meta não foi a lugar algum, o novo editor chegou, e ACF resistiu à tempestade.

ACF não apenas retornou, eles se adaptaram. O resultado foi algo que combinou o poder do ACF e a flexibilidade dos Blocos personalizados. Vamos falar sobre isto a seguir.

Como construir blocos usando ACF

Obviamente, os blocos personalizados podem ser benéficos. Entretanto, o processo técnico para criá-los é complexo. Os Blocos ACF preenchem a lacuna.

ACF Os Blocos integram-se com os seus campos personalizados actuais, são dinâmicos e personalizáveis, e permitem-lhe alcançar duas coisas:

• Você pode levar os seus campos personalizados actuais para o ecossistema do Block Editor.
• Você é capaz de criar soluções personalizadas em linha.

Eles são renderizados usando um arquivo de template PHP ou callback function – então é como desenvolver um tema. Eles também mantêm a compatibilidade do núcleo do WordPress, então você poderia até mesmo criar blocos reutilizáveis através do framework.

Embora os Blocos ACF não sejam uma muleta, eu diria que se suas habilidades de Reagir ainda são esboçadas, você definitivamente vai querer investigá-las mais. Eles vão deixar você aproveitar o poder do Editor de Blocos enquanto se mantém dentro do familiar functions.php file.

Construindo um Bloco ACF

Vamos mostrar-lhe como construir um Bloco ACF. A versão Pro da ferramenta incluiu esta funcionalidade do ACF 5.8, por isso já está connosco há cerca de dois anos. Aqui está o exemplo super-simples de código de registro de bloco:

add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}

Daqui, você vai querer criar um grupo de campos e renderizar o Bloco. Para o primeiro, você fará isso de dentro dos campos personalizados > Tela Grupos de Campo dentro do WordPress:

Aqui, adicione seu grupo de campo e preencha-o normalmente. No entanto, na meta-caixa “Location”, você vai querer usar a regra “Block” para selecionar (neste caso) o Testimonial Block.

Finalmente, você vai precisar renderizar o Bloco. Isto segue o mesmo processo a que já pode estar habituado com campos personalizados:

• Crie um ficheiro template para o seu tema baseado no parâmetro dado no parâmetro render_template definido ao registar inicialmente o Bloco.
• Choose the right method for rendering the Block.
• Enqueue your styles and scripts.

Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.

On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.

‘InnerBlocks’ Support

The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.

They can be custom or core Blocks, and you’re able to use the current “Title”, “Content”, and “Button” fields in your own ACF Blocks.

Here’s a quick tutorial to get up and running. Para começar a usar InnerBlocks, você inclui 'jsx' => true no supports array:

acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));

Você precisará então de echo o <InnerBlocks /> tag HTML no seu template de Bloco:

 echo '<div class="block-about__content">'; echo '<InnerBlocks />';

Este é apenas um exemplo simples, mas há muito mais que você pode fazer com o InnerBlocks.

Alternativos para Blocos ACF

Obviamente, ACF não vai ser a única solução para criar Blocos. Como tal, o seu primeiro instinto será provavelmente uma compilação personalizada.

Já cobrimos como criar um Bloco ‘baunilha’ no passado, mas antes de começar, vai precisar de conhecimentos de React.

Existem também plugins WordPress que lhe permitem montar Blocos a partir de vários componentes, mas eu diria que não são realmente para programadores mas ‘tinkerers do utilizador final’. Lazy Blocks é atualizado regularmente, então esta é uma boa opção se você quiser experimentar o que ele oferece.

The Future of ACF

Desde o seu lançamento, ACF tem sido um plugin complementar vital para o WordPress. Ele se estende, enriquece, e torna a plataforma mais utilizável. Eu não acho que poderia construir sites sem ele.

No entanto, combinar o Block Editor e os Blocos ACF é a cereja no bolo – é um excelente investimento no futuro do CMS. Vai ajudar a baixar a barreira de entrada para os desenvolvedores estenderem o Editor de Blocos sem começar na curva de aprendizado íngreme do React. A longo prazo, aqueles que estão pressionando tanto para a evolução do Editor de Bloco poderiam ver isso como uma vitória.