Componentes G2, uma nova imagem do zero de componentes WordPress – Taberna WordPress

Atualizar alguns das coisas.

Esse foi o objetivo que Jon Quach, designer principal da Automattic, traçou o roteiro para integrar o projeto G2 Components no Gutenberg e, eventualmente, no WordPress principal. O projeto é uma reimaginação das peças que compõem o editor de blocos, uma reformulação “do zero” do sistema de componentes. Atualizando todas as coisas ou mesmo muitas das coisas imediatamente corre o risco de quebrar tudo.

“Idealmente, o que deveria acontecer é que você deveria atualizar apenas algumas das coisas de uma maneira muito controlada e intencional”, escreveu Quach no post. Ele comparou a transição de uma cidade, seção por seção, à energia solar até que a tradicional fábrica de energia pudesse ser fechada. Você converte uma peça, testa, encontra problemas e os corrige antes de passar para a próxima seção.

Esse é o plano para integrar os componentes G2 em Gutenberg.

“G2 Components é um projeto que incorpora a ideia de tornar as interfaces e experiências do usuário melhores para os outros”, disse Quach. “No momento, está materializado como um Sistema de Componentes projetado para funcionar dentro do contexto e ambientes de Gutenberg e WordPress.”

O objetivo é fornecer os recursos para melhorar a interface do usuário do projeto Gutenberg. Os componentes devem facilitar a criação de interfaces de usuário mais recentes sem invadir o código. Quach disse que a consistência e as experiências do Sistema de Componentes devem escalar e ter um efeito cascata em toda a plataforma WordPress. Isso também se estenderá a desenvolvedores de blocos de terceiros.

“Os componentes do código são apenas o ponto de partida”, disse ele. “Meu objetivo final é transcender o código, influenciar e elevar o design também – criando um sistema de design unificado que permite e capacita as pessoas a criar experiências de interface do usuário coesas e ricas em recursos no mundo do WordPress.”

Quach acredita que as plataformas se beneficiaram com abordagens semelhantes. Ele mencionou o Material Design by Google como tendo elevado a plataforma Android e trazendo coesão aos produtos da empresa.

A equipe de Gutenberg já começou a integrar os componentes G2 ao projeto. Essa integração substitui os componentes do WordPress (@ wordpress / components) de maneira controlada que não deve interromper as implementações existentes no editor principal ou em projetos de terceiros. Novos componentes serão trocados assim que estiverem prontos. “É como ligar um interruptor”, disse Quach.

O vídeo a seguir é um passo a passo de uma hora sobre os componentes G2 que a Quach postou no YouTube:

Ele regularmente publica atualizações no blog G2 Components. Ao lado disso, há um mergulho mais profundo em seu pensamento de design sobre o projeto. Ele também fala sobre o projeto em seu stream no Twitch quase diariamente.

O que são componentes?

Captura de tela do componente 'Alerta' no Storybook de componentes G2.
Captura de tela de um componente no Storybook de componentes G2.

Os componentes são tudo, desde botões a seletores e caixas de seleção. Eles são peças padronizadas que compõem a IU do editor de bloco. Eles estão disponíveis para desenvolvedores principais e de terceiros para criar o que os usuários finais vêem e interagem. No entanto, houve um problema com a forma como o sistema de componentes original foi construído.

“Os componentes atuais não são construídos com um sistema em mente, mas sim para atender a uma necessidade imediata”, disse Quach. “Este detalhe de design específico é crucial. Uma abordagem que prioriza os sistemas suporta mais facilmente a adição de novos recursos e, mais importante, a personalização! ”

A nova abordagem é sobre a construção de um sistema de design nativo para WordPress. Tal sistema permitiria a qualquer um construir sobre ele e criar experiências nativas.

Quach disse que uma das maneiras mais fáceis de ver isso é a partir de uma perspectiva de temas de back-end – o Sistema de Componentes também tem um subsistema de temas. “Em vez do método tradicional de escrever CSS como uma ‘capa’ para camada superior, a estética da IU pode ser ajustada por meio de valores de configuração – semelhante a como o WordPress pode ser configurado com definições no wp-config.php arquivo ”, disse ele. “Essa distinção é importante porque esses valores tocam diretamente no sistema de estilo, permitindo que os estilos sejam carregados corretamente no lugar certo e na hora certa. Tudo isso sem afetar os estilos do ambiente atual e, mais importante, sem ser afetado pelos estilos do ambiente atual. ”

Ele estava respondendo à minha pergunta sobre por que o sistema de componentes deveria ser reconstruído do zero. A ideia é ter componentes que “simplesmente funcionem” em um ambiente como o administrador do WordPress, como garantir que a existência de uma folha de estilo do tema WordPress não quebre os componentes simplesmente por ser carregada.

“Por que repensar, reconstruir e aprimorar entradas, botões, modais, menus suspensos e outros?” rebateu Quach em resposta. “Para que você, o desenvolvedor, não precise fazer isso.”

O que isso significa para os desenvolvedores?

Imagem decorativa de um conjunto de ferramentas, principalmente chaves de boca, perfeitamente alinhadas.

Respeitar a compatibilidade com versões anteriores é algo que Quach disse que levou muito a sério ao projetar a arquitetura do projeto de Componentes G2. Ele também disse que faz parte da estratégia de integração que propôs.

“Eu mencionei que este projeto ‘incorpora a ideia de tornar as interfaces e experiências do usuário melhores para os outros’”, disse ele. “A contabilização da compatibilidade com versões anteriores e o suporte à migração de terceiros se enquadram na categoria de experiência do usuário.”

Como a equipe de Gutenberg continua integrando novos componentes, isso não deve mudar o que os desenvolvedores já vêm fazendo. No entanto, pode abrir algumas novas possibilidades.

“O novo Sistema de Componentes definitivamente ajudará no departamento de UI”, disse Quach. “Uma área com a qual estou particularmente animado é o espaço de desenvolvimento rápido / prototipagem. Como esses componentes são unidades independentes, eles podem ser colocados em plataformas como CodeSandbox e … simplesmente … funcionam. Você pode começar a trabalhar e rapidamente construir e compartilhar protótipos (variando de minúsculo, mas poderoso, a grande e responsável). ”

Ele disse que teve sucesso em testar projetos de componentes e demonstrar ideias para feedback rápido. Ele também trabalhou na direção oposta, construindo componentes complexos no CodeSandbox e trazendo-os de volta ao Sistema de Componentes.

“Como designer e desenvolvedor de front-end, não posso enfatizar o quão eficiente, eficaz e criativamente liberador é esse fluxo de trabalho de ‘micro construção’”, disse ele. “É algo que estou animado para que os outros também experimentem.”



Source

Deixe uma resposta

%d blogueiros gostam disto: