W naszym ostatnim przewodniku przyjrzeliśmy się dodawaniu InspectorControlsdo naszych niestandardowych bloków, aby umożliwić nam korzystanie z elementów sterujących na pasku bocznym bloku. W tym przewodniku zamierzamy na tym oprzeć i dodać kontrolę przełączania do paska bocznego bloku wszystkich naszych bloków, w tym wszystkich bloków podstawowych i innych firm, których używamy.
W tym przewodniku zamierzamy utworzyć funkcję „bloku roboczego", która pojawiła się w mojej wtyczce Wholesome Publishing.
Warunki wstępne
- Postępowałem zgodnie z przewodnikiem Tworzenie wtyczki do edytora bloków WordPress (Gutenberg)
- Postępowałem zgodnie z przewodnikiem Dodaj pasek boczny do niestandardowego bloku WordPress za pomocą InspectorControls
Przygotowanie do tego przewodnika
Jeśli postępowałeś zgodnie z instrukcją dodawania paska bocznego, świetnie. Ale teraz będę musiał poprosić o cofnięcie zmian wprowadzonych w kroku 4 tego przewodnika (Przełączanie bloku roboczego), ponieważ zamierzamy ekstrapolować tę funkcjonalność i zastosować ją do wszystkich naszych bloków.
Jeśli nie postępowałeś zgodnie z tym przewodnikiem, upewnij się, że najpierw wykonałeś krok 4, ponieważ ten przewodnik jest kontynuacją tego.
Twórz komponenty wyższego rzędu
Komponenty wyższego rzędu (HoC) są używane w React, aby owinąć istniejący komponent i przekazać funkcjonalność lub właściwości do tego komponentu. Nazywa się je HoCs, ponieważ są wstawiane do DOM przed istniejącym komponentem, lub można powiedzieć w „Wyższym Porządku”.
Zamierzamy utworzyć dwa nowe HoCs, więc utwórz nowy folder we wtyczce o nazwie componentsi utwórz następujące dwa pliki:
/components/withInspectorControls.js/components/withIsBlockDraft.js
withInspectorControls
Otwórz /components/withInspectorControls.jsi dodaj następujący kod:
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default createHigherOrderComponent( (BlockEdit) => {
return (props) => {
const {
attributes: {
isBlockDraft,
},
setAttributes,
} = props;
return (<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody
title={ __( 'Block Display Settings', 'wholesome-plugin') }
icon="visibility"
initialOpen={ false }
>
<ToggleControl
label={ __( 'Set Block as Draft', 'wholesome-plugin') }
checked={ isBlockDraft }
onChange={ (isBlockDraft) => setAttributes( { isBlockDraft }) }
help={ __( 'If the block is set to draft it will not show on the front end.',
'wholesome-plugin') }
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withInspectorControls' );
Możesz rozpoznać ten kod od kroku 4 przewodnika po pasku bocznym. To prawie ten sam kod, z wyjątkiem tego, że opakowaliśmy go w createHigherOrderComponent.
createHigherOrderComponentPozwala nam na dostęp do tej BlockEditoryginalnej funkcji edycji bloku, który ten komponent będzie zawijał. Wkrótce dowiemy się, jak to jest przekazywane, gdy utworzymy filtry.
withIsBlockDraft
Otwórz /components/withIsBlockDraft.jsi wklej następujący kod:
import { createHigherOrderComponent } from '@wordpress/compose';
export default createHigherOrderComponent( (BlockListBlock) => {
return (props) => {
const { attributes } = props;
const { isBlockDraft } = attributes;
return <BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } />;
};
}, 'withIsBlockDraft' );
To createHigherOrderComponentpozwala nam na dostęp BlockListBlock, który pozwala nam przekazać atrybuty do opakowania bloku edytora. Używamy go tutaj, aby ustawić klasę „draft-block” w opakowaniu, jeśli ustawiono przełącznik Draft Block. Odtwarza to, co wcześniej dodaliśmy do metody edycji w kroku 4 przewodnika po pasku bocznym.
Znowu musimy ustawić filtr, który ma BlockListBlockbyć przekazany do tej kontrolki.
Skonfiguruj filtry
Na górze /src/index.jspliku dodaj następujące informacje:
import { addFilter } from '@wordpress/hooks';
import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';
Powinniśmy naprawdę pomyśleć o zmianie struktury naszej wtyczki, aby kod rejestrujący blok był importowany z innego pliku, ale dla uproszczenia użyjemy tego samego pliku.
Filtruj atrybuty
W tym samym pliku dodaj następujący kod:
addFilter(
'blocks.registerBlockType',
'wholesome-plugin/block-draft-attributes', (settings) => {
const { attributes } = settings;
return {
...settings,
attributes: {
...attributes,
isBlockDraft: {
default: false,
type: 'boolean',
},
},
};
}
);
Ten filtr dodaje dodatkowe atrybuty do wszystkich bloków w kompilacji. Teoretycznie moglibyśmy filtrować to tylko dla niektórych bloków, ale nie będziemy tego robić dla naszego przykładu.
Gdybyśmy chcieli ograniczyć ten filtr do określonych bloków, moglibyśmy to zrobić w ten sposób:
const { attributes, name } = settings;
if ('core/paragraph' !== name) {
return;
}
Filtruj Inspektora Kontroli
Dodaj następujący kod do /src/index.jspliku:
addFilter(
'editor.BlockEdit',
'wholesome-plugin/block-draft-inspector',
withInspectorControls,
);
Tutaj filtrujemy BlockEdit, aby przekazał to do naszego HoC, który stworzyliśmy wcześniej.
Gdybyśmy chcieli ograniczyć ten filtr do określonych bloków, w HoC zrobilibyśmy następujące czynności :
if ('core/paragraph' === props.name) {
return <BlockEdit { ...props } />
}
Filtruj blok listy bloków
Na koniec dodajmy filtr dla naszego BlockListBlock:
addFilter(
'editor.BlockListBlock',
'wholesome-plugin/block-draft-class',
withIsBlockDraft
);
Ponownie, jeśli chcesz ograniczyć ten blok, możesz to zrobić w HoC.
Dodaj PHP i SCSS
Dodaj poniższe, /editor.scssaby nasz baner Draft wyglądał ładnie (można to zrobić znacznie lepiej, ale to tylko przykład).
.editor-styles-wrapper {
.draft-block {
border-bottom: 1px dotted #cfcfcf;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
margin-top: 3em;
&::before {
background: #cfcfcf;
background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);
background-size: 8.49px 8.49px;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
border-top: 1px solid #cfcfcf;
color: black;
content: 'Draft Block';
display: block;
font-family: monospace;
font-size: 1rem;
left: 0;
padding-left: 5px;
position: absolute;
top: -27px;
width: 100%;
}
opacity: .4;
&.is-selected {
opacity: .8;
}
}
}
Dodaj następujące elementy do pliku głównego wtyczki (w naszym przypadku wholesome-plugin.php).
function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {
if (is_admin()) {
return $pre_render;
}
if (isset( $block['attrs']) &&
isset( $block['attrs']['isBlockDraft']) &&
$block['attrs']['isBlockDraft']) {
return false;
}
return $pre_render;
}
add_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );
Spowoduje to zatrzymanie wyprowadzania bloków roboczych na interfejsie.
Widząc to w akcji
Pamiętaj, aby skompilować npm starti możemy teraz ustawić dowolny typ bloku na blok roboczy:
Ustawianie i rozbrajanie bloków roboczych
- Spójrz na tworzenie zagnieżdżonych bloków podrzędnych za pomocą
InnerBlockskomponentu - Zobacz, jak używać meta pól postu w blokach Gutenberga
- Spróbuj dodać elementy sterujące do paska bocznego posta