Pregunta:
Tengo este tipo de publicación personalizada con dos metacampos que necesito mostrar como controles de alternancia ( RestrictControl
y SubscribeControl
) en la barra lateral PluginDocumentSettingPanel
en el editor de Gutenberg. El caso es que solo quiero mostrar SubscribeControl
cuando se establece RestrictControl
. Este es el código que tengo actualmente, pero no funciona. Cuando activo y desactivo RestrictControl
ambos controles siempre se muestran.
¿Algunas ideas?
let RestrictControl = ({ restrict, onUpdateRestrict }) => (
<ToggleControl
label={ __( 'Restrict viewing?' ) }
checked={ restrict }
onChange={ restrict => onUpdateRestrict( restrict ) }
/>
);
let SubscribeControl = ({ subscribe, onUpdateSubscribe }) => (
<ToggleControl
label={ __( 'Add to newsletter?' ) }
checked={ subscribe }
onChange={ subscribe => onUpdateSubscribe( subscribe ) }
/>
);
const OptionsPanel = () => {
const postType = select( 'core/editor' ).getCurrentPostType();
if ( 'custom_type' !== postType ) {
return null;
}
return (
<PluginDocumentSettingPanel
name='options'
title={ __( 'Options' ) }
className='options-panel'
>
<RestrictControl />
{ restrict && (
<SubscribeControl />
) }
</PluginDocumentSettingPanel>
);
}
registerPlugin( 'options-panel', {
render: OptionsPanel,
})
Respuesta:
Hay 2 problemas principales en su código:
-
¿Cuál es esa
restrict
en su componenteOptionsPanel
? ¿Dónde y cómo lo definiste? -
Tanto
onUpdateRestrict
comoonUpdateSubscribe
no son funciones, por lo que hacer clic en los controles de alternancia dará como resultado un error de JavaScript.
Y si puede mostrar su código completo, probablemente pueda ayudarlo a corregirlo . Sin embargo, sugiero que pruebe el compose
paquete para construir el OptionsPanel
componente, ya hacerlo de esa manera se puede reducir en gran medida las cosas ayuda fuente y hacer muy fácil para nosotros.
Entonces, con el paquete de compose
, los pasos son:
Nota: Estoy usando estas dos meta claves: restrict_viewing
y subscribe_to_news
, así que asegúrese de cambiarlas por las correctas. (Es decir, use las meta claves adecuadas).
-
Cargue todas las dependencias de WordPress:
import { PluginDocumentSettingPanel } from '@wordpress/edit-post'; import { ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose';
-
Cree el componente principal que básicamente simplemente representa el panel del complemento / barra lateral más los dos controles de alternancia (
RestrictControl
ySubscribeControl
en la pregunta).function OptionsPanelComponent( { // These props are passed by applyWithSelect(). (see step #3) currentPostType, // current post type restrictViewing, // current state of the meta restrict_viewing subscribeToNews, // current state of the meta subscribe_to_news // And these are passed by applyWithDispatch(). (see step #4) onUpdateRestrict, // function which updates the meta restrict_viewing onUpdateSubscribe, // function which updates the meta subscribe_to_news } ) { if ( 'custom_type' !== currentPostType ) { return null; } return ( <PluginDocumentSettingPanel name="options" title={ __( 'Options' ) } className="options-panel" > <ToggleControl label={ __( 'Restrict viewing?' ) } checked={ restrictViewing } onChange={ onUpdateRestrict } /> { restrictViewing && ( <ToggleControl label={ __( 'Add to newsletter?' ) } checked={ subscribeToNews } onChange={ onUpdateSubscribe } /> ) } </PluginDocumentSettingPanel> ); }
-
Use
wp.data.withSelect
para 'seleccionar' / recuperar datos de la publicación actual (que se está editando) y pasar los datos al componente anterior (OptionsPanelComponent
).Nota: La
select
siempre se pasa a la función y esaselect
es equivalente awp.data.select
.const applyWithSelect = withSelect( ( select ) => { const { getEditedPostAttribute, getCurrentPostType } = select( 'core/editor' ); const meta = getEditedPostAttribute( 'meta' ); return { currentPostType: getCurrentPostType(), restrictViewing: meta.restrict_viewing, subscribeToNews: meta.subscribe_to_news, }; } );
-
Utilice
wp.data.withDispatch
para definir las funciones para actualizar los datos de la publicación y pasar las funciones al componente en el paso 2 anterior (OptionsPanelComponent
).Nota: El
dispatch
siempre se pasa a la función y esedispatch
es equivalente awp.data.dispatch
.const applyWithDispatch = withDispatch( ( dispatch ) => { const { editPost } = dispatch( 'core/editor' ); return { onUpdateRestrict( restrict ) { const meta = { restrict_viewing: restrict }; editPost( { meta } ); }, onUpdateSubscribe( subscribe ) { const meta = { subscribe_to_news: subscribe }; editPost( { meta } ); }, }; } );
-
Luego, finalmente, use
wp.compose.compose()
para 'componer' / envolver los tres componentes anteriores (pueden definirse usandofunction
oconst
, pero en realidad son componentes). Y este componente 'compuesto' será el que pasemos como devolución de llamada derender
parawp.plugins.registerPlugin
.const OptionsPanel = compose( applyWithSelect, applyWithDispatch )( OptionsPanelComponent ); registerPlugin( 'options-panel', { render: OptionsPanel, } );
Código completo que utilicé para realizar pruebas
Puede encontrarlo aquí , o puede descargar el complemento completo que creé en base a este ejemplo .
Y he intentado y probado que en WordPress 5.4.1 con el valor por defecto post
tipo post con las dos claves del meta mencionó anteriormente en esta respuesta.
Solución alternativa
Si no desea utilizar compose()
, puede probar este . Pero lo agrego solo porque pensé que me sería útil en el futuro. 🙂