Si crea una lista desplegable (seleccionar) para la función edit() de un bloque de Gutenberg, los tipos de publicaciones registradas se pueden recuperar con getPostTypes() a través useSelect() en JavaScript. Un ejemplo de esto es el menú desplegable en el bloque de consulta para seleccionar un tipo de publicación.

A continuación se muestra un ejemplo simplificado que utiliza un <SelectControl/> para mostrar una lista de todos los tipos de publicaciones visibles y permite que un postType seleccionado se guarde en los atributos de los bloques.

bloque.json

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

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

La ventaja de usar JavaScript para el Editor en lugar de recurrir a PHP es que puede mantener la IU consistente usando controles de Gutenberg como <SelectControl/> .

La barra lateral de configuración puede ser un buen lugar para colocar su <SelectControl/> dependiendo de su objetivo.

$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>

Si desea pasar variables (en este ejemplo: CPT) para bloquear scripts, puede usar 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 );