如何制作下拉列表控件来获取自定义帖子类型的名称？

Question

如何制作下拉列表控件来获取自定义 posts 类型的名称？在我的项目中，我想 select post 键入名称并在下拉列表 select 或我的自定义 Gutenberg 块中获取它！..我该怎么做？

Answer 1

$post_types   = get_post_types( [
       'public'   => true,
        '_builtin' => false,
], 'objects', 'and' );

 <select name="post-types" class="form-control">
    <?php
    foreach ( $post_types as $post_type ) {
        ?>
            <option value="<?php echo esc_attr($post_type->name); ?>">
                <?php echo esc_html($post_type->label) ?>
            </option>
        <?php
    }
    ?>
</select>

如果您想将变量（在本例中为：CPT）传递给块脚本，您可以使用 wp_localize_scripts :

wp_enqueue_script('gutenberg-select-cpt-block', $pathToScript, [], null, 
   true);
wp_localize_script(
  'gutenberg-select-cpt-block',
  YOURJSOBJECT,
  ['post_types' => $post_types] <--- array of data you want to pass
);

Answer 2

如果为 Gutenberg 块的 edit() 函数创建下拉列表 (select)，可以通过 [=14=13=] 检索已注册的 post 类型=] 在 JavaScript 中。一个例子是 the dropdown in the Query Block 到 select 一个 Post 类型。

下面是一个简化示例，它使用 <SelectControl/> 显示所有可见 post 类型的列表，并启用 selected postType 来保存方块属性。

block.json

{
    ...
    "attributes": {
        "postType": {
            "type": "string",
            "default": "post"
        }
    }
}

edit.js

import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { SelectControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';


export default function Edit({ attributes, setAttributes }) {
    // postType defined in block.json
    const { postType } = attributes;

    // useSelect to retrieve all post types
    const postTypes = useSelect(
        (select) => select(coreStore).getPostTypes({ per_page: -1 }), []
    );

    // Options expects [{label: ..., value: ...}]
    var postTypeOptions = !Array.isArray(postTypes) ? postTypes : postTypes
        .filter(
            // Filter out internal WP post types eg: wp_block, wp_navigation, wp_template, wp_template_part..
            postType => postType.viewable == true)
        .map(
            // Format the options for display in the <SelectControl/>
            (postType) => ({
                label: postType.labels.singular_name,
                value: postType.slug, // the value saved as postType in attributes
            })
        );

    return (
        <div {...useBlockProps()}>
            <SelectControl
                label="Select a Post Type"
                value={postType}
                options={postTypeOptions}
                onChange={(value) => setAttributes({ postType: value })}
            />
        </div>
    );
}

为编辑器使用 JavaScript 而不是回退到 PHP 的优点是您可以通过使用像 <SelectControl/> 这样的 Gutenberg 控件来保持 UI 的一致性。

Settings Sidebar 可能是放置 <SelectControl/> 的好地方，具体取决于您的目标。

如何制作下拉列表控件来获取自定义帖子类型的名称？

How can I make a dropdown list control that fetches names of custom posts types?

javascript

php

wordpress

wordpress-gutenberg

gutenberg-blocks