Ich habe einen benutzerdefinierten Beitragstyp mit einigen erweiterten benutzerdefinierten Feldern. Ich versuche, auf diese benutzerdefinierten Feldwerte innerhalb eines Gutenberg-Blocks zuzugreifen.
Ich habe folgendes zu meinem hinzugefügt register_post_type
Funktion
'show_in_rest' => true,
'supports' => array( 'title', 'editor', 'custom-fields' ),
Ich kann die benutzerdefinierten Posts erfolgreich aus meinem Gutenberg-Block abrufen, indem ich Folgendes verwende:
select('core').getEntityRecords('postType', 'customType')
aber ich sehe die benutzerdefinierten Felder oder ihre Werte nicht.
Hier ist das JavaScript meines Blocks:
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { withSelect } = wp.data;
registerBlockType('cgb/block-press-block', {
title: __('Press Block'),
icon: 'awards',
category: 'common',
keywords: [
__('press-block'),
],
edit: withSelect((select) => {
return {
posts: select('core').getEntityRecords('postType', 'press')
};
})(({posts}) => {
return <p>Content</p>;
}),
});
Gibt es eine Möglichkeit, auf die erweiterten Feldwerte des benutzerdefinierten Beitrags auf der Editorseite zuzugreifen, oder eine Möglichkeit, diese Daten an den Block zu übergeben?
Da Sie bereits Advanced Custom Fields verwenden, können Sie, anstatt Ihren eigenen Block unabhängig zu registrieren, verwenden acf_register_block
stattdessen? Auf diese Weise können Sie in PHP-basierten Vorlagen auf Felder aus ACF zugreifen.
Hier einige nützliche Links dazu:
Dieser Code stammt aus dem obigen ACF-Blogbeitrag und wird hier der Vollständigkeit halber veröffentlicht, falls sich der obige Link ändert.
Registrieren Sie den ACF-Block:
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check function exists
if( function_exists('acf_register_block') ) {
// register a testimonial block
acf_register_block(array(
'name' => 'testimonial',
'title' => __('Testimonial'),
'description' => __('A custom testimonial block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'testimonial', 'quote' ),
));
}
}
Eine Callback-Funktion zum Einbinden Ihrer Blockvorlage:
function my_acf_block_render_callback( $block ) {
// convert name ("acf/testimonial") into path friendly slug ("testimonial")
$slug = str_replace('acf/', '', $block['name']);
// include a template part from within the "template-parts/block" folder
if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
}
}
Der HTML-Code Ihres Blocks:
<?php
/**
* Block Name: Testimonial
*
* This is the template that displays the testimonial block.
*/
// get image field (array)
$avatar = get_field('avatar');
// create id attribute for specific styling
$id = 'testimonial-' . $block['id'];
// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>
<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
<p><?php the_field('testimonial'); ?></p>
<cite>
<img src="https://stackoverflow.com/questions/56029474/<?php echo $avatar["url']; ?>" alt="https://stackoverflow.com/questions/56029474/<?php echo $avatar["alt']; ?>" />
<span><?php the_field('author'); ?></span>
</cite>
</blockquote>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php the_field('background_color'); ?>;
color: <?php the_field('text_color'); ?>;
}
</style>
Dadurch entsteht eine Basis Referenzen Block als einfacher Ausgangspunkt. ACF übernimmt die JavaScript-Handhabung innerhalb von Gutenberg, sodass Sie sich nur um die PHP-Seite der Dinge kümmern müssen.
Das heißt, Sie können verwenden get_field()
Und the_field()
funktionieren wie wir (ACF-Fans) sind gewöhnt an. Das Mischen von ACF und Gutenberg ohne diese native Methode kann Kopfschmerzen verursachen und möglicherweise ein Plugin erfordern, um über die WordPress-REST-API auf Felder zuzugreifen.
Hinweis: ACF-Unterstützung für Gutenberg-Blöcke erfordert ACF-Version 5.8 oder höher.