Lägg till kontroller i sidofältet Core och Third Party Block med filter och komponenter av högre ordning

I vår senaste guide tittade vi på att lägga InspectorControlstill våra anpassade block för att göra det möjligt för oss att använda kontroller i blockets sidofält. I den här guiden kommer vi att bygga vidare på det och lägga till en växlingskontroll till blockets sidofält för alla våra block, inklusive alla kärn- och tredjepartsblock som vi använder.

I den här guiden kommer vi att skapa funktionen "utkastblock" som fanns i mitt plugin för Wholesome Publishing.

Förutsättningar

• Har följt guiden Skapa ett plugin för WordPress Block Editor (Gutenberg) .
• Har följt guiden Lägg till en sidofält till ditt anpassade WordPress-block med InspectorControls

Förbered dig för den här guiden

Om du har följt guiden Lägg till en sidofält, bra. Men jag kommer nu att behöva be dig att ångra ändringarna du gjorde i steg 4 i den guiden (Draft Block Toggle), eftersom vi kommer att extrapolera den funktionen och tillämpa den på alla våra block.

Om du inte har följt den guiden, se till att du följer den upp till steg 4 först, eftersom den här guiden följer direkt på den.

Skapa komponenter av högre ordning

Higher Order Components (HoC) används i React för att linda en befintlig komponent och antingen skicka funktionalitet eller rekvisita till den komponenten. De kallas HoCs eftersom de infogas i DOM före den befintliga komponenten, eller så kan man säga i en "Högre ordning".

Vi kommer att skapa två nya HoCs, så skapa en ny mapp i din plugin som heter componentsoch skapa följande två filer:

• /components/withInspectorControls.js
• /components/withIsBlockDraft.js

med InspectorControls

Öppna /components/withInspectorControls.jsoch lägg till följande kod:

Du kanske känner igen den här koden från steg 4 i sidofältsguiden. Det är ungefär samma kod, förutom att vi har packat in den i createHigherOrderComponent.

Den createHigherOrderComponenttillåter oss att komma åt BlockEditdetta är den ursprungliga redigeringsfunktionen för blocket som denna komponent kommer att radbryta. Vi kommer att upptäcka hur detta skickas in när vi skapar filtren inom kort.

withIsBlockDraft

Öppna /components/withIsBlockDraft.jsoch klistra in följande kod:

Detta createHigherOrderComponenttillåter oss att komma åt BlockListBlockvilket låter oss skicka attribut till editorblocket. Vi använder den här för att ställa in en ‘draft-block’-klass till omslaget om Draft Block-växlingen har ställts in. Detta återskapar det vi tidigare hade lagt till i redigeringsmetoden i steg 4 i sidofältsguiden.

Återigen måste vi ställa in ett filter för att BlockListBlockskickas till denna kontroll.

Ställ in filtren

Lägg till följande högst upp i /src/index.jsfilen:

import { addFilter } from '@wordpress/hooks';

import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';

Vi borde verkligen tänka på att ändra strukturen på vårt plugin så att koden som registrerar blocket importeras från en annan fil, men för enkelhetens skull kommer vi att använda samma fil.

Filtrera attributen

Lägg till följande kod i samma fil:

Det här filtret lägger till ytterligare attribut till alla block i bygget. I teorin skulle vi kunna filtrera detta till att bara vara för vissa block, men vi kommer inte att göra det för vårt exempel.

Om vi ​​ville begränsa det här filtret till vissa block skulle vi kunna göra det så här:

const { attributes, name } = settings;
if ('core/paragraph' !== name) {
  return;
}

Filtrera InspectorControls

Lägg till följande kod i /src/index.jsfilen:

addFilter(
    'editor.BlockEdit',
    'wholesome-plugin/block-draft-inspector',
    withInspectorControls,
);

Här filtrerar vi BlockEditså att det går igenom detta till vår HoC som vi skapade tidigare.

Om vi ​​ville begränsa detta filter till vissa block skulle vi göra följande inom HoC :

Filtrera BlockListBlocket

Låt oss slutligen lägga till filtret för vår BlockListBlock:

addFilter(
    'editor.BlockListBlock',
    'wholesome-plugin/block-draft-class',
    withIsBlockDraft
);

Återigen, om du vill begränsa detta block kan du göra detta inuti HoC.

Lägg till PHP och SCSS

Lägg till följande för /editor.scssatt få vår Draft-banner att se snygg ut (detta kan göras mycket bättre, men det här är bara ett exempel).

.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;
        }
    }
}

Lägg till följande i rotfilen för plugin-programmet (i vårt fall 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 );

Detta kommer att stoppa utkastsblocken från att matas ut på fronten.

Att se det i aktion

Kom ihåg att kompilera med npm startoch vi kan nu ställa in alla typer av block till ett utkastblock:

Ställa in och avaktivera utkastsblock

• Ta en titt på att skapa kapslade underordnade block med InnerBlockskomponenten
• Ta en titt på hur du använder post-metafält i Gutenberg-block
• Testa att lägga till kontroller i inläggets sidofält