Um novo tema inicial baseado em blocos para construir sites WordPress e blocos Gutenberg com uma estrutura MVC – WP Tavern

Nos dias anteriores ao Gutenberg, a maturidade do ecossistema de temas WordPress oferecia uma seleção diversificada de dezenas de temas iniciais bem conhecidos, onde os desenvolvedores provavelmente encontrariam um que se adequasse às suas preferências individuais ou pudesse ser facilmente modificado. Os autores de temas frequentemente perguntam se existe um bom tema inicial para criar temas de blocos, mas no momento há apenas um punhado, já que a era dos temas de blocos está apenas começando.

A WebREDONE, uma agência da web sediada na Sérvia, abriu o código-fonte de seu novo tema inicial, Theme Redone, que oferece uma base para a construção de sites e blocos Gutenberg com uma estrutura MVC:

Nós nos inspiramos no Laravel e em outros projetos semelhantes que realmente abordaram esse aspecto da codificação de maneira inteligente e facilitaram a organização e o raciocínio sobre o código.

No Laravel, escreveríamos PHP antigo e simples para a lógica e, em seguida, usaríamos modelos Blade para a camada View, também temos arquivos de modelo, visão e controlador para separar as preocupações e organizar o código de forma lógica e eficiente. Adotamos essa mesma abordagem, mas no contexto do ambiente WordPress. Conceitualmente, a forma como organizamos o código é semelhante ao Laravel, mas com algumas diferenças.

Theme Redone traz essa abordagem para arquivos de bloco do Gutenberg, identificando um arquivo model.json, controller.php e view.latte. Ele usa o mecanismo de modelagem Latte. O arquivo JSON contém os esquemas de campos com os dados passados ​​para controller.php onde podem ser filtrados ou modificados antes de serem passados ​​para view.latte para serem renderizados no front-end.

Exemplo de arquivos de modelo Theme Redone Latte

O tema inicial usa o Gulp 4 e o ESBuild para tarefas de compilação e observação, configurados para suportar React, Svelte, Vue e Petite Vue fora da caixa. Sua página do GitHub resume tudo incluído no framework:

  • Mecanismo de modelagem Latte por sua bela sintaxe e um fluxo de trabalho mais simplificado e gerenciável
  • Tarefas EsBuild/Webpack + Gulp para compilar SCSS e JS
  • SCSS (estrutura de pastas/arquivos SMACSS)
  • Javascript (suporte a ES8 e React/Svelte/Vue, graças a EsBuild e Babel)
  • Estrutura no tema para construir blocos Gutenberg de forma simplificada e padronizada
  • Ajudante TRB CLI para andaimes novos blocos Gutenberg
  • Sistema de grade básico codificado com variáveis ​​Flex e CSS (cerca de 15 linhas de código)
  • Funções auxiliares para tarefas repetitivas, como renderização de imagens, links, código SVG e muito mais
  • Apenas alguns componentes de interface do usuário bem escritos para você começar (não gostamos de bloat em nosso código): Modal, Accordion, Tabs, Menu, Dropdowns, Sliders e simples “transições de fade-in na visualização”
  • Suporte a SVG
  • Tracy Debugger para nos ajudar a escrever um código estável e livre de erros

A WebREDONE desenvolveu uma maneira rápida de criar novos blocos através de seu pacote NPM TRB CLI (Theme Redone Blocks), que criará instantaneamente um novo bloco com um único comando de terminal. Ele inclui uma interface do usuário personalizada junto com a imagem de visualização do bloco. A interface do usuário parece deslocada dentro do editor de blocos e um pouco mais restrita em termos de controles disponíveis para os usuários. Isso pode não importar se a agência estiver criando sites que não são editados pelos usuários, mas parece confuso.

Os criadores do tema também escreveram 50 páginas de documentação ao longo de dois meses, incluindo como começar, trabalhar com os arquivos de modelo, as funções auxiliares do tema, estrutura de blocos dentro da estrutura e muito mais.

Tema Refeito é um tema inicial opinativo. A WebREDONE decidiu compartilhá-lo porque economiza tempo da agência. Pode não funcionar para todos, mas é interessante ver as diversas maneiras pelas quais as agências estão evoluindo suas ferramentas para construir sites com mais eficiência na era do bloco. Confira Theme Redone no GitHub para obter instruções detalhadas de instalação.

[ad_2]

Deixe uma resposta