অনেক দিন ধরে আমি ওয়েব ডিজাইন সম্পর্কে টিউটোরিয়াল-ব্লগ তৈরির কথা ভাবছিলাম। কিন্তু সেজন্যে HTML, CSS, JS ইত্যাদি কোড প্রদর্শন ও তার আউটপুট দেখানো জরুরি। সেক্ষেত্রে অনেকে CodePen, JSFiddle, JS Bin ইত্যাদি ব্যবহার করে সেগুলো পোস্টে এমবেড (Embed) করে থাকেন। এভাবে কোডগুলো অন্য জায়গা থেকে এমবেড করার বিষয়টা আমার পছন্দ হয়নি। কেননা সেক্ষেত্র কোডগুলো সরাসরি পোস্টে থাকবে না। আমি চাচ্ছিলাম এমন কিছু, যেনো সরাসরি পোস্টে কোডগুলো এডিট, কপি, পেস্ট ইত্যাদি করতে পারি।
অনেক খুঁজাখুঁজির পর CodeMirror Blocks প্লাগইনটি পাই। এক্ষেত্রে HTML, CSS ইত্যাদি রান (Run) করার পর রেজাল্ট বা আউটপুট দেখা যায়। এক্ষেত্রেও কোড হাইলাইটিং বিষয়টি পছন্দ হলেও আমার প্রত্যাশা শতভাগ পূরণ করতে পারেনি।
গত সপ্তাহে সার্চ করতে গিয়ে হঠাৎ করেই Jotted Code Playground টি পেয়ে যাই। এটা আমার খুবই পছন্দ হয়। ওয়ার্ডপ্রেসের প্লাগইন রিপোজিটরিতে (Plugin Repository) Jotted-এর কোনো ভার্সন খুঁজে পাইনি। তাই নিজেই একটি প্লাগইন তৈরি করার সিদ্ধান্ত নিই, যেনো গুটেনবার্গ ব্লক (Gutenberg Block) ব্যবহার করে সরাসরি কোডগুলো এন্ট্রি দিতে পারি।
কাস্টম গুটেনবার্গ ব্লক (Gutenberg Block) প্লাগইন তৈরি করতে শেখা:
বর্তমানে আমি যেহেতু পেশাদার ডেভেলপার নই, তাই আমাকে অনেক কিছু শিখতে হয়েছে। এক্ষেত্রে ইউটিউবের কয়েকটি ভিডিও টিউটোরিয়াল আমার খুব কাজে দিয়েছে। আমি কোনো কোডিং শুরু করার আগে এই তিনটি টিউটোরিয়াল সিরিজ পুরোপুরি দেখে নিয়েছি।
- WordPress & JavaScript in 2019: Coding a Custom Block Type for Gutenberg Block Editor. (জানুয়ারি ২০১৯)
একেবারে সহজ। তবে অনেক বেসিক জিনিস শেখার আছে। Node, NPM ইত্যাদির প্রয়োজন নেই। - WordPress Plugin Development: Gutenberg Blocks, React & More (জুন ২০২১)
প্লাগইন আকারে Gutenberg Block তৈরি। - Create Custom Gutenberg Blocks (২০১৯-২০২১)
Twenty Nineteen থিমে Core Block কাস্টমাইজেশন ও নতুন Block সংযোজন।
অন্যান্য প্রয়োজনীয় লিংক:
প্লাগইনটি ডেভেলপ করতে গিয়ে আমি আরো অনেক লিংকের সন্ধান পাই। এগুলো থেকেও অনেক কিছু শিখতে পারি।
- Block Editor Handbook : ওয়ার্ডপ্রেসের মূল ডকুমেন্টেশন।
- ওয়ার্ডপ্রেসের কোর (Core) ব্লকগুলোর সোর্স কোড : গিটহাব রিপোজিটরিতে অনেককিছু শেখার আছে।
- Gutenberg Components for WordPress : গুটেনবার্গের বিভিন্ন কম্পনেন্টের ছবি ও কোড।
- @wordpress/scripts : সহজে ডেভেলপমেন্ট এনভাইরনমেন্ট তৈরি করতে।
- Node.js : ডেভেলপমেন্ট এনভাইরনমেন্ট তৈরিতে সহায়ক।
Node.js ও NPM সংশ্লিষ্ট কিছু তথ্য:
প্লাগইন ফোল্ডার থেকে কমান্ড প্রম্পট রান করতে হবে। এরপর @wordpress/scripts প্যাকেজ ইন্সটল করা।
npm install @wordpress/scripts --save-dev
package.json ফাইল তৈরি করতে:-
npm init -y
package.json ফাইলে নিচের কোডগুলো থাকতে হবে।
{
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
"test": "echo \"Error: no test specified\" && exit 1"
},
}src ফোল্ডারের ভিতরে index.js ফাইল তৈরি করি। এখন start কমান্ডটি রান করলে build ফোল্ডার তৈরি হবে এবং build ফোল্ডারের ভিতর index.js নামে ব্রাউজারে ব্যবহার উপযোগী একটি ফাইল তৈরি হবে। এর দ্বারা src/index.js ফাইলটি প্রতিনিয়ত watching করতে থাকবে। অর্থাৎ ফাইলটি এডিট করে সেভ করলে build/index.js ফাইলটি প্রতিবার অটোমেটিকভাবে আপডেট হবে। start কমান্ডটি রান করার কমান্ড:
npm run start
Watching বন্ধ করতে কমান্ড প্রম্পটে Ctrl + C চাপতে হবে এবং Y লিখে এন্টার চাপতে হবে।
মিনিফাইড ভার্সন তৈরি করার কমান্ড:
npm run build