WordPress block themes (en español)

WordPress block themes, es un tema muy extenso y este post no es un post como tal sino que se ira extendiendo con el tiempo, tampoco es un post dedicado para usted el lector sino para razones internas de esta página, aunque sí que le puede servir.

En este post intentaremos entender los block themes como tal y tratar de sobrepasar algunas limitaciones con las que me he topado en ellos.

Esto es un research y por tanto puede participar en todo momento atravez de los comentarios, este post ira incrementando la cantidad de informacion con el tiempo

Al parecer los block themes deben hacerse a través del editor de WordPress estos deben de tener los siguientes archivos para poder funcionar.

Templates
- index.html
- style.css
- functions.php( este archivo es opcional en los block themes)

En general los Block themes tienen la siguiente estructura:

parts/
- footer.html
- header.html
patterns/
- example.php
styles/
- example.json
templates/
- 404.html
- archive.html
- index.html (required)
- singular.html
functions.php
screenshot.png
style.css (required)
theme.json
README.txt

El archivo style.css

El archivo style.css debe de tener un header el cual es un comentario parecido al siguiente;

style.css

/**  * Theme Name:        Fabled Sunset  
* Theme URI:            https://example.com/fabled-sunset  
* Description:           Custom theme description...  
* Version:                  1.0.0  
* Author:                   Your Name  
* Author URI:            https://example.com  
* Tags:                        block-patterns, full-site-editing  
* Text Domain:          fabled-sunset  
* Domain Path:         /assets/lang  
* Tested up to:          6.4  
* Requires at least:  6.2  
* Requires PHP:        7.4  
* License:                   GNU General Public License v2.0 or later  
* License URI:            https://www.gnu.org/licenses/gpl-2.0.html  
*/

En caso de que el tema sea para la venta la licencia debe ser cambiada

Predefined styles

Blocks

blocks	class
columns	wp-block-columns wp-block-column
Headings(h1,h2,h3,h4,h5,h6)	wp-block-heading
images	wp-block-image
group	wp-block-group
spacer	wp-block-spacer
Social	wp-block-social-links
list	wp-block-list
hr	wp-block-separator (must be in hr)
Media text Media text	wp-block-media-text
Comments	wp-block-comments
nav	wp-block-navigation
login	wp-block-loginout
button	wp-block-buttons wp-block-button
Posts
Post-featured-image	wp-block-post-featured-image
Post content	wp-block-post-content
Post title	wp-block-post-title
Post excerpt	wp-block-post-excerpt wp-block-post-excerpt__excerpt(p element)
Post autor	wp-block-post-author wp-block-post-author__avatar wp-block-post-author__content wp-block-post-author__name
Post autor name	wp-block-post-author-name
avatar	wp-block-avatar
category	wp-block-post-terms
Site
Site logo	wp-block-site-logo
Site title	wp-block-site-title
Site tagline	wp-block-site-tagline

typography

Pre-styles classes

Aligns	class
left	has-text-align-left
center	has-text-align-center
right	has-text-align-right
top	is-vertically-aligned-top
Vertical-center	is-vertically-aligned-center
bottom	is-vertically-aligned-bottom

Pre-styles fonts size

Font size	class
Small	has-small-font-size
Medium	has-medium-font-size
Large	has-large-font-size
X-large	has-x-large-font-size

Pre-style Colors typography

color	class
white	has-white-color
black	has-black-color
cyan-bluish-gray	Has-cyan-bluish-gray-color
Vivid purple	has-vivid-purple-color
Vivid red	has-vivid-red-color
Luminous vivid orange	has-luminous-vivid-orange-color
Luminous vivid amber	has-luminous-vivid-amber-color
Light green cyan	has-light-green-cyan-color
Vivid green cyan	has-vivid-green-cyan-color
Pale cyan blue	has-pale-cyan-blue-color
Vivid cyan blue	has-vivid-cyan-blue-color
Pale Pink	has-pale-pink-color

Backgrounds

Pre-Style Colors Background

background	Class name
white	has-white-background-color
black	has-black-background-color
cyan-bluish-gray	has-cyan-bluish-gray-background-color
Vivid purple	has-vivid-purple-background-color
Vivid red	has-vivid-red-background-color
Luminous vivid orange	has-luminous-vivid-orange-background-color
Luminous vivid amber	has-luminous-vivid-amber-background-color
Light green cyan	has-light-green-cyan-background-color
Vivid green cyan	has-vivid-green-cyan-background-color
Pale cyan blue	has-pale-cyan-blue-background-color
Vivid cyan blue	has-vivid-cyan-blue-background-color
Pale Pink	has-pale-pink-background-color