@wordpress/scripts সহ কাস্টম গুটেনবার্গ ব্লক

আপনি যদি কখনও এডিটরে “ব্লক খালি দেখাচ্ছে” (Block rendered as empty) দেখে থাকেন, অথবা এমন কোনো ব্লক দেখে থাকেন যা লোকালি কাজ করলেও প্রোডাকশনে গিয়ে উধাও হয়ে যায়, তাহলে সমস্যাটি প্রায় সবসময় একই জায়গা থেকে আসে: একটি দুর্বলভাবে সংযুক্ত বিল্ড, ত্রুটিপূর্ণভাবে সংরক্ষিত অ্যাসেট, অথবা আপনার ব্লকটি যখন সার্ভার রেন্ডারের উপর নির্ভরশীল, তখন সেটির অনুপস্থিতি।

সমস্যাটি / প্রয়োজন

তুমি চাও তৈরি একটি পরিষ্কার, রক্ষণাবেক্ষণযোগ্য, এবং সামঞ্জস্যপূর্ণ কাস্টম গুটেনবার্গ ব্লক ওয়ার্ডপ্রেস ৬.৯.৪ (এপ্রিল ২০২৬), প্রতিটি পুনরাবৃত্তির জন্য ম্যানুয়ালি একটি স্ক্রিপ্ট কোয়েরি তৈরি না করেই। সাধারণ প্রয়োজনীয়তা: একটি "অ্যালার্ট বক্স" ব্লক (বা "সিটিএ", "এফএকিউ", "প্রোডাক্ট", ইত্যাদি) যার মধ্যে থাকবে:

• un রিঅ্যাক্ট এডিটর (পরিদর্শক নিয়ন্ত্রণ, রং, বিকল্প)
• un সামনে নির্ভরযোগ্য করে তোলা হয়েছে (ভিজিটর-সাইড JS রানটাইমের উপর নির্ভর না করে),
• une আধুনিক নির্মাণ শৃঙ্খল মাধ্যমে @wordpress/scripts (ওয়েবপ্যাক/বেবেল ব্যবহারের জন্য প্রস্তুত),
• une সম্পদ নিবন্ধন শক্তিশালী মাধ্যমে block.json এবং মেটাডেটা।

অবশেষে, আপনি জানতে পারবেন কীভাবে একটি সম্পূর্ণ ব্লক সরবরাহ করতে হয়। প্লাগ লাগানোপ্রাসঙ্গিক ক্ষেত্রে বিল্ড, ভার্সনিং, আন্তর্জাতিকীকরণ এবং সার্ভার-সাইড রেন্ডারিং (ডাইনামিক ব্লক) সহ। আমি ডাইনামিক ব্লকের উপর জোর দিচ্ছি কারণ আমি প্রায়শই দেখেছি যে, যখনই কন্টেন্টকে গ্লোবাল অপশন, একটি CPT, বা একটি কনটেক্সটের উপর নির্ভর করতে হয়, তখনই "স্ট্যাটিক" ব্লকগুলি নিয়ন্ত্রণ করা কঠিন হয়ে পড়ে।

দ্রুত সারসংক্ষেপ

• আমরা একটি প্লাগইন তৈরি করি যা এর মাধ্যমে একটি ব্লক সংরক্ষণ করে। block.json et register_block_type().
• আমরা ব্যবহার করি @wordpress/scripts নির্মাণের জন্য src/index.js Vers build/index.js + ফাইল .asset.php.
• আমরা একটি ব্লক লিখি সম্পাদক-পক্ষের UI (জেএস) এবং সার্ভার-সাইড রেন্ডারিং (পিএইচপি), ফ্রন্ট-এন্ড/এডিটর অসঙ্গতি এড়ানোর জন্য।
• আমরা ফিল্ডগুলির মাধ্যমে CSS/JS লোড করি। editorScript, style, editorStyle du block.json.
• আমরা প্রোডাকশনে যে বিষয়গুলোতে সমস্যা হয়, সেগুলো নিয়ে আলোচনা করি: পাথ, ক্যাশ, ডিপেন্ডেন্সি, পিএইচপি ভার্সন এবং রেজিস্ট্রেশন হুক।

কখন এই সমাধানটি ব্যবহার করবেন

• আপনি একটি ব্লক চান পুনর্ব্যবহারযোগ্য sur plusieurs সাইটগুলো, একটি প্লাগইন হিসেবে সরবরাহ করা হয়।
• আপনার একটি প্রয়োজন স্থিতিশীল করা হয়েছে ফ্রন্ট এন্ডের ক্ষেত্রে (এসইও, পারফরম্যান্স, ক্যাশে সামঞ্জস্যতা): ডাইনামিক ব্লক ব্যবহার করার পরামর্শ দেওয়া হয়।
• আপনি কোয়েরি স্নিপেট কপি-পেস্ট করা এড়িয়ে চলতে এবং প্রমিত প্রবাহ অনুসরণ করতে চান। ওয়ার্ডপ্রেস : block.json নির্মাণ করুন।
• আপনার ব্লকটি বিদ্যমান বিষয়বস্তুকে অক্ষুণ্ণ রেখেই বিকশিত হওয়া উচিত (নতুন বিকল্প, বৈচিত্র্য ও শৈলী যোগ করে)।
• আপনারা দলবদ্ধভাবে কাজ করেন: এর মাধ্যমে নির্মাণ @wordpress/scripts পরিবেশকে মানসম্মত করে।

কখন এই সমাধানটি ব্যবহার করা উচিত নয়

• আপনার শুধু সাধারণ বিষয়বস্তু প্রয়োজন: একটি ব্লক প্যাটার্ন (ব্লক প্যাটার্ন) প্রায়শই JS ছাড়াই যথেষ্ট। দেখুন ব্লক প্যাটার্ন.
• আপনি একটি জটিল কিন্তু অযৌক্তিক বিন্যাস খুঁজছেন: একটি গ্রুপ ব্লক গ্লোবাল স্টাইল ও এর বিভিন্ন রূপ একটি কাস্টম ব্লককে প্রতিস্থাপন করতে পারে।
• আপনি কোনো বিল্ড স্টেপ (CI/CD, Node) পরিচালনা করতে পারছেন না: এক্ষেত্রে, একটি বিল্ডার প্লাগইন (scaffold) ব্যবহার করুন। বিল্ড ফোল্ডারটি কমিট করুন এবং প্রোডাকশনে নোড চালানো পরিহার করুন।
• আপনি এমন একটি সীমাবদ্ধ পরিবেশে আছেন যেখানে নোড (Node) নিষিদ্ধ: আপনি কেবল বিল্ড করা ফাইলগুলো সরবরাহ করতে পারবেন, কিন্তু ডেভেলপমেন্টের সুযোগটি হারাবেন।

শুরু করার আগে পূর্বশর্তসমূহ /

আমি ধরে নিচ্ছি আপনি ওয়ার্ডপ্রেস ৬.৯.৪ এবং পিএইচপি ৮.১+ এর জন্য ডেভেলপ করছেন। অনেক পুরোনো টিউটোরিয়াল এখন আর কাজ করে না কারণ সেগুলোতে ব্যবহার করা হয় না... block.json সঠিকভাবে অথবা ভুলে যান .asset.php.

• ওয়ার্ডপ্রেস : ৬.৯.৪ (বা আরও সাম্প্রতিক)।
• পিএইচপি ৮.১+ (সুপারিশকৃত)। সূত্র: পিএইচপি সমর্থিত সংস্করণ.
• node.js একটি সাম্প্রতিক LTS (আপনার স্ট্যাকের উপর নির্ভর করে ১৮/২০/২২)। EOL সংস্করণগুলি এড়িয়ে চলুন।
• প্রবেশ একটি স্টেজিং/লোকাল এনভায়রনমেন্ট। ব্যাকআপ ছাড়া সরাসরি প্রোডাকশনে ব্লক বিল্ড পরীক্ষা করবেন না।
• টুলস :
  • WP-CLI (ঐচ্ছিক কিন্তু দরকারি)।
  • একটি লগ প্লাগইন (বা অ্যাক্সেস) debug.log).

সতর্কতা:

• সক্ষম করা WP_DEBUG et WP_DEBUG_LOG আপনার পরীক্ষার পরিবেশে।
• আপনি যদি কোনো ক্যাশে (প্লাগইন, ভার্নিশ, ক্লাউডফ্লেয়ার) ব্যবহার করেন, তবে তা মুছে ফেলার পরিকল্পনা করুন: আমি প্রায়শই দেখেছি যে, যখন আসলে একটি অতিরিক্ত ক্যাশে থাকে, তখন ব্লক CSS লোড হয় না।

দরকারি দাপ্তরিক নথি:

• ব্লক মেটাডেটা (block.json)
• @wordpress/scripts
• register_block_type()

সরল পন্থা (এবং কেন তা পরিহার করা উচিত)

২০২৬ সালেও আমি সেই চিরায়ত জিনিসটি দেখতে পাই: একটি বড় 'হাতে তৈরি' ব্লক। wp_enqueue_script মধ্যে wp_enqueue_scriptsছাড়া .asset.phpঘোষিত নির্ভরতা ছাড়াই, এবং কখনও কখনও এমনকি ছাড়াই block.jsonএটা আমার ক্ষেত্রে ঠিকঠাক কাজ করে, কিন্তু ওয়ার্ডপ্রেস/গুটেনবার্গ আপডেটের পর নষ্ট হয়ে যায়।

একটি সরল উদাহরণ (পুনরাবৃত্তি করা হবে না)

<?php
// Mauvaise pratique : charge partout, pas seulement dans l'éditeur, dépendances non gérées.
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script(
		'mon-bloc',
		plugins_url( 'build/index.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element', 'wp-editor' ), // Souvent faux/incomplet.
		'1.0.0',
		true
	);
} );

কেন এটি একটি সমস্যা:

• সম্পাদন ব্লকের JS পুরো ফ্রন্ট এন্ডে চলে যায়, এমনকি কোনো ব্লক ব্যবহার না করা হলেও।
• নির্ভরতা হাতে তৈরি করা তালিকাটি সবসময় ভুল হয়। ওয়ার্ডপ্রেস একটি .asset.php ঠিক সেই কারণেই।
• রক্ষণাবেক্ষণ আপনি মেটাডেটা ব্যবহার না করে অ্যাসেট রেজিস্ট্রেশন লজিকটির পুনরাবৃত্তি করছেন।
• সংঘাতের ঝুঁকি গ্লোবাল হ্যান্ডেল, সংঘর্ষ, এবং ভুল কনটেক্সটে লোড হওয়া স্ক্রিপ্ট।

সঠিক পদ্ধতি — ধাপে ধাপে নির্দেশিকা

উদ্দেশ্য: একটি প্লাগইন বিপিসিএ-অ্যালার্ট-ব্লক যা একটি “অ্যালার্ট বক্স” ব্লক যোগ করে, যার মধ্যে রয়েছে:

• একটি শিরোনাম + বিষয়বস্তু,
• একটি স্তর (তথ্য/সফলতা/মনোযোগ/ত্রুটি),
• “আইকন” বিকল্প (হ্যাঁ/না),
• সামঞ্জস্য নিশ্চিত করতে এবং ভবিষ্যৎ উন্নয়নের সুযোগ রাখতে পিএইচপি-তে ফ্রন্ট-এন্ড রেন্ডারিং (ডাইনামিক ব্লক)।

ধাপ ১ — প্লাগইন কাঠামো তৈরি করুন

মধ্যে wp-content/plugins/ :

mkdir -p bpca-alert-block/src bpca-alert-block/build bpca-alert-block/assets

মূল ফাইলটি তৈরি করুন:

<?php
/**
 * Plugin Name: BPCA Alert Block
 * Description: Bloc Gutenberg "Encart Alerte" (dynamic block) avec build via @wordpress/scripts.
 * Version: 1.0.0
 * Requires at least: 6.9
 * Requires PHP: 8.1
 * Author: BPCA
 * License: GPL-2.0-or-later
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

define( 'BPCA_ALERT_BLOCK_FILE', __FILE__ );
define( 'BPCA_ALERT_BLOCK_DIR', __DIR__ );

require_once BPCA_ALERT_BLOCK_DIR . '/includes/class-bpca-alert-block.php';

add_action( 'init', array( 'BPCA\AlertBlock\Plugin', 'init' ) );

তৈরি করুন includes/class-bpca-alert-block.php :

<?php
namespace BPCAAlertBlock;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

final class Plugin {

	public static function init(): void {
		// Enregistre le bloc via block.json + render_callback.
		add_action( 'init', array( __CLASS__, 'register_block' ) );
	}

	public static function register_block(): void {
		$block_json = BPCA_ALERT_BLOCK_DIR . '/block.json';

		// register_block_type() sait lire block.json et enregistrer les assets déclarés.
		register_block_type(
			$block_json,
			array(
				'render_callback' => array( __CLASS__, 'render' ),
			)
		);
	}

	/**
	 * Rendu serveur (dynamic block).
	 *
	 * @param array  $attributes Attributs du bloc.
	 * @param string $content    Contenu interne (InnerBlocks), non utilisé ici.
	 * @return string HTML rendu.
	 */
	public static function render( array $attributes, string $content ): string {
		$level   = isset( $attributes['level'] ) ? sanitize_key( $attributes['level'] ) : 'info';
		$title   = isset( $attributes['title'] ) ? sanitize_text_field( $attributes['title'] ) : '';
		$message = isset( $attributes['message'] ) ? wp_kses_post( $attributes['message'] ) : '';
		$icon    = ! empty( $attributes['showIcon'] );

		$allowed_levels = array( 'info', 'success', 'warning', 'error' );
		if ( ! in_array( $level, $allowed_levels, true ) ) {
			$level = 'info';
		}

		$classes = array(
			'bpca-alert',
			'bpca-alert--' . $level,
		);

		$icon_html = '';
		if ( $icon ) {
			// Icônes simples en SVG inline (pas de dépendance externe).
			$icon_html = '<span class="bpca-alert__icon" aria-hidden="true">' . self::get_icon_svg( $level ) . '</span>';
		}

		$title_html = '';
		if ( $title !== '' ) {
			$title_html = '<div class="bpca-alert__title">' . esc_html( $title ) . '</div>';
		}

		// Note : $message est déjà filtré via wp_kses_post() mais on l'échappe en contexte HTML.
		$message_html = '';
		if ( $message !== '' ) {
			$message_html = '<div class="bpca-alert__message">' . $message . '</div>';
		}

		$html  = '<div class="' . esc_attr( implode( ' ', $classes ) ) . '" role="note">';
		$html .= $icon_html;
		$html .= '<div class="bpca-alert__body">' . $title_html . $message_html . '</div>';
		$html .= '</div>';

		return $html;
	}

	private static function get_icon_svg( string $level ): string {
		// SVG minimalistes. Vous pouvez les remplacer par vos propres assets.
		switch ( $level ) {
			case 'success':
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"></path></svg>';
			case 'warning':
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z"></path></svg>';
			case 'error':
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg>';
			case 'info':
			default:
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M11 17h2v-6h-2v6zm0-8h2V7h-2v2zm1-7C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"></path></svg>';
		}
	}
}

ধাপ ২ — block.json (মেটাডেটা + অ্যাসেট) যোগ করুন।

তৈরি করুন block.json প্লাগইনের মূলে:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "bpca/alert",
	"title": "Encart Alerte (BPCA)",
	"category": "widgets",
	"icon": "warning",
	"description": "Affiche un encart d'alerte avec niveau et option d'icône.",
	"textdomain": "bpca-alert-block",
	"attributes": {
		"level": { "type": "string", "default": "info" },
		"title": { "type": "string", "default": "" },
		"message": { "type": "string", "default": "" },
		"showIcon": { "type": "boolean", "default": true }
	},
	"supports": {
		"anchor": true,
		"html": false
	},
	"editorScript": "file:./build/index.js",
	"style": "file:./build/style-index.css",
	"editorStyle": "file:./build/index.css"
}

ব্যবহারিক নোট:

• apiVersion: 3 আধুনিক ব্লকগুলোর বর্তমান ভিত্তি হলো এটি।
• ক্ষেত্র file: এর মাধ্যমে সংস্করণ সহ অ্যাসেটগুলির স্বয়ংক্রিয়ভাবে সংরক্ষণ শুরু হয়। .asset.php উৎপন্ন হয়েছে।
• supports.html: false ব্যবহারকারীকে এইচটিএমএল-এ সম্পাদনা করা এবং কাঠামোটি ভেঙে ফেলা থেকে বিরত রাখে।

ধাপ ৩ — @wordpress/scripts ইনস্টল করুন এবং package.json কনফিগার করুন।

প্লাগইন ফোল্ডারে:

npm init -y
npm install --save-dev @wordpress/scripts

প্রতিস্থাপন করা package.json (অথবা মানিয়ে নিন):

{
	"name": "bpca-alert-block",
	"version": "1.0.0",
	"private": true,
	"scripts": {
		"start": "wp-scripts start",
		"build": "wp-scripts build",
		"lint:js": "wp-scripts lint-js",
		"format": "wp-scripts format"
	},
	"devDependencies": {
		"@wordpress/scripts": "^30.0.0"
	}
}

তথ্যসূত্র: @wordpress/scripts.

ধাপ ৪ — src/ ফোল্ডারে ব্লকটির (এডিটর) জন্য কোড লিখুন।

তৈরি করুন src/index.js :

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
	InspectorControls,
	useBlockProps,
	RichText,
} from '@wordpress/block-editor';
import {
	PanelBody,
	SelectControl,
	ToggleControl,
	TextControl,
} from '@wordpress/components';

import './editor.css';
import './style.css';

registerBlockType( 'bpca/alert', {
	edit: ( { attributes, setAttributes } ) => {
		const { level, title, message, showIcon } = attributes;

		const blockProps = useBlockProps( {
			className: `bpca-alert bpca-alert--${ level }`,
		} );

		return (
			<>
				<InspectorControls>
					<PanelBody title={ __( 'Réglages', 'bpca-alert-block' ) }>
						<SelectControl
							label={ __( 'Niveau', 'bpca-alert-block' ) }
							value={ level }
							options={ [
								{ label: __( 'Info', 'bpca-alert-block' ), value: 'info' },
								{ label: __( 'Succès', 'bpca-alert-block' ), value: 'success' },
								{ label: __( 'Attention', 'bpca-alert-block' ), value: 'warning' },
								{ label: __( 'Erreur', 'bpca-alert-block' ), value: 'error' },
							] }
							onChange={ ( next ) => setAttributes( { level: next } ) }
						/>

						<ToggleControl
							label={ __( 'Afficher une icône', 'bpca-alert-block' ) }
							checked={ !! showIcon }
							onChange={ ( next ) => setAttributes( { showIcon: !! next } ) }
						/>

						<TextControl
							label={ __( 'Titre (optionnel)', 'bpca-alert-block' ) }
							value={ title }
							onChange={ ( next ) => setAttributes( { title: next } ) }
						/>
					</PanelBody>
				</InspectorControls>

				<div { ...blockProps }>
					{ showIcon && (
						<span className="bpca-alert__icon" aria-hidden="true">
							<span className="bpca-alert__icon-placeholder">!</span>
						</span>
					) }

					<div className="bpca-alert__body">
						{ title ? (
							<div className="bpca-alert__title">{ title }</div>
						) : null }

						<RichText
							tagName="div"
							className="bpca-alert__message"
							value={ message }
							allowedFormats={ [ 'core/bold', 'core/italic', 'core/link' ] }
							placeholder={ __( 'Votre message…', 'bpca-alert-block' ) }
							onChange={ ( next ) => setAttributes( { message: next } ) }
						/>
					</div>
				</div>
			</>
		);
	},

	// Dynamic block : save() doit retourner null.
	save: () => null,
} );

দুটি CSS ফাইল:

/* src/style.css - CSS front + éditeur (partagé) */
.bpca-alert{
	display:flex;
	gap:12px;
	padding:14px 16px;
	border-radius:10px;
	border:1px solid transparent;
	align-items:flex-start;
}
.bpca-alert__icon svg{ display:block; fill: currentColor; }
.bpca-alert__title{ font-weight: 650; margin-bottom: 6px; }
.bpca-alert__message a{ text-decoration: underline; }

.bpca-alert--info{ background:#eef6ff; border-color:#cfe6ff; color:#0b3d91; }
.bpca-alert--success{ background:#eafff1; border-color:#c9f2d7; color:#0b5d2a; }
.bpca-alert--warning{ background:#fff7e6; border-color:#ffe3a3; color:#7a4a00; }
.bpca-alert--error{ background:#ffecec; border-color:#ffc2c2; color:#7a0000; }

/* src/editor.css - uniquement éditeur */
.wp-block-bpca-alert .bpca-alert__icon-placeholder{
	display:inline-flex;
	width:20px;
	height:20px;
	border-radius:4px;
	align-items:center;
	justify-content:center;
	background: rgba(0,0,0,.08);
	font-weight: 700;
}

ধাপ ৫ — নির্মাতা

লঞ্চ:

npm run build

আপনাকে অবশ্যই অর্জন করতে হবে:

• build/index.js
• build/index.asset.php (গুরুত্বপূর্ণ)
• build/index.css
• build/style-index.css

ধাপ ৬ — প্লাগইনটি সক্রিয় করুন এবং পরীক্ষা করুন

• অ্যাডমিন প্যানেলে প্লাগইনটি সক্রিয় করুন।
• ব্লক এডিটরে, “Alert Box (BPCA)” অনুসন্ধান করুন।
• এটি যোগ করুন, লেভেল পরিবর্তন করুন, আইকন সহ বা আইকন ছাড়া পরীক্ষা করুন, প্রকাশ করুন।

সম্পূর্ণ কোড

নিম্নলিখিতটি একটি কার্যকরী কপি-পেস্ট (সম্পূর্ণ প্লাগইন)। লক্ষ্য করুন যে বিল্ড (build/) এখানে অন্তর্ভুক্ত নয়: আপনাকে অবশ্যই চালাতে হবে npm run build ফাইলগুলো তৈরি করতে।

1) bpca-alert-block.php

<?php
/**
 * Plugin Name: BPCA Alert Block
 * Description: Bloc Gutenberg "Encart Alerte" (dynamic block) avec build via @wordpress/scripts.
 * Version: 1.0.0
 * Requires at least: 6.9
 * Requires PHP: 8.1
 * Author: BPCA
 * License: GPL-2.0-or-later
 * Text Domain: bpca-alert-block
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

define( 'BPCA_ALERT_BLOCK_FILE', __FILE__ );
define( 'BPCA_ALERT_BLOCK_DIR', __DIR__ );

require_once BPCA_ALERT_BLOCK_DIR . '/includes/class-bpca-alert-block.php';

add_action( 'init', array( 'BPCA\AlertBlock\Plugin', 'init' ) );

2) includes/class-bpca-alert-block.php

<?php
namespace BPCAAlertBlock;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

final class Plugin {

	public static function init(): void {
		add_action( 'init', array( __CLASS__, 'register_block' ) );
	}

	public static function register_block(): void {
		register_block_type(
			BPCA_ALERT_BLOCK_DIR . '/block.json',
			array(
				'render_callback' => array( __CLASS__, 'render' ),
			)
		);
	}

	public static function render( array $attributes, string $content ): string {
		$level   = isset( $attributes['level'] ) ? sanitize_key( $attributes['level'] ) : 'info';
		$title   = isset( $attributes['title'] ) ? sanitize_text_field( $attributes['title'] ) : '';
		$message = isset( $attributes['message'] ) ? wp_kses_post( $attributes['message'] ) : '';
		$icon    = ! empty( $attributes['showIcon'] );

		$allowed_levels = array( 'info', 'success', 'warning', 'error' );
		if ( ! in_array( $level, $allowed_levels, true ) ) {
			$level = 'info';
		}

		$classes = array( 'bpca-alert', 'bpca-alert--' . $level );

		$icon_html = '';
		if ( $icon ) {
			$icon_html = '<span class="bpca-alert__icon" aria-hidden="true">' . self::get_icon_svg( $level ) . '</span>';
		}

		$title_html = $title !== '' ? '<div class="bpca-alert__title">' . esc_html( $title ) . '</div>' : '';
		$message_html = $message !== '' ? '<div class="bpca-alert__message">' . $message . '</div>' : '';

		return '<div class="' . esc_attr( implode( ' ', $classes ) ) . '" role="note">'
			. $icon_html
			. '<div class="bpca-alert__body">' . $title_html . $message_html . '</div>'
			. '</div>';
	}

	private static function get_icon_svg( string $level ): string {
		switch ( $level ) {
			case 'success':
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"></path></svg>';
			case 'warning':
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z"></path></svg>';
			case 'error':
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg>';
			case 'info':
			default:
				return '<svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M11 17h2v-6h-2v6zm0-8h2V7h-2v2zm1-7C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"></path></svg>';
		}
	}
}

3) block.json

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "bpca/alert",
	"title": "Encart Alerte (BPCA)",
	"category": "widgets",
	"icon": "warning",
	"description": "Affiche un encart d'alerte avec niveau et option d'icône.",
	"textdomain": "bpca-alert-block",
	"attributes": {
		"level": { "type": "string", "default": "info" },
		"title": { "type": "string", "default": "" },
		"message": { "type": "string", "default": "" },
		"showIcon": { "type": "boolean", "default": true }
	},
	"supports": {
		"anchor": true,
		"html": false
	},
	"editorScript": "file:./build/index.js",
	"style": "file:./build/style-index.css",
	"editorStyle": "file:./build/index.css"
}

৪) src/index.js + src/style.css + src/editor.css

ফিরে যান এবং ধাপে ধাপে অংশ থেকে ফাইলগুলো পর্যালোচনা করুন।

কোডের ব্যাখ্যা

কেন block.json জীবনকে সত্যিই সহজ করে তোলে

block.json কেন্দ্রীয় বিন্দুতে পরিণত হয়েছে। ওয়ার্ডপ্রেস মেটাডেটা পড়ে, ব্লকটি সংরক্ষণ করে এবং সঠিক জায়গায় (এডিটর বনাম ফ্রন্ট এন্ড) অ্যাসেটগুলো কীভাবে লোড করতে হবে তা জানে। যখন আপনি ব্যবহার করেন "file:./build/index.js"ওয়ার্ডপ্রেস ফাইলের উপর নির্ভর করে build/index.asset.php এর জন্য বিল্ড দ্বারা তৈরি করা হয়েছে:

• ঘোষণা করুন সঠিক নির্ভরতা (যেমন: wp-element, wp-i18n, wp-block-editor),
• ঘোষণা করুন সংস্করণ ক্যাশ-বাস্টিংয়ের জন্য (হ্যাশ)।

দাপ্তরিক তথ্যসূত্র: ব্লক মেটাডেটা.

কেন একটি ডাইনামিক ব্লক (save: null) আসল বাগ এড়ায়

একটি স্ট্যাটিক ব্লকের ক্ষেত্রে, আপনাকে অবশ্যই রক্ষণাবেক্ষণ করতে হবে দুটি রেন্ডারিং :

• JSX রেন্ডারিং-এ edit(),
• ক্রমিক এইচটিএমএল save().

বাস্তবে, কোনো অপশন যোগ করার সাথে সাথেই আপনি তা আপডেট করতে ভুলে যান। save()এবং এর ফলে ডাটাবেসে 'পুরানো ফরম্যাটের' কন্টেন্ট থেকে যায়। ডাইনামিক ব্লক আর্কিটেকচারে, ফ্রন্ট এন্ড PHP ব্যবহার করে, তাই:

• আপনি কন্টেন্ট স্থানান্তর না করেই HTML উন্নত করতে পারেন।
• আপনি নিষ্কাশন এবং পয়ঃনিষ্কাশন ব্যবস্থা কেন্দ্রীভূত করেন,
• আপনি প্রেক্ষাপটগুলো আরও ভালোভাবে পরিচালনা করেন (বহুভাষিক সাইট, বৈশ্বিক বিকল্প, এ/বি টেস্টিং, ইত্যাদি)।

অসুবিধা হলো: রেন্ডারিং সার্ভারের উপর নির্ভরশীল, তাই পারফরম্যান্স এবং ক্যাশিংয়ের ব্যাপারে কঠোর হতে হবে (এ বিষয়ে আমরা পরে আলোচনা করব)।

হুক এবং সময়

আমরা ব্লকটি সংরক্ষণ করি initএটাই প্রত্যাশিত সময়: ব্লক টাইপগুলো যথেষ্ট আগে রেজিস্টার করতে হবে, কিন্তু কোর লোড হওয়ার পরে। সূত্র: register_block_type().

পরিচ্ছন্নকরণ এবং পলায়ন

• sanitize_key() ঢালা level (মান “স্লাগ”)।
• sanitize_text_field() ঢালা title.
• wp_kses_post() ঢালা message কারণ HTML-এর একটি উপসেট (লিঙ্ক, জোর দেওয়া অংশ) অনুমোদিত। ডক: wp_kses_post().
• esc_attr() CSS ক্লাস সম্পর্কে, esc_html() শিরোনামে।

এই ধরনের ব্লকের ক্ষেত্রে, অ্যাট্রিবিউটগুলোর ওপর বিশ্বাস করলে মূল ঝুঁকি হলো এইচটিএমএল ইনজেকশন। এমনকি সম্পাদক 'অ্যাডমিন' হলেও, আপনি চাইবেন না যে একটি স্থায়ী এক্সএসএস দুর্বলতা থাকুক, যদি তার চেয়ে নিম্ন পদের কেউ তা প্রকাশ করতে পারে।

বিভিন্ন রূপ এবং ব্যবহারের ক্ষেত্র

বিকল্প ১ — স্ট্যাটিক ব্লক (যদি আপনি সিরিয়ালাইজড HTML-ই ব্যবহার করতে চান)

পরিস্থিতি: আপনি চান কন্টেন্টটি প্লাগইনের উপর নির্ভর না করে শতভাগ স্থানান্তরযোগ্য হোক (যেমন, প্লাগইন ছাড়া অন্য কোনো সাইটে এক্সপোর্ট করা)। আপনি এটি বাস্তবায়ন করতে পারেন। save() এবং অপসারণ করুন render_callback.

এই ক্ষেত্রে আমি যা করি: আমি একটি ন্যূনতম HTML রাখি save() এবং আমি বিকল্পগুলো সীমিত করে দিচ্ছি। তা না হলে, আপনাকে প্রত্যাশার চেয়েও দ্রুত ব্লক ভার্সন মাইগ্রেশনের সম্মুখীন হতে হবে।

বিকল্প ২ — UI জটিল না করে ব্লক স্টাইল (স্টাইলের বিভিন্ন রূপ) যোগ করুন।

আপনি JS এর ​​মাধ্যমে স্টাইল ঘোষণা করতে পারেন (registerBlockStyle) অথবা মাধ্যমে block.json এটা আপনার কৌশলের উপর নির্ভর করে। অভিজ্ঞ ব্লগারদের জন্য, ইন্সপেক্টরে কোনো টগল যোগ না করে ব্যবহারকারীকে 'আউটলাইন' বনাম 'ফিল্ড' বেছে নেওয়ার সুযোগ দেওয়াই প্রায়শই সহজতর হয়।

ডাক্তার: ব্লক শৈলী.

ভ্যারিয়েন্ট ৩ — গ্লোবাল অপশনের (সেটিংস এপিআই) উপর নির্ভরশীল রেন্ডারিং

উদাহরণস্বরূপ: আপনি 'ব্র্যান্ড কালার' অপশনটি একবার কনফিগার করতে চান। render()একটি বিকল্প বেছে নিন এবং ক্লাস বা ইনলাইন স্টাইলটি সহজভাবে সাজিয়ে নিন। সতর্কতা: যদি আপনি ব্লক বাই ব্লক ইনলাইন CSS তৈরি করতে শুরু করেন, তাহলে দীর্ঘ পেজগুলিতে HTML-এর আকার ব্যাপকভাবে বেড়ে যেতে পারে।

Divi 5 / Elementor / Avada-এর সাথে সামঞ্জস্যপূর্ণ

মূল বিষয়: Divi 5, Elementor, এবং Avada ব্লক এডিটরের সাথে একসাথে কাজ করতে পারে, কিন্তু কন্টেন্ট তাদের নিজ নিজ বিল্ডার ব্যবহার করে তৈরি করা যাবে। আপনার গুটেনবার্গ ব্লকটি ব্যবহারযোগ্য থাকবে।

• নেটিভ ব্লক এডিটরে,
• এই থিম/প্লাগইনগুলো যে “গুটেনবার্গ”/“ব্লক এডিটর” অংশগুলো উন্মুক্ত করে, সেখানে
• কখনো কখনো বিশেষ মডিউলে (নির্মাতার উপর নির্ভর করে)।

দিভি ৫

ডিভি ৫-এর ব্লকের সাথে আন্তঃকার্যক্ষমতা আরও ভালো, কিন্তু আমি এখনও ডিভির গ্লোবাল CSS দ্বারা ব্লকের স্টাইল (লাইন-হাইট, বক্স-সাইজিং) ওভাররাইড হওয়ার সমস্যা দেখেছি। আপনার ব্লকটি মজবুত হবে যদি:

• আপনি আপনার ক্লাসগুলিতে উপসর্গ যোগ করেন (bpca-alert),
• আপনি অতিরিক্ত সাধারণ সিলেক্টর পরিহার করেন।

যদি আপনি এটিকে একটি "ডিভি মডিউল" হিসেবে যুক্ত করতে চান, তাহলে আপনি একটি শর্টকোড (ফলব্যাক) দিতে পারেন যা একই রেন্ডারিং ফাংশনটি পুনরায় ব্যবহার করে, কিন্তু লজিকটির পুনরাবৃত্তি করবেন না। তথ্যের একমাত্র উৎস (পিএইচপি) বজায় রাখুন।

Elementor

এলিমেন্টর আপনাকে ওয়ার্ডপ্রেস উইজেটের মাধ্যমে শর্টকোড এবং, কনফিগারেশন অনুযায়ী, ব্লক যুক্ত করার সুযোগ দেয়। উন্নত ব্যবহারের জন্য:

• একটি শর্টকোড প্রস্তাব করুন [bpca_alert] যার জন্য একই রেন্ডারিং পদ্ধতির প্রয়োজন হয়,
• অথবা একটি ডেডিকেটেড এলিমেন্টর উইজেট প্রকাশ করুন (যার রক্ষণাবেক্ষণে বেশি সময় লাগবে)।

আপনার দর্শক মিশ্র প্রকৃতির হলে, আমি একটি হালকা গেটওয়ে হিসেবে শর্টকোড ব্যবহারের পরামর্শ দিই।

আভাদা (ফিউশন বিল্ডার)

ঐতিহাসিকভাবে আভাডাতে অনেক গ্লোবাল সিএসএস ছিল। বিশেষ করে, পরীক্ষা:

• ডিফল্ট মার্জিন চালু div,
• লিঙ্ক শৈলী,
• উত্তরাধিকারসূত্রে প্রাপ্ত রংগুলো।

বিরোধের ক্ষেত্রে, আরও সুনির্দিষ্ট একটি CSS লেয়ার যোগ করুন। src/style.css (যুদ্ধে জড়িয়ে না পড়ে) !important).

ইনস্টলেশন-পরবর্তী পরীক্ষা

• প্রকাশক ব্লকটি প্রদর্শিত হয় এবং কন্ট্রোলগুলো সঠিকভাবে প্রিভিউ পরিবর্তন করে।
• সদর এইচটিএমএল রেন্ডারিং-এ অন্তর্ভুক্ত থাকে bpca-alert et bpca-alert--{level}.
• সম্পদ :
  • সম্পাদকে: build/index.js + build/index.css বোঝাই,
  • সামনে: build/style-index.css ব্লকটি উপস্থিত থাকলেই লোড করা হবে।
• আচ্ছাদন : পরে npm run buildপ্লাগইন/সিডিএন-এর ক্যাশে পরিষ্কার করুন + ব্রাউজার হার্ড রিফ্রেশ করুন।
• লগ ব্লকটির CSS/JS-এ কোনো “রিসোর্স লোড করতে ব্যর্থ” ত্রুটি নেই।

দ্রুত রোগ নির্ণয় চার্ট

লক্ষণ	সম্ভাব্য কারণ	প্রতিপাদন	সমাধান
ব্লকটি ইনসার্টে প্রদর্শিত হচ্ছে না।	প্লাগইন নিষ্ক্রিয় অথবা লোড করার সময় পিএইচপি ত্রুটি	অ্যাডমিন > এক্সটেনশন, + debug.log	ত্রুটিটি সংশোধন করুন, নেমস্পেস/অন্তর্ভুক্ত ফাইলটি পরীক্ষা করুন।
সামনে দৃশ্যমান কিন্তু “খালি” ব্লক	ডাইনামিক ব্লক ছাড়া render_callback কার্যকর, অথবা render() এ ত্রুটি	এইচটিএমএল উৎস + পিএইচপি লগ দেখুন	চেক register_block_type(... render_callback ...) এবং স্যানিটেশন
ফ্রন্ট এন্ডে CSS অনুপস্থিত।	style ভুলভাবে ঘোষণা করা হয়েছে block.json অথবা বিল্ড অনুপস্থিত	নেটওয়ার্ক ট্যাব, ফাইল style-index.css	পুনরায় চালু npm run buildপথগুলি পরীক্ষা করুন file:
এডিটরে জাভাস্ক্রিপ্ট ত্রুটি	অমীমাংসিত নির্ভরতা / ত্রুটিপূর্ণ বিল্ড	এডিটরে ব্রাউজার কনসোল	অপসারণ build/বিল্ড পুনরায় চালু করুন, পরীক্ষা করুন index.asset.php
বিল্ড করার পর পরিবর্তনগুলি দেখা যাচ্ছে না	ব্রাউজার ক্যাশে/সিডিএন	সম্পদের হ্যাশ তুলনা করুন	ক্যাশে পরিষ্কার করুন + হার্ড রিলোড

যদি সেটা কাজ না করে

১) প্রথমে বিল্ডটি পরীক্ষা করুন

• build/index.asset.php এটির কি অস্তিত্ব আছে? যদি এটি অনুপস্থিত থাকে, তাহলে ওয়ার্ডপ্রেস ডিপেন্ডেন্সিগুলো পরিচালনা করতে পারবে না।
• তুমি ভালো করেছো npm run build প্লাগইন ফোল্ডারে (প্রজেক্ট রুট ডিরেক্টরিতে নয়)?

২) পথগুলো যাচাই করুন

ক্ষেত্র "file:./build/index.js" সম্পর্কিত block.jsonযদি আপনি স্থানান্তরিত হয়ে থাকেন block.json একটি সাবফোল্ডারের ভেতরে সবকিছু এলোমেলো হয়ে যায়। একটি রিপোজিটরি পুনর্গঠন করার সময় এটি একটি সাধারণ ভুল।

৩) হুকটি পরীক্ষা করুন

নিবন্ধন initযদি আপনি খুব তাড়াতাড়ি সেভ করেন (যেমন, কোনো হুক ছাড়া ফাইল লোড করার সময়), তাহলে আপনি এমন কিছু ফাংশনের সম্মুখীন হতে পারেন যেগুলো লোডিং অর্ডার অনুযায়ী প্রস্তুত নয়।

৫) পিএইচপি সংস্করণ যাচাই করুন

আমি এখনও এমন হোস্টিং অ্যাকাউন্ট দেখি যেখানে সাইটটি PHP 7.4/8.0-তে চলে, যদিও প্লাগইনটি 8.1-এর জন্য লেখা হয়েছে। এর ফলে মারাত্মক ত্রুটি (fatal errors) দেখা দেয়। Tools > Site Health-এ অথবা এর মাধ্যমে পরীক্ষা করুন। phpinfo().

৫) প্লাগইন/স্নিপেট দ্বন্দ্ব

একটি 'স্নিপেট প্লাগইন' ফাইল নষ্ট করে দিতে পারে যদি আপনি বন্ধনী ছাড়া কোড পেস্ট করেন। অ্যাক্টিভেশনের পর যদি আপনার সাইট ক্র্যাশ করে:

• FTP-এর মাধ্যমে প্লাগইনটি নিষ্ক্রিয় করুন (ফোল্ডারটির নাম পরিবর্তন করুন),
• ভুল সংশোধন করুন debug.log,
• পুনরায় সক্রিয় করুন।

সাধারণ ফাঁদ এবং ভুলগুলি

এরর	কারণ	সমাধান
PHP কোডটি কপি করুন functions.php প্লাগইনের পরিবর্তে	থিম পরিবর্তন হলে, ব্লকটি অদৃশ্য হয়ে যায়।	এটিকে একটি প্লাগইন হিসেবে প্যাকেজ করুন, এর ভার্সন তৈরি করুন এবং ত্রুটিমুক্তভাবে স্থাপন করুন।
Parse error: syntax error, unexpected ...	সেমিকোলন/বন্ধনী অনুপস্থিত	diff-টি আবার পড়ুন, PHP লিন্টার সক্রিয় করুন, পরীক্ষা করুন debug.log
ব্লকটি দেখা যাচ্ছে কিন্তু কন্ট্রোলগুলো কাজ করছে না।	ভুলভাবে ঘোষিত অ্যাট্রিবিউট বা টাইপো setAttributes	চেক block.json vs attributes JS-এ ব্যবহৃত
Failed to load resource sur index.js	বিল্ড অনুপস্থিত, পাথ ভুল, অথবা ফাইলটি ডেপ্লয় করা হয়নি	স্থাপন build/ প্রোডাকশন পর্যায়ে অনুমতিগুলো যাচাই করুন।
আনলোড করা ব্লকের CSS	লুকান, অথবা style/editorStyle বিপরীত	ক্যাশে পরিষ্কার করুন, যাচাই করুন block.jsonব্যক্তিগত ব্রাউজিং মোডে পরীক্ষা করুন
স্টক এবং ফিল্টারের মধ্যে বিভ্রান্তি	এর ব্যবহার add_filter পরিবর্তে add_action sur init	ব্যবহার add_action( 'init', ... )
আপডেটের পর ব্লকটি "ভেঙে গেছে"	হার্ডকোডেড নির্ভরতার পরিবর্তে .asset.php	মধ্য দিয়ে যান file: + স্ট্যান্ডার্ড বিল্ড
ব্যাকআপ ছাড়া সরাসরি প্রোডাকশনে পরীক্ষা	মারাত্মক ত্রুটি এবং ডাউনটাইমের ঝুঁকি	নিয়ন্ত্রিত স্টেজিং, ব্যাকআপ, এবং ডেপ্লয়মেন্ট (জিপ/রিলিজ)
স্থায়ী লিঙ্ক “পুনর্জন্ম হবে” (পার্শ্ব প্রতিক্রিয়া)	এটি বিরল, কিন্তু কিছু প্লাগইন সক্রিয় হওয়ার সময় রিরাইট পরিবর্তন করে।	অ্যাক্টিভেশনের পর অস্বাভাবিক আচরণ দেখা দিলে পার্মালিঙ্কগুলো পুনরায় সেভ করুন।

নিরাপত্তা, কর্মক্ষমতা এবং রক্ষণাবেক্ষণের পরামর্শ

নিরাপত্তা

• চিকিৎসা সব অ্যাট্রিবিউটগুলোকে অনির্ভরযোগ্য হিসেবে চিহ্নিত করা হয়েছে। UI অ্যাডমিন প্যানেলে থাকলেও REST বা ইম্পোর্টের মাধ্যমে কন্টেন্ট প্রবেশ করানো যেতে পারে।
• আপনি যদি আপনার ব্লকে REST এন্ডপয়েন্ট যোগ করেন, তাহলে ব্যবহার করুন অনুমতি_কলব্যাক, nuncios, এবং উপযুক্ত ক্ষমতা.
• অ্যাট্রিবিউট ছাড়া সরাসরি এইচটিএমএল রেন্ডার করা এড়িয়ে চলুন wp_kses_*.

সম্পাদন

• গতিশীল ব্লক: রাখুন render() দ্রুত, ভারী ব্লক কোয়েরি ছাড়াই।
• যদি আপনার কোয়েরি করার প্রয়োজন হয় (যেমন, CPT), তাহলে অবজেক্ট ক্যাশে ব্যবহার করুন এবং N+1 পরিহার করুন।
• আপনার CSS সংক্ষিপ্ত রাখুন। ব্লকগুলো পুনরাবৃত্ত হয়: একটি পৃষ্ঠায় ২০টি অ্যালার্ট থাকলে আপনার CSS অবশ্যই সামঞ্জস্যপূর্ণ থাকতে হবে।

রক্ষণাবেক্ষণ (প্রকৃত স্থাপন)

• প্রোডাকশনের জন্য বিল্ড করবেন না। CI-তে বিল্ড করুন, প্লাগইনটি এর সাথে শিপ করুন। build/ সংস্করণযুক্ত (বা কোনো রিলিজের সাথে সংযুক্ত)।
• মেশিনভেদে ভিন্ন বিল্ড এড়ানোর জন্য ডেভেলপমেন্ট পর্যায়ে নোড ভার্সন (nvm, volta) লক করে রাখুন।
• গুটেনবার্গের অগ্রগতি পর্যবেক্ষণ করুন: সেরা সংকেতটি হলো পিআর-গুলো। github.com/WordPress/gutenberg.

সম্পদ

• @wordpress/scripts (অফিসিয়াল ডকুমেন্টেশন)
• block.json / ব্লক মেটাডেটা
• register_block_type()
• wp_kses_post()
• ব্লক শৈলী
• রিপো গুটেনবার্গ (পরিবর্তন পর্যবেক্ষণ)
• ওয়ার্ডপ্রেস কোর ট্র্যাক (টিকিট, রিগ্রেশন)
• PHP এর সমর্থিত সংস্করণগুলি

FAQ

আমার নিজের ওয়েবপ্যাক ব্যবহার না করে কেন @wordpress/scripts ব্যবহার করব?

কারণ এতে রক্ষণাবেক্ষণের জায়গা কমে যায়। @wordpress/scripts ওয়ার্ডপ্রেসের নিয়মকানুন মেনে চলে (বেবেল, ওয়ার্ডপ্রেস নির্ভরতা, জেনারেশন) .asset.phpনিজস্বভাবে তৈরি করা ওয়েবপ্যাক প্রায়শই পরবর্তী প্রধান ধাপে এসে মূল পথ থেকে সরে যায় এবং ভেঙে পড়ে।

আমাকে কি build/ ফোল্ডারটি Git-এ কমিট করতে হবে?

সাইটে ডেপ্লয় করা একটি প্লাগইনের জন্য, হ্যাঁ, আপনাকে অবশ্যই ডেলিভার করতে হবে। build/আপনি এটি কমিট করুন বা সিআই রিলিজের সাথে সংযুক্ত করুন, তাতে কিছু যায় আসে না, কিন্তু প্রোডাকশন নোড বিল্ডের উপর নির্ভরশীল হওয়া উচিত নয়।

আমার ব্লকটি ফ্রন্ট এন্ডে এর স্টাইলগুলো লোড করছে না কেন?

৭০ শতাংশ ক্ষেত্রে: style ভুলভাবে ঘোষণা করা হয়েছে block.jsonআনডিপ্লয়েড বিল্ড বা ক্যাশে। তা পরীক্ষা করুন। build/style-index.css বিদ্যমান এবং প্রবেশযোগ্য।

ডাইনামিক ব্লক: এটি কি ক্যাশের জন্য ক্ষতিকর?

আবশ্যিকভাবে নয়। পৃষ্ঠাটি তৈরি হওয়ার সময় HTML রেন্ডার করা হয়, তারপর অন্য সবকিছুর মতো ক্যাশে জমা হয়। আসল সমস্যা হলো যদি আপনার render() ভারী ও ক্যাশবিহীন অনুরোধ করে, অথবা ব্যবহারকারীর অবস্থার উপর নির্ভর করে (সেক্ষেত্রে আপনি ক্যাশকে খণ্ডিত করেন)।

আমি কি এই পদ্ধতিতে ইনারব্লকস ব্যবহার করতে পারি?

হ্যাঁ। আপনাকে যা করতে হবে: (1) ঘোষণা করুন supports.inserter আপনার প্রয়োজন অনুসারে, (2) পরিচালনা করুন $content মধ্যে render() এবং এটিকে সঠিকভাবে এস্কেপ করুন (প্রায়শই এর মাধ্যমে) do_blocks() (যদি আপনি ব্লক কন্টেন্ট নিয়ে কাজ করেন)। শুধুমাত্র প্রকৃত প্রয়োজন থাকলেই এটি করুন, অন্যথায় আপনি এজ কেস বা ব্যতিক্রমী পরিস্থিতির সংখ্যা বাড়িয়ে তুলবেন।

আন্তর্জাতিকীকরণ (i18n) সঠিকভাবে কীভাবে পরিচালনা করবেন?

JS সাইডে, ব্যবহার করুন __() এবং সংজ্ঞায়িত করুন textdomain মধ্যে block.jsonPHP সাইডে, ব্যবহার করুন __()/esc_html__()এরপর, আপনার ফাইলগুলো তৈরি করুন। .po/.mo আপনার স্বাভাবিক চ্যানেলের মাধ্যমে। ডক আই১৮এন ব্লক: ব্লক এডিটরে আন্তর্জাতিকীকরণ.

আমার এডিটরটি “Cannot read properties of undefined” ত্রুটির কারণে ক্র্যাশ করছে।

সাধারণত: একটি অনুপস্থিত অ্যাট্রিবিউট (ভুল নাম) অথবা একটি অপ্রত্যাশিত টাইপ। সামঞ্জস্যতা পরীক্ষা করুন। block.json ↔ JS. ডিবাগ মোডে, লগ attributes মধ্যে edit() এবং প্রকৃত অবস্থাটি দেখুন।

ব্লকটিতে ডেটা দেওয়ার জন্য আমরা কি একটি REST API যোগ করতে পারি?

হ্যাঁ, তবে নিশ্চিত করুন যে এটি সুরক্ষিত। ব্যবহার করুন register_rest_route() সঙ্গে permission_callbackসেটিংস যাচাই করুন এবং ক্ষমতাগুলো পরিচালনা করুন। ডক: কাস্টম REST API এন্ডপয়েন্ট যোগ করা.

আমি কীভাবে এই কোডটি সঠিকভাবে পরীক্ষা করতে পারি?

আমি এটি তিনটি ধাপে পরীক্ষা করছি:

• ইউনিট/একীকরণ ন্যূনতমপক্ষে, রেন্ডারিংয়ের পিএইচপি পরীক্ষা (render()অবৈধ অ্যাট্রিবিউট সহ (যেমন: অজানা লেভেল, টাইটেলে HTML ইত্যাদি)।
• E2E একটি আর্টিকেল তৈরি করুন, ব্লকটি যুক্ত করুন, প্রকাশ করুন, HTML ও CSS যাচাই করুন।
• কম্প্যাট স্টেজিং-এ একটি “হেভি” থিম (Avada/Divi) সক্রিয় করুন এবং পরীক্ষা করে দেখুন যে আপনার ক্লাসগুলো ওভাররাইট হয়ে যাচ্ছে না।

যেসব পরিবর্তন আমার ব্লকগুলোকে প্রভাবিত করতে পারে, সেগুলো আমি কোথায় ট্র্যাক করতে পারি?

গুটেনবার্গ রিপোজিটরিতে (GitHub) এবং কোর ট্র্যাকে (মঞ্চভীতিযখন ওয়ার্ডপ্রেস কোরে কোনো পরিবর্তন মার্জ করা হয়। এখানেই আপনি ডেপ্রিকেশন এবং এপিআই পরিবর্তনগুলি দেখতে পাবেন।