Lisää säätimiä ydin- ja kolmannen osapuolen lohkon sivupalkkiin suodattimilla ja korkeamman järjestyksen komponenteilla

Edellisessä oppaassamme tarkastelimme mukautettujen lohkojen lisäämistäInspectorControls, jotta voimme käyttää lohkon sivupalkin ohjaimia. Tässä oppaassa aiomme rakentaa sen ja lisätä vaihtosäätimen kaikkien lohkojemme lohkosivupalkkiin, mukaan lukien kaikki käyttämämme ydin- ja kolmannen osapuolen lohkot.

Tässä oppaassa aiomme luoda "luonnoslohko"-toiminnon, joka sisältyi Wholesome Publishing -laajennukseen.

Edellytykset

• Olet noudattanut Pluginin luominen WordPress Block Editor (Gutenberg) -opasta
• Olet noudattanut Lisää sivupalkki mukautettuun WordPress-lohkoon InspectorControls- oppaan avulla

Valmistautuminen tähän oppaaseen

Jos olet noudattanut Lisää sivupalkki -opasta, hienoa. Mutta minun on nyt pyydettävä sinua kumoamaan oppaan vaiheessa 4 tekemäsi muutokset (luonnoslohkon vaihto), koska aiomme ekstrapoloida tämän toiminnon ja soveltaa sitä kaikkiin lohkoihimme.

Jos et ole noudattanut tätä opasta, varmista, että noudatat sitä ensin vaiheeseen 4 asti, koska tämä opas jatkaa suoraan siitä.

Luo korkeamman tason komponentteja

Korkeamman järjestyksen komponentteja (HoC) käytetään Reactissa käärimään olemassa olevan komponentin ympärille ja joko välittämään toimintoja tai lisäosia kyseiselle komponentille. Niitä kutsutaan HoC:iksi, koska ne on lisätty DOM:iin ennen olemassa olevaa komponenttia, tai voit sanoa "korkeammassa järjestyksessä".

Aiomme luoda kaksi uutta HoC:tä, joten luo laajennukseen uusi kansio componentsja luo seuraavat kaksi tiedostoa:

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

InspectorControlsilla

Avaa /components/withInspectorControls.jsja lisää seuraava koodi:

Saatat tunnistaa tämän koodin sivupalkkioppaan vaiheesta 4. Se on melkein sama koodi, paitsi että olemme käärineet sen createHigherOrderComponent.

createHigherOrderComponentAntaa meille pääsyn tähän on BlockEditalkuperäinen muokkaustoiminto lohkolle, jonka tämä komponentti käärii. Selvitämme, kuinka tämä välitetään, kun luomme suodattimet pian.

kanssa IsBlockDraft

Avaa /components/withIsBlockDraft.jsja liitä seuraava koodi:

Tämä createHigherOrderComponentantaa meille pääsyn, BlockListBlockjonka avulla voimme siirtää attribuutteja editorilohkon kääreeseen. Käytämme sitä tässä asettamaan ‘draft-block’-luokan kääreelle, jos Draft Block -kytkin on asetettu. Tämä luo uudelleen sen, mitä olimme aiemmin lisänneet muokkausmenetelmään sivupalkkioppaan vaiheessa 4 .

Jälleen meidän on asetettava suodatin, joka BlockListBlocksiirretään tähän ohjaukseen.

Aseta suodattimet

Lisää tiedoston yläosaan /src/index.jsseuraava:

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

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

Meidän pitäisi todellakin harkita liitännäisrakenteen muuttamista niin, että lohkon rekisteröivä koodi tuodaan toisesta tiedostosta, mutta yksinkertaisuuden vuoksi käytämme samaa tiedostoa.

Suodata attribuutit

Lisää samaan tiedostoon seuraava koodi:

Tämä suodatin lisää lisäattribuutteja kaikkiin koontilohkoihin. Teoriassa voisimme suodattaa tämän vain tietyille lohkoille, mutta emme aio tehdä tätä esimerkkiä varten.

Jos halusimme rajoittaa tämän suodattimen tiettyihin lohkoihin, voisimme tehdä sen seuraavasti:

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

Suodata InspectorControls

Lisää tiedostoon seuraava koodi /src/index.js:

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

Tässä suodatamme BlockEditniin, että se välittää tämän aiemmin luomaanmme HoC:hen.

Jos haluamme rajoittaa tämän suodattimen tiettyihin lohkoihin, toimisimme seuraavasti HoC :ssä:

Suodata BlockListBlock

Lisätään lopuksi suodatin BlockListBlock:

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

Jälleen, jos haluat rajoittaa tätä lohkoa, voit tehdä tämän HoC:n sisällä.

Lisää PHP ja SCSS

Lisää seuraava, /editor.scssjotta luonnosbannerimme näyttäisi kauniilta (tämän voi tehdä paljon paremmin, mutta tämä on vain esimerkki).

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

Lisää seuraava laajennuksen juuritiedostoon (tapauksessamme 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 );

Tämä lopettaa luonnoslohkojen tulostuksen käyttöliittymässä.

Sen näkeminen toiminnassa

Muista kääntää npm startja voimme nyt asettaa minkä tahansa tyyppisen lohkon luonnoslohkoksi:

Luonnoslohkojen asettaminen ja poistaminen

• Tutustu sisäkkäisten alilohkojen luomiseen InnerBlockskomponentin avulla
• Tutustu post-metakenttien käyttöön Gutenberg-lohkoissa
• Kokeile lisätä ohjaimia viestien sivupalkkiin