php - How to get the post title inside a custom block in a loop? block.js

admin管理员组

文章数量:1122846

I have created a custom post type and I want to create blocks that display its values. To start with, I created a placeholder that gets replaced with the correct values using PHP.

Everything works as expected on the frontend. However, I also want to display the correct values in the admin (block editor), but I'm struggling to get it to work.

I need possibly the postId but i can't get it.

---

This is an example of one of my blocks:

custom-blocks.js:

registerBlockType('custom-plugin/custom-name', {
    title: 'Name',
    category: 'common',
    edit: function(props) {
        const blockProps = useBlockProps();

        const postTitle = 'how to get this???';

        return createElement(
            'p',
            blockProps,
            postTitle
        );
    },
    save: function() {
        const blockProps = useBlockProps.save();

        return createElement(
            'p',
            blockProps,
            '[[ Gruppe/Titel ]]'
        );
    }
});

custom-posttype.php:

register_block_type('custom-plugin/custom-name', array(
     'editor_script' => 'custom-blocks',
     'render_callback' => array($this, 'render_titel_block'),
));

public function render_titel_block($args = [], $content = '') {
    if(is_array($args)) $args = (object) $args;
    $block_id = '[[ Gruppe/Titel ]]';

    $post = isset($args->post) ? $args->post : (isset($args->post_id) ? get_post($args->post_id) : $GLOBALS['post']);

    if (!$post instanceof WP_Post || $post->post_type !== $this->post_type) {
        return 'Error';
    }

    $titel = get_the_title($post->ID) ?: '-';
    $titel = esc_html($titel);

    $html = $content;
    if (strpos($html, $block_id) !== false) {
        $html = str_replace($block_id, $titel, $html);
    }

    return $html;
}

The custom block is nested in core/query -> custom/card-layout.

I have created a custom post type and I want to create blocks that display its values. To start with, I created a placeholder that gets replaced with the correct values using PHP.

Everything works as expected on the frontend. However, I also want to display the correct values in the admin (block editor), but I'm struggling to get it to work.

I need possibly the postId but i can't get it.

---

This is an example of one of my blocks:

custom-blocks.js:

registerBlockType('custom-plugin/custom-name', {
    title: 'Name',
    category: 'common',
    edit: function(props) {
        const blockProps = useBlockProps();

        const postTitle = 'how to get this???';

        return createElement(
            'p',
            blockProps,
            postTitle
        );
    },
    save: function() {
        const blockProps = useBlockProps.save();

        return createElement(
            'p',
            blockProps,
            '[[ Gruppe/Titel ]]'
        );
    }
});

custom-posttype.php:

register_block_type('custom-plugin/custom-name', array(
     'editor_script' => 'custom-blocks',
     'render_callback' => array($this, 'render_titel_block'),
));

public function render_titel_block($args = [], $content = '') {
    if(is_array($args)) $args = (object) $args;
    $block_id = '[[ Gruppe/Titel ]]';

    $post = isset($args->post) ? $args->post : (isset($args->post_id) ? get_post($args->post_id) : $GLOBALS['post']);

    if (!$post instanceof WP_Post || $post->post_type !== $this->post_type) {
        return 'Error';
    }

    $titel = get_the_title($post->ID) ?: '-';
    $titel = esc_html($titel);

    $html = $content;
    if (strpos($html, $block_id) !== false) {
        $html = str_replace($block_id, $titel, $html);
    }

    return $html;
}

The custom block is nested in core/query -> custom/card-layout.

• php
• custom-post-types
• loop
• block-editor
• core

Share Improve this question edited Sep 19, 2024 at 12:42 Ghiath Sardast asked Sep 19, 2024 at 12:40 Ghiath SardastGhiath Sardast 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

We can utilize the useSelect hook from the @wordpress/data package to display the post title in custom block within the WordPress block editor. useSelect hook allows us to fetch the post data using the current post ID within the block editor. Here’s the updated code of custom-blocks.js to achieve this.

import { registerBlockType } from '@wordpress/blocks';
import { createElement } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';

registerBlockType('custom-plugin/custom-name', {
    title: 'Name',
    category: 'common',
    edit: function(props) {
        const blockProps = useBlockProps();

        // Here we are useing useSelect hook to get the current post ID and title.
        const postId = props.clientId.split('-')[0]; // This is to get the post ID from clientId.
        const postTitle = useSelect(select => {
            return select('core/editor').getEditedPostAttribute('title');
        }, [postId]);

        return createElement(
            'p',
            blockProps,
            postTitle || 'No title available'
        );
    },
    save: function() {
        const blockProps = useBlockProps.save();

        return createElement(
            'p',
            blockProps,
            '[[ Gruppe/Titel ]]'
        );
    }
});

本文标签： phpHow to get the post title inside a custom block in a loop blockjs