search

wpbrasil / odin

Framework and base theme for development with WordPress.
http://wpod.in
565 stars 195 forks source link

Odin v3 beta #480

Open adammacias opened 6 years ago

adammacias commented 6 years ago

Galera, o peguei as últimas semanas para dar atenção especial para o Odin. Levei em consideração os tópicos https://github.com/wpbrasil/odin/issues/328 e https://github.com/wpbrasil/odin/issues/411 e agradeço demais o pessoal que sugeriu as mudanças e entrou na discussão.

Segue alguns destaques dessa versão:

Acho que é isso pessoal, aguardando os testes e o feedback de vcs antes do lançamento! :)

odin-3-screen1

Componentes

A grande mudança do Odin3 e talvez a diferença entre os outros temas base é a ideia é "componetizar". Acredito que seja uma boa ideia seguir (ou tentar) o que os frameworks JS estão fazendo :)

Exemplo do componente/post/. No mesmo diretório é possível encontrar o template (1), funções (2), os estilos (3) e scripts (4) do componente. Isto facilita na hora de edita-lo ou reaproveita-lo mais tarde.

  1. Template. seria nossa "view" components/post/post.php.
  2. Funções PHP exclusivas do compoentes em questão, veja o exemplo components/post/post.php.
  3. Estilos (SCSS) exclusivos do componente. components/post/post.php. Caso ainda não tenha o prefix underscore, exemplo posts.scss é gerado um arquivo post.css em dist, isso se for interessante link-lo na página separadamente.
  4. Scripts. JavaScript utilizado do componente, arquivos .js é automaticamente cuspido em dist durante a compilação, daí é só utilizar wp_enqueue_script() no nosso passo (2) para add na página.

A base é esta, se deletar o diretório components/post o componente morre, e para reaproveita-lo em outro tema é só copiar e colar o diretório.

Estrutura

/dist/

Este diretório só é construído a partir do npm run (dev|build) como de costume já em outros conhecidos frameworks, detalhes dos comandos em README.md.

Caso a constante SCRIPT_DEBUG estiver ativa, o Odin é esperto o suficiente para chamar os arquivos minificados ou de desenvolvimento.

/dist
├── css
|  ├── admin.css            => Estilo do Admin do WP
|  ├── admin.min.css        => Estilo do Admin do WP (produção)
|  ├── editor.css           => Estilo do editor nativo do WP
|  ├── editor.min.css       => Estilo do editor nativo do WP (produção)
|  ├── theme.css            => Estilo do Tema
|  └── theme.min.css        => Estilo do Tema (produção)
├── fonts
|  ├── fa-regular-400.eot   => Arquivo de tipografia (FontAwesome e etc)
|  ├── fa-regular-400.svg   => ...
|  ├── fa-regular-400.ttf   => ...
|  └── ...
├── img
|  ├── admin-logo-login.png => Logo do admin (Login)
|  ├── theme-icon.png       => Favicon do Tema
|  └── theme-logo.png       => Logo padrão do Tema (caso não use o personalizar do WP)
└── js
├── admin.js                => Scripts do Admin do WP
├── admin.min.js            => Scripts do Admin do WP (produção)
├── theme.js                => Scripts do Tema (produção)
└── theme.min.js            => Scripts do Tema (produção)

/assets/

No arquivo js/theme.js existe a possibilidade de incluir outros arquivos nele mesmo, veja o exemplo de como o Bootstrap é incluído.

O arquivo css/theme.scss inclui as variaveis, functions e mixins e estilos do tema e terceiros. Note que tambem inclui qualquer arquivo sass do diretório /components/.

/assets
├── css
|  ├── admin.scss            => Arquivo SCSS principal Admin WP
|  ├── editor.scss           => Arquivo SCSS principal Editor WP
|  ├── theme
|  |  ├── _abstracts.scss    => Váriaveis + Functions + Mixins do Tema, Bootstrap e etc
|  |  └── _variables.scss    => Váriaveis SCSS do tema
|  ├── theme.scss            => Arquivo SCSS principal Tema
|  └── vendors
|     ├── _bootstrap.scss    => Bootstrap personalizado
|     └── _font-awesome.scss => FontAwesome personalizado
├── fonts
├── img
|  ├── admin-logo-login.png
|  ├── theme-icon.png
|  └── theme-logo.png
└── js
├── admin.js                 => Arquivo Script principal Admin WP
└── theme.js                 => Arquivo Script principal Tema
allysonsouza commented 6 years ago

Testei por aqui @adammacias, tudo certo! Achei bem interessante a estruturação, a primeira vista tá bem fácil de compreender, e aparentemente produtivo para desenvolver, mas aí só pegando pra fazer um projeto pra sentir. Vamos ver o que o resto da galera acha!

Rahmon commented 6 years ago

Demorei mas testei tb..rs

Encontrei apenas um problema no menu. Pois ele aparece "desconfigurado".

screenshot from 2018-06-09 10-44-04

Quando fui na parte administrativa para alterar o menu, recebi a seguinte mensagem:

screenshot from 2018-06-09 10-44-25

Verifiquei que no código não é feito o registro do menu (register_nav_menu). Ao fazer esse registro a mensagem desaparece, mas o menu fica da mesma forma.

clcmo commented 6 years ago

Vou testar em meu WAMP assim que puder. Mas parece estar muito bom só pelas imagens.

chrdesigner commented 6 years ago

Eu encontrei um "erro" com integração com o plugin odin-toolkit + Odin v3. Ele solicita a pasta "core" aonde estão o css + js para criação dos campos personalizados... A minha duvida é se criamos uma pasta dentro do plugin "que eu acho muito mais viável" ou deixamos na pasta do tema :)

allysonsouza commented 6 years ago

@chrdesigner o Odin Toolkit ficou meio que no limbo, precisa de uns updates, tem vários bugzinhos mesmo, acabei seguindo com um fork do projeto enquanto as coisas no Odin avançavam a passos lentos: https://github.com/HasteDesign/Haste-Toolkit

Mas com essa renovada da v3, vou tentar dar um tapa no Toolkit também

guimontme commented 5 years ago

Demorei mas testei tb..rs

Encontrei apenas um problema no menu. Pois ele aparece "desconfigurado".

screenshot from 2018-06-09 10-44-04

Quando fui na parte administrativa para alterar o menu, recebi a seguinte mensagem:

screenshot from 2018-06-09 10-44-25

Verifiquei que no código não é feito o registro do menu (register_nav_menu). Ao fazer esse registro a mensagem desaparece, mas o menu fica da mesma forma.

Olá, sou novo por aqui, Eu tbm percebi isso, mas é só registrar com o mesmo theme_location que se encontra no /components/navigation-main.php; Bom eu registrei o menu, colocando esse código abaixo no /inc/theme/functions.php: 

           /**
         * Register nav menus.
         */
        register_nav_menus(
            array(
                'main-menu' => __( 'Main Menu', 'odin' )
            )
        );

Minha única crítica é que ficar mascarando o uso do bootstrap pode ser mais chato que simplesmente usar as classes esplicitamente, por exemplo: eu quis substituir o search_form do topbar por um navbar-nav, então eu acabo duplicando alguns estilos que poderiam estar sendo usados uma unica vez.

Encontrei um outro "erro" no _wordpress.scss na linha 92 temos essa declaração: 

.hentry,
.comment,
#comments {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    hyphens: auto;
}

Porém, com essa declaração quebra-se as palavras em qualquer lugar e nem coloca o hifen de quebra "-", para consertar isso é só trocar o word-brake: keep-all, aí ele coloca as hifens no lugar certo, mas só se justificaria se tiver o text-align:justify todos os textos, senão a aprência fica feia.

rudwolf commented 4 years ago

@allysonsouza @anyssa @adammacias

Como tá o andamento disto?

Eu aprovei 3 PRs do @hansmosl que tinham mudanças menores com atualizações de filtros deprecados e inclusão de tags novas, nada que vá criar uma enorme diferença, mas causam conflito com esta nova versão que tá pra sair, tem previsão de release dela ou é só um projeto mesmo?