Aikaisemmassa artikkelissa kävimme läpi, miten rakennetaan ja lisätään kenttiä metatietoja varten natiivisti WordPressin lohkoeditorissa. Esimerkissä kävimme läpi, miten metakentille rakennetaan natiivi UI. Sisältötyyppimme oli ”Toimistot”, jolle lisäsimme kolme kenttää erilaisia metatietoa varten:
- Sähköposti
- Puhelinnumero
- Verkkosivuston URL
Tällä saatiin custom-metatiedot näkymään lohkoeditorin puolella. Mutta miten näytämme metakenttien tiedot sivuston käyttäjille, kun käytämme lohkoteemaa? Voisimme rakentaa kustomoidun lohkon, mutta se kuulostaa turhan työläältä.
WordPress Block Bindings API
Ratkaisun tarjoaa WordPressin Block Bindings API. Se on rajapinta, jonka avulla metakenttien dataa voi lukea ja liittää Coren lohkoihin – tai mitä tahansa dataa, jota PHP:ssa määritellään.
Huomaa, että tällä hetkellä (WordPress-versio 6.8) vain seuraavat Core-lohkot tukevat Block Bindings APIa:
- Kuva-lohko
- tukee url-, alt- ja title-attribuutteja
- Kappale-lohko
- tukee content-attribuuttia
- Otsikko-lohko
- tukee content-attribuuttia
- Painike-lohko
- tukee url-, text-, linkTarget- ja rel-attribuutteja
Käytetään Kappale-lohkoa metakenttien tietojen yhdistämiseen
Käydään ensin läpi, miten metakenttien tiedot saadaan dynaamisesti Kappale-lohkoon. Voimme esimerkiksi luoda single-office.html-mallin, jossa luomme pohjan datan käyttöön seuraavien vaiheiden mukaisesti.
Kappaleen markup näyttää oletuksena tältä:
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->Seuraavaksi lisätään manuaalisesti markuppiin Block Bindings API -tiedot, johon haluamme liittää toimiston sähköpostiosoitteen:
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"mt-features/office-email",
"args":{
"key":"office_email"
}
}
}
}
} -->
<p></p>
<!-- /wp:paragraph -->Huomaa erityisesti lähde: "source":"mt-features/office-email".
Käytetään tätä uniikkia ID:tä seuraavassa vaiheessa.
Rekisteröidään kustomoitu lähde register_block_bindings_source -funktiolla
Esimerkkikappaleessamme lähteenä käytetään nimeä mt-features/office-email. PHP:ssä voimme rekisteröidä tämän mukautetun lähteen register_block_bindings_source-funktiolla.
add_action( 'init', 'prefix_register_block_bindings' );
function prefix_register_block_bindings() {
register_block_bindings_source(
'mt-features/office-email',
array(
'label' => __( 'Office email', 'textdomain' ),
'get_value_callback' => 'prefix_bindings_callback',
)
);
}Huomaa tässä sama lähteen nimi: mt-features/office-email.
Tämän jälkeen voimme hakea PHP:lla oikean metatiedon callback-funktiolla, prefix_bindings_callback.
Metatiedon logiikka callback-funktiossa
Seuraavaksi tehdään callback-funktio, joka palauttaa toimiston sähköpostiosoitteen:
function prefix_bindings_callback( $source_args ) {
// Get the data from the post meta.
$office_email = get_post_meta( get_the_ID(), 'office_email', true ) ?? false;
// Link to the email address.
if ( $office_email ) {
$office_email = sprintf(
'<a href="mailto:%s">%s</a>',
esc_html( $office_email ),
esc_html( $office_email )
);
}
// Return the data.
return $office_email;
}Huom! Jos toimiston sähköpostiosoitetta ei ole lisätty, merkinnässä on edelleen tyhjä kappale (<p></p>). Tämä on Block Bindings API:n haittapuoli, mutta joissakin tapauksissa riittävät hyvät oletusarvot, kuten 10up-artikkelissa mainitaan.
Koodiesimerkki löytyy Githubista.
