WordPress block themes – Predefined styles (Español)

Los block themes de WordPress tienen una serie de predefied stiles, estos estilos son agregados por defecto al crear las diferentes secciones de nuestro tema en WordPress. Aunque puede que no parezca importante saberlo, es bueno tener en cuenta que existen fuera del contexto gráfico que utilizamos (GUI – Graphic User Interface).

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 alignment 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

Shadows

Las sombras son algo especial wordpress no le assigna una clase como tal, sino que le agrega el style inline a el elemento que le asignemos la sombra.

default shadows	style added
Natural	box-shadow:var(–wp–preset–shadow–natural)
Deep	box-shadow:var(–wp–preset–shadow–deep)
Sharp	box-shadow:var(–wp–preset–shadow–sharp
Outlined	box-shadow:var(–wp–preset–shadow–outlined)
Crisp	box-shadow:var(–wp–preset–shadow–crisp)

otras sombras posibles son las customizadas pero tendras que crearlas por ti mismo en la parte de crear sombras

bordes

al igual que las sombras los bordes seran agregados con style por ejemplo el borde de arriba sera agregado de la siguiente manera

style="border-color:#000000;border-width:1px;border-radius:5px"

Category: wordpress

Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.