Reconstruir la tabla de precios Flywheel como un bloque personalizado (en unos 10 minutos)

Publicado: 2021-03-31

El editor de bloques (Gutenberg) es sin duda el centro de WordPress moderno. Con la edición completa del sitio en camino a WordPress Core, los bloques y todo lo que prometen llegaron para quedarse.

Sin embargo, los bloques no siempre hacen lo que queremos o se ven como queremos. Si diseña y crea sitios para ganarse la vida, sabe que las cosas simples solo llegan hasta cierto punto en la web. En algún momento, necesitamos que ese “bloque” en la página se vea o se comporte de una manera muy particular.

¡Los bloques personalizados son la solución aquí! Pero los bloques personalizados requieren, para muchas personas que han estado trabajando en WordPress por un tiempo, un enfoque muy diferente para el desarrollo.

¿Diferente? ¡Sí!

¿Difícil? ¡No!

Voy a mostrarte cómo puedes construir fácilmente un bloque completamente personalizado. Y va a tomar alrededor de 10 minutos. Para cualquier profesional independiente o equipo de agencia que quiera mejorar sus habilidades en el editor de bloques, ¡creo que le gustará esto!

El bloque

Imaginemos que estamos trabajando en un proyecto y un diseñador nos entrega un bonito diseño para un sitio web de comercio electrónico. Utiliza lo mejor de WordPress + WooCommerce, pero hay algunas piezas que simplemente no funcionan de fábrica. Uno de estos es este de aquí:

¡ Hola ! ¡Esto parece familiar!

Sí, vamos a reconstruir la tabla de precios de Flywheel como un bloque personalizado. ? Hay bloques de tablas de precios plug-n-play, pero el nuestro aquí es bastante único, por lo que vamos a lanzar el nuestro.

La puesta en marcha

El héroe de esta historia es un complemento llamado Genesis Custom Blocks. Es gratis en wordpress.org, y hay una versión Pro que ofrece algunas funciones avanzadas interesantes, que incluyen:

Nueva instalación de WordPress: cortesía de Local
Genesis Custom Blocks (uno gratuito) instalado y activo
Un tema hijo para el Tema del Bloque Génesis

Nota importante: Genesis Custom Blocks no depende de Genesis Framework, el tema de Genesis Block anterior o cualquier otro complemento o tema.

Registro y configuración del bloque

La belleza de este complemento es que podemos hacer mucho en el administrador de WordPress.

En el administrador de WordPress, en el menú de la izquierda, vaya a Bloques personalizados > Agregar nuevo

La pantalla que vemos ahora es el Generador de bloques, que es donde vamos a configurar un montón de cosas para nuestro bloque, incluida la adición de campos.

La forma en que funciona este complemento es que crea bloques personalizados donde el usuario, trabajando en el Editor de bloques, ingresa contenido y datos a través de campos en una interfaz similar a un formulario. Esta interfaz simplificada/obstinada es una de las cosas que acelera el proceso de creación de bloques personalizados. No necesita averiguar la interfaz de usuario de entrada.

Los detalles del bloque que agregamos son:

Nombre: Tabla de Precios
Slug: tabla de precios
Icono: Planeta Génesis

Los campos que agregamos son:

Nombre	Babosa	Tipo de campo
Icono	icono	Imagen
Nombre	nombre	Texto
Descripción	descripción	Texto
Precio	precio	Número
URL del botón	botón-url	URL
Recuento de sitios	recuento de sitios	Número
Visitas Mensuales	visitas mensuales	Número
Espacio del disco	Espacio del disco	Número
Banda ancha	banda ancha	Número

Agregar campos a nuestro bloque personalizado se ve así:

Una vez que hemos agregado todos nuestros campos, esto es lo que parece:

Cuando presionamos publicar, recibimos un aviso que nos indica qué hacer a continuación.

Esto nos lleva al siguiente paso:

Plantilla del bloque

El bloque ya está registrado y disponible en el editor de bloques. Puede saltar a una nueva publicación/página y agregar el bloque como lo haría con cualquier otro. Sin embargo, no mostraría nada (todavía). Aquí es donde entran las plantillas.

Genesis Custom Blocks permite a los desarrolladores de WordPress aprovechar muchas de las prácticas de creación de plantillas que hemos perfeccionado durante la última década más o menos. Es súper simple y se sentirá muy familiar.

En nuestro tema hijo, agregamos un par de nuevas carpetas y archivos como este:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

Cosas a tener en cuenta aquí:

Añadimos una carpeta de blocks en nuestro tema (tema hijo).
Agregamos una carpeta específica para el bloque en el que estamos trabajando actualmente y le damos el nombre que sea el slug de bloques, que en este caso es pricing-table .
Agregamos un archivo PHP y un archivo CSS. Aquí es donde agregaremos nuestro código de plantilla.

Comenzando con nuestro archivo PHP, comencemos con nuestro marcado HTML básico y clases CSS.

Esto se verá así:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

Cosas a tener en cuenta:

Tenemos un montón de clases de CSS listas para usar. Nota: puede abordar el CSS sin embargo, tiene sentido para usted.
Vamos a usar la etiqueta HTML <progress> para manejar nuestras barras de recursos.

Ahora vamos a trabajar con una función de PHP simple que el complemento pone a nuestra disposición. Hay un montón disponible, pero probablemente pasarás la mayor parte de tu tiempo usando estos 2 a continuación. Estamos usando exclusivamente el primero en este bloque.

Función	Que hace
`block_field()`	Obtiene y genera los datos ingresados en el campo por el usuario al agregar el bloque a una página/publicación.
`block_value()`	Obtiene los datos ingresados en el campo por el usuario al agregar el bloque a una página/publicación.

Entonces, con estas funciones, nuestro archivo de plantilla PHP ahora se ve así:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

Puede ver dónde hemos usado esa función block_field() para obtener y generar los datos. Simplemente usamos el slug del campo como argumento en la función. Por ejemplo block_field( 'icon' ) . Este, al ser un tipo de campo de imagen, devuelve la URL de esa imagen.

Para nuestro CSS, colocamos esto en el archivo de plantilla block.css. Una vez más, CSS se puede girar de la forma que desee y el código específico que he escrito no es particularmente relevante para este tutorial, pero lo dejaré aquí para que lo revise.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

La parte más interesante del CSS aquí es el estilo de la etiqueta <progress> . Un poco complicado, pero es lo que hay. Puede cambiar a una configuración div anidada para esos y calcular anchos establecidos si desea evitar <progress> .

¡Y eso es! ?

Recapitulando:

Agregamos y configuramos el bloque en el WP Admin
Creamos un archivo de plantilla PHP con unas míseras 29 líneas de HTML básico y una sola función PHP
Colocamos algo de CSS en block.css para nuestro estilo.

Usando nuestro bloque personalizado

Entonces ahora podemos saltar y crear una nueva publicación o página y agregar el bloque. Para mantener ese estilo de 4 columnas para las opciones de precios, primero agregamos un bloque de columnas y luego soltamos nuestro bloque de tabla de precios personalizado en cada columna.

Al hacer clic en el botón "Agregar bloque" , puede ver aquí que nuestro bloque de tabla de precios está listo para funcionar.

A continuación se muestra cómo tengo cuatro columnas y he agregado el bloque personalizado cuatro veces. Cuando selecciono un bloque individual, puede verlo cambiar a la interfaz de usuario del formulario que nos brinda nuestros campos para agregar contenido. Al hacer clic fuera de la vista del formulario, obtenemos una vista previa.

Se ve encantador en el editor de bloques y se ve igual de bien en la interfaz. Debido a que también estamos aprovechando el bloque de columnas, todo es agradable y receptivo.

Con nuestros diseños listos para trabajar y poder apoyarnos en el bloque de columnas receptivas de Gutenberg, el tiempo total de construcción de este bloque para mí fue menos de 10 minutos.

Hay un par de cosas que podrías hacer para mejorar aún más el bloque:

Hay algunas cadenas que necesitan pluralizarse. Es decir, "Sitio de WordPress" debe ser "Sitios de WordPress" para planes con más de 1 límite de sitio. Algo de lógica básica en el archivo de plantilla de PHP podría resolver esto.
Puede omitir el bloque de columnas y, en su lugar, usar el campo Repetidor (función Pro) y contener todos los planes en un solo bloque.
Agregue comas a los números más grandes.
Las barras de progreso muestran el valor exacto de las relaciones máximas. Esto se ve un poco extraño. Podrías cambiar a algo más conceptual de los valores.

envolviendo las cosas

Si desea descargar e instalar este bloque, puede descargar los archivos aquí. La documentación sobre la importación de bloques personalizados se puede encontrar aquí.

Otros enlaces importantes:

el complemento
sitio de documentos
Comunidad de Slack de Génesis

Si desea ver un poco más de Genesis Custom Blocks en acción, en una sesión reciente en DE{CODE}, construí y demostré cuatro bloques personalizados separados (de complejidad creciente) en aproximadamente 15 minutos. Echa un vistazo a la grabación bajo demanda aquí.

Espero que hayas encontrado esto útil y hayas entendido cómo aprovechar el poder del Editor de bloques para diseños y construcciones personalizados es realmente muy fácil.

¡Salud!

¡Obtenga acceso gratuito a los temas de StudioPress creados por Genesis con Flywheel!

Es importante que su proveedor de alojamiento haga lo máximo por usted, ¡y eso va más allá del rendimiento y la seguridad! Con acceso a más de 35 temas de StudioPress creados por Genesis sin costo adicional, Flywheel le brinda una hermosa biblioteca de temas para que pueda crear o reconfigurar sus sitios de una manera que se ajuste a los objetivos de su sitio web. Obtenga más información sobre el volante aquí.