ঠিক আছে, আমি এটির সাথে কিছুটা সময় খেলছি এবং নীচের ক্যাভেটগুলি সহ গ্যালারী ব্লকের আউটপুট পরিবর্তন করতে পেরেছি:
- পূর্বরূপটি আউটপুটটির সাথে মেলে না। আমি মনে করি এটি সম্ভব তবে এটি আরও কিছুটা জড়িত বলে মনে হচ্ছে।
- সামগ্রীর বিশ্লেষণ করতে এবং এটিকে সম্পাদনযোগ্য করে রাখতে ব্লকের জন্য আউটপুটে কয়েকটি শ্রেণি এবং মার্কআপ প্রয়োজন are এই ক্লাসগুলির ফ্রন্ট-এন্ড শৈলী রয়েছে যা মোকাবেলা করতে হবে। ব্লকটি কীভাবে এটি করে তা ফিল্টার করার কোনও উপায় থাকলে আমি এই মুহুর্তে নিশ্চিত নই। এটি যদি সম্ভব হয় তবে থিম বা প্লাগইন নিষ্ক্রিয় করা হলে গ্যালারী ব্লকগুলি নষ্ট হয়ে যাওয়ার অর্থ এটি এমনকি ভাল ধারণাও নাও থাকতে পারে। সম্পূর্ণ নতুন ব্লকটি সম্ভবত এমন পরিস্থিতিতে যাওয়ার উপায় হবে যেখানে এটির প্রয়োজন হবে।
- এই পর্যায়ে চিত্রের আকারগুলি কীভাবে কাজ করে তা আমি সত্যিই নিশ্চিত নই।
- জাভাস্ক্রিপ্ট হুক ব্যবহারের পদ্ধতি চূড়ান্ত প্রকাশের ক্ষেত্রে প্রাসঙ্গিক নাও হতে পারে। গুটেনবার্গ ব্যবহার
@wordpress/hooksকরার সময় কি কোর ব্যবহার করার জন্য সিস্টেমের আঙ্গুলসমূহ সম্পর্কে আলোচনা চলছে ।
- যেহেতু ব্লকের আউটপুটটি এইচটিএমএল হিসাবে সংরক্ষণ করা হয়, কোনও শর্টকোড বা মেটা নয়, বিদ্যমান গ্যালারীগুলি সম্পাদনা না করে পরিবর্তন করা সম্ভব হবে না।
আমাদের প্রথমে যে কাজটি করা দরকার তা হ'ল স্ক্রিপ্টটি নিবন্ধন করা। এটি দিয়ে করা wp_enqueue_scripts()হয় তবে enqueue_block_editor_assetsহুকের উপরে।
wp-blocksনির্ভরতা হিসাবে স্ক্রিপ্টের স্ক্রিপ্ট থাকা উচিত । এটি প্রায় অবশ্যই সম্পাদকটিতে লোড হয়েছে, তবে এটি নির্ভরতা তৈরি করে সম্ভবত এটি আমাদের স্ক্রিপ্টের আগে বোঝানো হয়েছে তা নিশ্চিত করে।
function wpse_298225_enqueue_block_assets() {
wp_enqueue_script(
'wpse-298225-gallery-block',
get_theme_file_uri( 'block.js' ),
['wp-blocks']
);
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );
একটি ব্লকের আউটপুট জন্য এইচটিএমএল ব্লক save()পদ্ধতি দ্বারা পরিচালিত হয় । আপনি এই ফাইলটিতে গ্যালারী ব্লক দেখতে পাবেন ।
এই পর্যায়ে (মার্চ 2018) গুটেনবার্গ ব্লকগুলি সংরক্ষণের পদ্ধতিতে একটি ফিল্টার সমর্থন করে blocks.getSaveElement। আমরা এটির মতো জাভাস্ক্রিপ্টে একটি হুক যোগ করতে পারি:
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
প্রথম যুক্তি হুক নাম, দ্বিতীয় তর্কটি হল - আমি মনে করি - একটি নেমস্পেস এবং শেষ যুক্তিটি কলব্যাক ফাংশন।
যেহেতু আমরা save()ব্লকের পদ্ধতিটি প্রতিস্থাপন করছি , তাই আমাদের একটি নতুন উপাদান ফিরে আসা দরকার। যাইহোক, এটি কোনও সাধারণ এইচটিএমএল উপাদান নয় যা আমাদের ফিরতে হবে। আমাদের একটি প্রতিক্রিয়া উপাদান ফিরে আসতে হবে ।
আপনি যখন আসল ব্লকের save()পদ্ধতিটি দেখেন তখন আপনি যা দেখতে পান তা জেএসএক্স। প্রতিক্রিয়া, যা গুটেনবার্গ আন্ডার-দ্য হুড ব্যবহার করে, এটি রেন্ডারিং উপাদানগুলির জন্য এটি সমর্থন করে। আরও এই নিবন্ধটি দেখুন ।
জেএসএক্সের সাধারণত একটি বিল্ড স্টেপ প্রয়োজন, তবে যেহেতু আমি এই উদাহরণের জন্য কোনও বিল্ড স্টেপটি প্রবর্তন করছি না, আমাদের জেএসএক্স ছাড়াই একটি উপাদান তৈরি করার একটি উপায় প্রয়োজন। প্রতিক্রিয়া এটি দিয়ে দেয় createElement()। ওয়ার্ডপ্রেস এটির জন্য একটি মোড়ক সরবরাহ করে এবং এর আকারে অন্যান্য কার্যকারিতার জন্য wp.element। তাই ব্যবহার করতে createElement()আমরা ব্যবহার করি wp.element.createElement()।
blocks.getSaveElementআমরা পেতে কলব্যাক ফাংশন :
element মূল উপাদানটি ব্লক দ্বারা নির্মিত।blockType ব্যবহৃত অবরুদ্ধ প্রতিনিধিত্বকারী একটি বস্তু।attributesব্লক দৃষ্টান্তের বৈশিষ্ট্য। আমাদের উদাহরণে এটিতে গ্যালারী এবং কলামগুলির সংখ্যার মতো সেটিংসের চিত্রগুলি অন্তর্ভুক্ত রয়েছে।
সুতরাং আমাদের কলব্যাক ফাংশনটির প্রয়োজন:
- নন-ব্লক গ্যালারীগুলির জন্য আসল উপাদানটি ফিরিয়ে দিন।
- বৈশিষ্ট্যগুলি, বিশেষত চিত্রগুলি নিন এবং সেগুলি থেকে গ্যালারী উপস্থাপন করে একটি নতুন প্রতিক্রিয়া উপাদান তৈরি করুন।
এখানে একটি সম্পূর্ণ উদাহরণ যা কেবল ulএকটি শ্রেণীর সাথে একটি আউটপুট দেয় my-galleryএবং liক্লাসের সাথে প্রতিটি চিত্রের জন্য my-gallery-itemএবং imgপ্রতিটি srcচিত্রের URL টিতে সেট করে s
function wpse298225GallerySaveElement( element, blockType, attributes ) {
if ( blockType.name !== 'core/gallery' ) {
return element;
}
var newElement = wp.element.createElement(
'ul',
{
'className': 'wp-block-gallery my-gallery',
},
attributes.images.map(
function( image ) {
return wp.element.createElement(
'li',
{
'className': 'blocks-gallery-item my-gallery-item',
},
wp.element.createElement(
'img',
{
'src': image.url,
}
)
)
}
)
)
return newElement
}
কিছু বিষয় লক্ষণীয়:
- মূল গ্যালারী ব্লকটি সন্ধান করে চিত্রগুলি সন্ধান করে
ul.wp-block-gallery .blocks-gallery-item, সুতরাং ব্লকটি সম্পাদনা করার জন্য এই মার্কআপ এবং এই শ্রেণিগুলি প্রয়োজনীয়। এই মার্কআপটি ডিফল্ট স্টাইলিংয়ের জন্যও ব্যবহৃত হয়।
attributes.images.mapপ্রতিটি চিত্রের উপর লুপিং করছে এবং মূল উপাদানটির সামগ্রী হিসাবে শিশু উপাদানগুলির একটি অ্যারে ফিরিয়ে দিচ্ছে। এই উপাদানগুলির অভ্যন্তরে চিত্রটির জন্যই অন্য একটি শিশু উপাদান রয়েছে।