Odin v3 beta

[adammacias]

Galera, o peguei as últimas semanas para dar atenção especial para o Odin. Levei em consideração os tópicos #328 e #411 e agradeço demais o pessoal que sugeriu as mudanças e entrou na discussão.

Segue alguns destaques dessa versão:

• Adicionado Bootstrap 4 via npm.
• Adicionado Font Awesome 5 via npm
• Refatorado tarefas de automatização Grunt para Gulp.
• Adicionado comando npm run dev inicia modo de desenvolvimento com atualização em tempo real com browsersync.
• Adicionado comando npm run build compila e minifica arquivos assets (CSS, JS, Imagens e Fonts) para produção dist.
• Adicionado comandos npm run build:{css,js,img,fonts} compila individualmente arquivos assets para produção dist.
• Adicionado comando npm run lang:checktextdomain verifica text domain nos arquivos PHP do tema.
• Adicionado comando npm run lang:addtextdomain adiciona text domain nos arquivos do tema.
• Adicionado comando npm run lang:makepot cria arquivo .POT para internacionalização de tema.
• Refatorado o "core" do Odin para odin-toolkit plugin.
• Adicionado TGM Plugin Activation com sugestão para instalação do odin-toolkit. (Merge v3-dev)
• Removido funções desnecessárias como a de paginação, cujo WordPress já criou-se nativamente.
• Refatorado estrutura de arquivos e diretórios em geral, como functions/, assets/, inc/, 'components/' e etc.

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

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]

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]

Demorei mas testei tb..rs

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

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

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]

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

[chrdesigner]

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]

@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]

Demorei mas testei tb..rs

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

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

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]

@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?