Cree una "página de opciones de complementos" con componentes de Gutenberg

Cree una “página de opciones de complementos” con componentes de Gutenberg

Página de opciones de complementos con componentes de Gutenberg

Crear paneles de opciones para complementos nunca ha sido una tarea divertida. Esto suele ser lo que hacen los desarrolladores al final, y la mayoría de los desarrolladores no ponen ningún esfuerzo en diseñar su panel de opciones. Pero, ¿puede crear una página de opciones con componentes de Gutenberg?

jetpack

Anteriormente, en una serie de dos partes, expliqué cómo crear bloques para Gutenberg usando la API de bloques, ahora conocida como Editor de bloques, y exploramos otra pieza del rompecabezas de Gutenberg: la API de barra lateral de Gutenberg. Pero el brillo de toda la experiencia del bloque no se detiene en la interfaz, con artículos y páginas de blogs.

Nosotros tambien podemos crear una página de opciones con componentes de Gutenberg. Aunque suene complicado, es un proceso sencillo que en realidad lleva menos tiempo que la forma estándar de hacer las cosas.

Aquí hay una captura de pantalla de Biblioteca de bloques y plantillas de Gutenberg de Otter (nuestro complemento) donde creamos una página de opciones con componentes de Gutenberg:

Página de opciones con componentes de Gutenberg

Simple y limpio, ¿verdad? Aquí se explica cómo crear algo como esto:

¿Cuáles son estos componentes?

¡Excelente pregunta! Los componentes de Gutenberg no son más que componentes de React creados con una capa de abstracción que te hace sentir como si no estuvieras usando React. Pero sí, técnicamente es React.

Además, usaremos JSX para escribir nuestro código. Si es nuevo en JSX, le encantará.

Archivos de código + notas

👉 Antes de continuar, puede encontrar todo el código que usamos aquí en este Repositorio de GitHub. Puede instalar el complemento para ver el producto final de este tutorial.

En este artículo, no estoy usando Block Editor y Gutenberg indistintamente. Por Block Editor, me refiero solo a la parte del editor de Gutenberg.

Configurar una “página de opciones de complementos”

La configuración de nuestro proyecto es sencilla. Al igual que el corazón humano, tiene dos partes: la página de opciones y los archivos de compilación.

Primero, necesitamos guardar nuestra página de complementos y opciones como de costumbre:

define( 'CODEINWP_AWESOME_PLUGIN_VERSION', '1.0.0' );

function codeinwp_options_assets() {
	wp_enqueue_script( 'codeinwp-awesome-plugin-script', plugins_url( '/', __FILE__ ) . 'build/build.js', array( 'wp-api', 'wp-i18n', 'wp-components', 'wp-element' ), CODEINWP_AWESOME_PLUGIN_VERSION, true );
	wp_enqueue_style( 'codeinwp-awesome-plugin-style', plugins_url( '/', __FILE__ ) . 'build/build.css', array( 'wp-components' ) );
}

function codeinwp_menu_callback() {
	echo '<div id="codeinwp-awesome-plugin"></div>';
}

function codeinwp_add_option_menu() {
	$page_hook_suffix = add_options_page(
		__( 'Awesome Plugin', 'textdomain' ),
		__( 'Awesome Plugin', 'textdomain' ),
		'manage_options',
		'awesome',
		'codeinwp_menu_callback'
	);

	add_action( "admin_print_scripts-{$page_hook_suffix}", 'codeinwp_options_assets' );
}

add_action( 'admin_menu', 'codeinwp_add_option_menu' );

los codeinwp_add_option_menu la función usa add_options_page para conectar nuestra página de opciones al menú de configuración de WordPress. los codeinwp_menu_callback callback imprime un div en la página, donde usamos DOM para representar nuestros componentes. Y finalmente, usamos el codeinwp_options_assets función para poner en cola nuestros scripts / estilos en la página de opciones.

Ahora hablemos del guión que estamos haciendo cola. Como puede ver en el código anterior, el build.js contendrá todo el código de nuestra página de opciones.

Después de tanto código, su página de opciones debería estar visible debajo del Ajustes Menú de WordPress. Estará vacío con solo un div, y el resto se agregará más tarde con JavaScript.

Ahora necesitamos guardar las opciones del complemento que pondremos en la página de opciones de nuestro complemento. Registremos dos opciones, una booleana y una cadena, para nuestra página de opciones:

function codeinwp_register_settings() {
	register_setting(
		'codeinwp_settings',
		'codeinwp_analytics_status',
		array(
			'type'         => 'boolean',
			'show_in_rest' => true,
			'default'      => false,
		)
	);

	register_setting(
		'codeinwp_settings',
		'codeinwp_analytics_key',
		array(
			'type'         => 'string',
			'show_in_rest' => true,
		)
	);
}

add_action( 'init', 'codeinwp_register_settings' );

Este es todo el código PHP que necesitamos. Ahora hablemos del lado JavaScript de las cosas.

Representación de reacciones en Gutenberg

En el Editor de bloques, no es necesario administrar la representación de sus bloques. Solo necesitas guardarlos y el resto se encarga del editor.

Con Gutenberg, React es abstracto como el wp-element package y se puede usar para hacer cualquier cosa que hagan React y ReactDOM.

Intentemos representar un encabezado de ejemplo en nuestra página de opciones. Necesitamos importar el render, como en ReactDOM.render, desde el paquete wp-element para representar nuestro título:

/**
 * WordPress dependencies
 */
const { render } = wp.element;

render(
	<h1>Hello World</h1>,
	document.getElementById( 'codeinwp-awesome-plugin' )
);

Renderizando un componente de Gutenberg

Al igual que usamos la función de renderizado de wp-element, también podemos usar otros componentes en nuestra página de opciones. De manera similar a como usamos el componente PanelBody en nuestro primer tutorial de Gutenberg, también lo usaremos en nuestra página de opciones:

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;

const {
	PanelBody,
	PanelRow,
	ToggleControl
} = wp.components;

<PanelBody
	title={ __( 'Settings' ) }
>
	<PanelRow>
		<ToggleControl
			label={ __( 'Track Admin Users?' ) }
			help={ 'Would you like to track views of logged-in admin accounts?.' }
			checked={ true }
			onChange={ () => {} }
		/>
	</PanelRow>
</PanelBody>

Los componentes se verán bien, pero no funcionan por sí solos. Necesitamos un mecanismo para obtener y modificar opciones en la base de datos a medida que cambian en la página de opciones.

Administración del Estado

Nosotros podemos usar API principal de WordPress dentro el ciclo de vida componentDidMount para obtener y actualizar los valores como estado de nuestro componente. Esto nos ahorra escribir una ruta REST o usar AJAX.

constructor() {
	super( ...arguments );

	this.state = {
		isAPILoaded: false,
		isAPISaving: false,
		codeinwp_analytics_status: false,
		codeinwp_analytics_key: ''
	};
}

async componentDidMount() {
	wp.api.loadPromise.then( () => {
		this.settings = new wp.api.models.Settings();

		if ( false === this.state.isAPILoaded ) {
			this.settings.fetch().then( response => {
				this.setState({
					codeinwp_analytics_status: Boolean( response.codeinwp_analytics_status ),
					codeinwp_analytics_key: response.codeinwp_analytics_key,
					isAPILoaded: true
				});
			});
		}
	});
}

Ahora el componentDidMount lifecycle recupera las opciones de la base de datos y las establece en su estado. Podemos usar estos estados en nuestros controles para establecer valores.

Y finalmente, tenemos que escribir un onChange función para actualizar el estado de la base de datos.

changeOptions( option, value ) {
	this.setState({ isAPISaving: true });

	const model = new wp.api.models.Settings({
		// eslint-disable-next-line camelcase
		[option]: value
	});

	model.save().then( response => {
		this.setState({
			[option]: response[option],
			isAPISaving: false
		});
	});
}

los changeOptions función, una vez que vincularlo a this se puede utilizar para cambiar el estado. Así:

<ToggleControl
	label={ __( 'Track Admin Users?' ) }
	help={ 'Would you like to track views of logged-in admin accounts?.' }
	checked={ this.state.codeinwp_analytics_status }
	onChange={ () => this.changeOptions( 'codeinwp_analytics_status', ! this.state.codeinwp_analytics_status ) }
/>

¡Y así es como puede crear una página de opciones de complementos con componentes de Gutenberg! Las posibilidades son infinitas con esto.

En mi Código de muestraTambién agregué un campo de entrada y una sección de pie de página a la página de opciones:

Panel de opciones con campos adicionales

Pero usar componentes de Gutenberg no lo es todo; también puede usar bibliotecas React de terceros, como agregar un gráfico a su página con el react-chartjs2 paquete.

Gutenberg se ha convertido en una parte integral del núcleo de WordPress y está aquí para quedarse. Esto trae muchas herramientas que los desarrolladores podemos usar en nuestros proyectos.

En ThemeIsle, utilizamos componentes de Gutenberg en el Personalizador de WordPress para mejorar la experiencia en el Nevé tema, por ejemplo.

Otras lecturas:

Entonces, ¿ha intentado usar componentes de Gutenberg fuera del editor? ¡Háznoslo saber en los comentarios!

No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones simples, puede reducir su tiempo de carga en un 50-80%:

Maquetación, presentación y edición a cargo de Karol K.

O inicia la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. ¡Únete a él ahora es gratis!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba