Adicionar controles à barra lateral de postagem com PluginDocumentSettingPanel
Até agora, demos uma olhada na barra lateral do bloco, adicionando InspectorControlsaos nossos blocos personalizados e adicionando controles à barra lateral do bloco principal e de terceiros com filtros e componentes de ordem superior. Neste guia, veremos como adicionar controles à barra lateral do post.
Exibir configurações na barra lateral de postagem
Neste guia, vamos criar um controle de ‘Configurações de exibição’ que permitirá apenas que usuários logados visualizem a postagem quando alternados.
Pré-requisitos
- Ter seguido o guia Criando um Plugin para o Editor de Blocos do WordPress (Gutenberg)
- Leia os guias anteriores da barra lateral (barra lateral para um bloco personalizado e barra lateral para um bloco existente )
- Leia o guia Using Post Meta Fields to Store Attributes in the WordPress Block Editor (Gutenberg)
Registrando o Post Meta em PHP
Por favor, complete as etapas no guia de criação de plug -ins para nos fornecer nosso plug-in inicial, expandiremos isso em nosso guia.
Depois de fazer isso, vamos configurar a meta de postagem que precisamos para nosso controle de alternância de permissões. Abra o arquivo raiz do plugin (no nosso caso wholesome-plugin.php) e adicione o seguinte 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' );
Se você deu uma olhada no guia de meta campos de postagem, isso deve parecer um pouco familiar. Tudo o que ele faz é permitir que nossa meta de postagem seja acessada de dentro do editor de blocos (Gutenberg).
Em seu plugin crie uma nova pasta chamada componentse crie o seguinte arquivo /components/Sidebar.js. Nesse arquivo cole o seguinte 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>
);
}
}
O ToggleControlque vimos antes em nossos guias de barra lateral anteriores, mas o painel que estamos usando é um pouco novo. Usamos PluginDocumentSettingPanelpara identificar que esse controle deve aparecer na barra lateral do post.
Observe também que, em vez de extrair atributos, obtemos nossos metadados com o seguinte código:
const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];
e salvamos através do nosso onChangemétodo usando este código:
onChange={ (value) => {
dispatch( 'core/editor' ).editPost( {
meta: {
'_wholesomecode_wholesome_plugin_require_login': value,
},
} );
} }
Isso atualiza a meta da postagem atual. Na verdade, ele não será salvo até que salvemos nossa postagem, então toda a economia é tratada por nós.
Há uma última coisa que precisamos fazer com nossa barra lateral de postagem, e é registrá-la. No topo do /src/index.jsarquivo adicione o seguinte:
import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';
registerPlugin(
'wholesomecode-wholesome-plugin-sidebar',
{
icon: 'visibility',
render,
}
);
Realmente devemos pensar em alterar a estrutura do nosso plugin para que o código que registra o bloco seja importado de outro arquivo, mas por simplicidade usaremos o mesmo arquivo.
Aqui usamos registerPluginpara registrar a barra lateral. Passamos o componente Sidebar que criamos como o método ‘render’, junto com um ícone.
Adicione a lógica Ocultar se desconectado
Mais uma vez, abra o arquivo raiz do plugin (no nosso caso wholesome-plugin.php) e insira o seguinte código. Existem maneiras muito melhores de fazer isso, mas estou mantendo-o curto para fins de exemplo:
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 simplesmente retorna nosso modelo 404 e um status de 401 (Não autorizado) se o Alternar estiver definido como verdadeiro.
Vamos dar uma olhada nos controles da barra lateral do post em ação.
Controlando permissões através da barra lateral de postagem
Neste exemplo, alternamos o switch para true, visualizamos nossa página em uma nova janela do navegador (desconectada) e após uma atualização vemos que ela retorna a página 404, alternamos para false, refresh e voilà, a postagem fica visível novamente. Magia de Gutemberg!
- Dê uma olhada na criação de uma barra lateral personalizada independente
- Dê uma olhada na criação de blocos filho aninhados com o
InnerBlockscomponente - Dê uma olhada no uso de meta campos post em blocos Gutenberg (se você ainda não o fez) e caixas meta personalizadas guiadas por componentes Gutenberg
- Dê uma olhada na criação de uma página de configurações com os componentes do Gutenberg