Snippets Gutenberg: Guía práctica para desarrolladores (Parte 1)

Estos snippets son fragmentos de código prácticos para desarrolladores que trabajan con el editor de bloques de WordPress (Gutenberg). Están pensados para:

• Ahorrar tiempo al reutilizar código probado en proyectos reales.
• Aprender buenas prácticas en el uso de hooks como useSelect o useEntityProp.
• Extender el editor con funciones avanzadas (ej. trabajar con metadatos, subir imágenes, definir puntos focales, etc.).
• Construir bloques personalizados sin tener que partir desde cero.

Obtener el PostType actual y los meta en Gutenberg

Este snippet permite identificar el tipo de post en el que estás y acceder a sus meta fields usando los hooks de la data store de WordPress.

import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';

const postType = useSelect((select) => select('core/editor').getCurrentPostType(), []);
const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

Media Upload con Focal Point Picker

Este snippet permite a los usuarios subir una imagen desde el editor de bloques y además seleccionar el punto focal para controlar cómo se muestra el fondo.

import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { FocalPointPicker, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const MyMediaField = ({ bg, updateMeta }) => {
	return (
		<>
			{/* Media Upload Buttons */}
			<MediaUploadCheck>
				<MediaUpload
					onSelect={(media) => {
						updateMeta('zd_title_bar_bg', {
							id: media?.id,
							url: media?.url,
							position: bg?.position || { x: 0.5, y: 0.5 },
						});
					}}
					allowedTypes={['image']}
					value={bg?.id}
					render={({ open }) => (
						<div style={{ marginTop: '16px', display: 'flex', gap: '8px' }}>
							<Button onClick={open} isSecondary>
								{bg?.id
									? __('Change Background', 'gutenberg')
									: __('Add Background', 'gutenberg')}
							</Button>
							{bg?.id && (
								<Button
									onClick={() => updateMeta('zd_title_bar_bg', null)}
									isDestructive
									isSecondary
								>
									{__('Remove Background', 'gutenberg')}
								</Button>
							)}
						</div>
					)}
				/>
			</MediaUploadCheck>

			{/* Focal Point Picker */}
			{bg?.url && (
				<div style={{ marginTop: '12px' }}>
					<FocalPointPicker
						label={__('Adjust Focal Point', 'gutenberg')}
						url={bg.url}
						value={{
							x: bg?.position?.x ?? 0.5,
							y: bg?.position?.y ?? 0.5,
						}}
						onChange={(value) =>
							updateMeta('zd_title_bar_bg', { ...bg, position: value })
						}
					/>
				</div>
			)}
		</>
	);
};

export default MyMediaField;

Consultar Posts con useEntityRecords

Este snippet muestra cómo usar useEntityRecords para traer posts dinámicamente en un bloque, aplicando filtros personalizados desde queryArgs.

import { useEffect, useState } from '@wordpress/element';
import { useEntityRecords } from '@wordpress/core-data';
import { useBlockProps } from '@wordpress/block-editor';

// Utilidad simple para validar si es JSON
const isJSON = (str) => {
	try {
		JSON.parse(str);
		return true;
	} catch (e) {
		return false;
	}
};

const MyPostsBlock = ({ postType = 'post', queryArgs = '{}' }) => {
	const [arr, setArr] = useState({});

	// Parsear los argumentos dinámicos
	useEffect(() => {
		const jsonArray =
			queryArgs && isJSON(queryArgs) ? JSON.parse(queryArgs) : {};
		setArr(jsonArray);
	}, [queryArgs]);

	// Hacer la consulta de posts
	const { hasResolved, records } = useEntityRecords(
		'postType',
		postType,
		arr
	);

	// Props del bloque (para clase CSS, etc.)
	const blockProps = useBlockProps({
		className: 'wrapper-display-posts',
	});

	// Renderizado
	if (!hasResolved) {
		return <div {...blockProps}>Cargando...</div>;
	}

	if (!records?.length) {
		return <div {...blockProps}>No hay resultados</div>;
	}

	return (
		<div {...blockProps}>
			<ul>
				{records.map((post) => (
					<li key={post.id}>{post.title?.rendered}</li>
				))}
			</ul>
		</div>
	);
};

export default MyPostsBlock;