Agregue controles a la barra lateral de publicaciones con PluginDocumentSettingPanel
Hasta ahora, hemos echado un vistazo a la barra lateral de bloques agregando InspectorControlsa nuestros bloques personalizados y agregando controles a la barra lateral de bloques central y de terceros con filtros y componentes de orden superior. En esta guía, veremos cómo agregar controles a la barra lateral de la publicación.
Configuración de visualización en la barra lateral de la publicación
En esta guía, vamos a crear un control de ‘Configuración de visualización’ que solo permitirá a los usuarios registrados ver la publicación cuando se active.
requisitos previos
- Haber seguido la guía Crear un complemento para el editor de bloques de WordPress (Gutenberg)
- Lea las guías de la barra lateral anterior (barra lateral para un bloque personalizado y barra lateral para un bloque existente )
- Lea la guía Uso de metacampos de publicación para almacenar atributos en la guía del editor de bloques de WordPress (Gutenberg)
Registrando el Post Meta en PHP
Complete los pasos en la guía de creación de complementos para darnos nuestro complemento inicial, ampliaremos esto en nuestra guía.
Una vez que haya hecho esto, configuremos la publicación meta que necesitamos para nuestro control de alternancia de permisos. Abra el archivo raíz del complemento (en nuestro caso wholesome-plugin.php) y agregue el siguiente código:
function wholesomecode_wholesome_plugin_register_post_meta() {
register_meta(
'post',
'_wholesomecode_wholesome_plugin_require_login',
[
'auth_callback' => '__return_true',
'default' => false,
'show_in_rest' => true,
'single' => true,
'type' => 'boolean',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );
Si ha echado un vistazo a la guía de metacampos de publicación, esto debería parecerle un poco familiar. Todo lo que hace es permitir que se acceda a nuestra publicación desde el editor de bloques (Gutenberg).
En su complemento, cree una nueva carpeta llamada componentsy cree el siguiente archivo /components/Sidebar.js. En ese archivo pega el siguiente código:
import { ToggleControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default class Sidebar extends Component {
render() {
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
return (<PluginDocumentSettingPanel
name="wholesomecode-wholesome-plugin-sidebar"
title={ __( 'Display Settings', 'wholesome-plugin') }
>
<ToggleControl
checked={ exampleToggle }
help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }
label={ __( 'Require Login', 'wholesome-plugin') }
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
/>
</PluginDocumentSettingPanel>
);
}
}
Lo ToggleControlhemos visto antes en nuestras guías de barra lateral anteriores, pero el panel que estamos usando es ligeramente nuevo. Usamos PluginDocumentSettingPanelpara identificar que este control debe aparecer en la barra lateral de la publicación.
También tenga en cuenta que en lugar de extraer atributos, obtenemos nuestros metadatos con el siguiente código:
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
y lo guardamos a través de nuestro onChangemétodo usando este código:
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
Esto actualiza el meta de la publicación actual. En realidad, no se guardará hasta que guardemos nuestra publicación, por lo que todo el guardado se maneja por nosotros.
Hay una última cosa que debemos hacer con nuestra barra lateral de publicaciones, y es registrarla. En la parte superior del /src/index.jsarchivo agregue lo siguiente:
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Realmente deberíamos pensar en alterar la estructura de nuestro complemento para que el código que registra el bloque se importe desde otro archivo, pero por simplicidad usaremos el mismo archivo.
Aquí usamos registerPluginpara registrar la barra lateral. Pasamos el componente de la barra lateral que creamos como el método de ‘renderización’, junto con un ícono.
Agregar la lógica Ocultar si se cerró la sesión
Una vez más, abra el archivo raíz del complemento (en nuestro caso wholesome-plugin.php) y coloque el siguiente código. Hay formas mucho mejores de hacer esto, pero lo mantendré breve para fines de ejemplo:
function wholesomecode_wholesome_plugin_require_login() {
global $post, $wp_query;
if (is_admin() ||! is_singular() ||! $post) {
return;
}
if (is_user_logged_in()) {
return;
}
$login_required = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_require_login', true );
if (! $login_required) {
return;
}
$wp_query->set_404();
status_header( 401 );
}
add_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );
Este código simplemente devuelve nuestra plantilla 404 y un estado de 401 (no autorizado) si el conmutador se establece en verdadero.
Echemos un vistazo a los controles de la barra lateral de publicaciones en acción.
Control de permisos a través de la barra lateral de la publicación
En este ejemplo, cambiamos el interruptor a verdadero, vemos nuestra página en una nueva ventana del navegador (cerrada la sesión) y, después de una actualización, vemos que devuelve la página 404, luego la cambiamos a falso, actualizamos y listo, la publicación vuelve a ser visible. ¡Magia de Gutenberg!
- Eche un vistazo a la creación de una barra lateral personalizada independiente
- Eche un vistazo a la creación de bloques secundarios anidados con el
InnerBlockscomponente - Eche un vistazo al uso de metacampos de publicación en bloques de Gutenberg (si aún no lo ha hecho) y metaboxes personalizados controlados por componentes de Gutenberg
- Eche un vistazo a la creación de una página de configuración con Gutenberg Components