একটি ওয়ার্ডপ্রেস ব্লকে বেসলাইন স্থিতি

আপনি সম্পর্কে জানেন বেসলাইনঠিক? এবং আপনি এটি শুনে থাকতে পারেন ক্রোম দল এটির জন্য একটি ওয়েব উপাদান তৈরি করেছে।

এখানে!

অবশ্যই, আমরা কেবল এইচটিএমএল উপাদানটি পৃষ্ঠায় ফেলে দিতে পারি। তবে আমি কখনই জানি না যে আমরা কোথায় এরকম কিছু ব্যবহার করব। আলমানাক, ওবিএস। তবে আমি নিশ্চিত যে অন্যান্য পৃষ্ঠাগুলি এবং পোস্টগুলিতে এটি এম্বেড করা এমন সময় রয়েছে।

ওয়ার্ডপ্রেস ব্লকগুলির জন্য ঠিক এটিই ভাল। আমরা ইতিমধ্যে পুনরায় ব্যবহারযোগ্য উপাদান নিতে পারি এবং ওয়ার্ডপ্রেস সম্পাদকটিতে কাজ করার সময় এটি পুনরাবৃত্তিযোগ্য করে তুলতে পারি। তাই আমি কি করেছি! আপনি যে উপাদানটি দেখতে পাচ্ছেন সেখানে আছে <baseline-status> ওয়েব উপাদান ওয়ার্ডপ্রেস ব্লক হিসাবে ফর্ম্যাট করা। আসুন কেবল কিকের জন্য অন্য একটিকে ফেলে দিন।

বেশ ঝরঝরে! আমি দেখেছি হুগোর সমতুল্য হ’ল গ্রাজিবেক। একটি আছে অ্যাস্ট্রো সমতুল্যখুব। কারণ আমি ওয়ার্ডপ্রেস ব্লক ডেভলপমেন্টের সাথে মোটামুটি সবুজ আমি ভেবেছিলাম যে এটি কীভাবে একসাথে রাখা হয়েছে সে সম্পর্কে আমি কিছুটা লিখব। এখনও এমন রুক্ষ প্রান্ত রয়েছে যা আমি পরে মসৃণ করতে চাই, তবে এটি প্রাথমিক ধারণাটি ভাগ করে নেওয়ার জন্য এটি যথেষ্ট যথেষ্ট পয়েন্ট।

প্রকল্পটি ভাসমান

আমি ব্যবহার করেছি @wordpress/create-block বুটস্ট্র্যাপ করতে প্যাকেজ এবং প্রকল্পটি শুরু করুন। সব মানে আমি cd‘ডি /wp-content/plugins কমান্ড লাইন থেকে ডিরেক্টরি এবং সেখানে সমস্ত কিছু প্লপ করতে ইনস্টল কমান্ডটি চালান।

npm install @wordpress/create-block

দ্য baseline-status.php ফাইলটি যেখানে প্লাগইন নিবন্ধিত রয়েছে। এবং হ্যাঁ, এটি বছরের পর বছর ধরে পুরোপুরি একই রকম দেখাচ্ছে, কেবল একটিতে নয় style.css এটি থিমের মতো ফাইল। পার্থক্য হ’ল create-block প্যাকেজ উইজেটটি নিবন্ধ করতে কিছু উত্তোলন করে যাতে আমার দরকার নেই:

<?php
/**
 * Plugin Name:       Baseline Status
 * Plugin URI:        https://css-tricks.com
 * Description:       Displays current Baseline availability for web platform features.
 * Requires at least: 6.6
 * Requires PHP:      7.2
 * Version:           0.1.0
 * Author:            geoffgraham
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       baseline-status
 *
 * @package CssTricks
 */

if ( ! defined( 'ABSPATH' ) ) 
  exit; // Exit if accessed directly.


function csstricks_baseline_status_block_init() 
  register_block_type( __DIR__ . '/build' );

add_action( 'init', 'csstricks_baseline_status_block_init' );

?>

আসল মাংস ভিতরে আছে src ডিরেক্টরি।

দ্য create-block প্যাকেজটি ফাঁকা কিছু ভরাটও করেছিল block-json অন ​​বোর্ডিং প্রক্রিয়া ভিত্তিক ফাইল:

  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "css-tricks/baseline-status",
  "version": "0.1.0",
  "title": "Baseline Status",
  "category": "widgets",
  "icon": "chart-pie",
  "description": "Displays current Baseline availability for web platform features.",
  "example": ,
  "supports": 
    "html": false
  ,
  "textdomain": "baseline-status",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "render": "file:./render.php",
  "viewScript": "file:./view.js"

সিএসএস-ট্রিক্সে ঠিক এখানে প্রকাশিত কিছু টিউটোরিয়াল বন্ধ করে আমি জানতাম যে ওয়ার্ডপ্রেস ব্লকগুলি দু’বার রেন্ডার করে-একবার সামনের প্রান্তে এবং একবার পিছনের প্রান্তে-এবং প্রতিটিটির জন্য একটি ফাইল রয়েছে src ফোল্ডার:

• render.php:: ফ্রন্ট-এন্ড ভিউ পরিচালনা করে
• edit.js:: ব্যাক-এন্ড ভিউ পরিচালনা করে

ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড মার্কআপ

শীতল। আমি দিয়ে শুরু <baseline-status> ওয়েব উপাদান মার্কআপ::

<script src="https://cdn.jsdelivr.net/npm/(email protected)/baseline-status.min.js" type="module"></script>
<baseline-status featureId="anchor-positioning"></baseline-status>

আমি এটি ইনজেকশন করতে ঘৃণা করব <script> প্রতিবার ব্লকটি পপ আপ হয়, তাই আমি পৃষ্ঠায় প্রদর্শিত ব্লকের উপর ভিত্তি করে শর্তসাপেক্ষে ফাইলটি এনকিউ করার সিদ্ধান্ত নিয়েছি। এটি মূল ঘটছে baseline-status.php যে ফাইলটি আমি থিমের মতো একইভাবে বাছাই করেছি functions.php ফাইল। এটি ঠিক যেখানে সহায়ক ফাংশন যায়।

// ... same code as before

// Enqueue the minified script
function csstricks_enqueue_block_assets() 
  wp_enqueue_script(
    'baseline-status-widget-script',
    'https://cdn.jsdelivr.net/npm/(email protected)/baseline-status.min.js',
    array(),
    '1.0.4',
    true
  );

add_action( 'enqueue_block_assets', 'csstricks_enqueue_block_assets' );

// Adds the 'type="module"' attribute to the script
function csstricks_add_type_attribute($tag, $handle, $src) 
  if ( 'baseline-status-widget-script' === $handle ) 
    $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
  
  return $tag;

add_filter( 'script_loader_tag', 'csstricks_add_type_attribute', 10, 3 );

// Enqueues the scripts and styles for the back end
function csstricks_enqueue_block_editor_assets() 
  // Enqueues the scripts
  wp_enqueue_script(
    'baseline-status-widget-block',
    plugins_url( 'block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element', 'wp-editor' ),
    false,
  );

  // Enqueues the styles
  wp_enqueue_style(
    'baseline-status-widget-block-editor',
    plugins_url( 'style.css', __FILE__ ),
    array( 'wp-edit-blocks' ),
    false,
  );

add_action( 'enqueue_block_editor_assets', 'csstricks_enqueue_block_editor_assets' );

চূড়ান্ত ফলাফলটি স্ক্রিপ্টটি সরাসরি প্লাগইনটিতে বেক করে যাতে এটি মেনে চলে ওয়ার্ডপ্রেস প্লাগইন ডিরেক্টরি নির্দেশিকা। যদি এটি না হয় তবে আমি সম্ভবত হোস্ট করা স্ক্রিপ্টটি অক্ষত রাখব কারণ আমি এটি বজায় রাখতে সম্পূর্ণ আগ্রহী না। ওহ, এবং যে csstricks_add_type_attribute() ফাংশনটি হ’ল ফাইলটিকে ইএস মডিউল হিসাবে আমদানি করতে সহায়তা করে। একটি আছে wp_enqueue_script_module() এটিতে হুক করার জন্য উপলব্ধ ক্রিয়াটি এটি পরিচালনা করা উচিত, তবে আমি এটি কৌশলটি করতে পারি না।

হাতে রেখে, আমি উপাদানটির মার্কআপটি একটি টেম্পলেটটিতে রাখতে পারি। দ্য render.php ফাইলটি যেখানে সমস্ত সামনের-শেষের ধার্মিকতা থাকে, তাই আমি যেখানে মার্কআপটি ফেলে দিয়েছি:

<baseline-status
  <?php echo get_block_wrapper_attributes(); ?> 
  featureId="(FEATURE)">
</baseline-status>

যে get_block_wrapper_attibutes() ওয়ার্ডপ্রেস ডক্স দ্বারা ডিবাগিং জিনিসগুলির জন্য সমস্ত ব্লকের সমস্ত তথ্য আউটপুট করার উপায় হিসাবে জিনিসটি সুপারিশ করা হয়, যেমন এটি সমর্থন করা উচিত কোন বৈশিষ্ট্যগুলি।

(FEATURE)এমন একটি স্থানধারক যা শেষ পর্যন্ত উপাদানটিকে জানিয়ে দেবে যে কোন ওয়েব প্ল্যাটফর্ম সম্পর্কে তথ্য রেন্ডার করতে হবে। আমরা এখন এটিতেও কাজ করতে পারি। আমি উপাদানটির জন্য বৈশিষ্ট্যগুলি নিবন্ধন করতে পারি block.json::

"attributes": { "showBaselineStatus": 
  "featureID": 
  "type": "string"
  
,

এখন আমরা মার্কআপ ইন আপডেট করতে পারি render.php প্রতিধ্বনি featureID যখন এটি প্রতিষ্ঠিত হয়েছে।

<baseline-status
  <?php echo get_block_wrapper_attributes(); ?> 
  featureId="<?php echo esc_html( $featureID ); ?>">
</baseline-status>

এই মার্কআপের আরও কিছু সম্পাদনা হবে যা একটু পরে। তবে প্রথমত, আমার মধ্যে মার্কআপ লাগানো দরকার edit.js ফাইল করুন যাতে উপাদানটি পৃষ্ঠায় যুক্ত করার সময় ওয়ার্ডপ্রেস সম্পাদকটিতে রেন্ডার করে।

<baseline-status  ...useBlockProps()  featureId= featureID ></baseline-status>

useBlockProps এর জাভাস্ক্রিপ্ট সমতুল্য get_block_wrapper_attibutes() এবং পিছনের প্রান্তে ডিবাগিংয়ের জন্য ভাল হতে পারে।

এই মুহুর্তে, ব্লকটি সম্পূর্ণরূপে পৃষ্ঠায় রেন্ডার করা হয় যখন বাদ দেওয়া হয়! সমস্যাগুলি হ’ল:

• আমি যে বৈশিষ্ট্যটি প্রদর্শন করতে চাই তা এটি পাস করছে না।
• এটি সম্পাদনাযোগ্য নয়।

আমি প্রথমে কাজ করব। এইভাবে, আমি একবারে সমস্ত কিছু আটকানো হয়ে গেলে আমি কেবল সেখানে সঠিক ভেরিয়েবলটি প্লাগ করতে পারি।

ব্লক সেটিংস

ওয়ার্ডপ্রেসের অন্যতম সুন্দর দিক ডিএক্স ওয়ার্ডপ্রেস তার নিজস্ব ব্লকের জন্য যে একই নিয়ন্ত্রণগুলি ব্যবহার করে সেগুলিতে আমাদের সরাসরি অ্যাক্সেস রয়েছে। আমরা সেগুলি আমদানি করি এবং যেখানে প্রয়োজন সেখানে তাদের প্রসারিত করি।

আমি স্টাফ আমদানি করে শুরু করেছি edit.js::

import  InspectorControls, useBlockProps  from '@wordpress/block-editor';
import  PanelBody, TextControl  from '@wordpress/components';
import './editor.scss';

এটি আমাকে কয়েকটি সহজ জিনিস দেয়:

• InspectorControls ডিবাগিংয়ের জন্য ভাল।
• useBlockProps কি ডিবাগ করা যায়।
• PanelBody ব্লক সেটিংসের জন্য প্রধান মোড়ক।
• TextControl আমি যে ক্ষেত্রটি মার্কআপে যেতে চাই সেখানে (FEATURE) বর্তমানে হয়।
• editor.scss নিয়ন্ত্রণগুলির জন্য শৈলী সরবরাহ করে।

আমি নিয়ন্ত্রণে পৌঁছানোর আগে, একটি আছে Edit সমস্ত কাজের জন্য মোড়ক হিসাবে ব্যবহার করার জন্য ফাংশন প্রয়োজন:

export default function Edit(  attributes, setAttributes  ) 
  // Controls

প্রথম InspectorTools এবং PanelBody::

export default function Edit(  attributes, setAttributes  ) 
  // React components need a parent element
  <>
    <InspectorControls>
      <PanelBody title= __( 'Settings', 'baseline-status' ) >
      // Controls
      </PanelBody>
    </InspectorControls>
  </>

তারপরে এটি আসল পাঠ্য ইনপুট নিয়ন্ত্রণের জন্য সময়। আমাকে সত্যিই ঝুঁকতে হয়েছিল ব্লক বিকাশের এই প্রবর্তক টিউটোরিয়াল নিম্নলিখিত কোডের জন্য, উল্লেখযোগ্যভাবে এই বিভাগ।

export default function Edit(  attributes, setAttributes  ) 
  <>
    <InspectorControls>
      <PanelBody title= __( 'Settings', 'baseline-status' ) >
        // Controls
        <TextControl
          label= __(
            'Feature', // Input label
            'baseline-status'
          ) 
          value= '' 
          onChange= ( value ) =>
            setAttributes(  featureID: value  )
          
        />
     </PanelBody>
    </InspectorControls>
  </>

সব একসাথে বেঁধে

এই মুহুর্তে, আমার আছে:

• সামনের দিকের দৃশ্য
• ব্যাক-এন্ড ভিউ
• একটি পাঠ্য ইনপুট সহ সেটিংস ব্লক করুন
• হ্যান্ডলিং স্টেটের জন্য সমস্ত যুক্তি

ওহ হ্যাঁ! সংজ্ঞায়িত করতে ভুলবেন না featureID পরিবর্তনশীল কারণ এটিই উপাদানটির মার্কআপে পপুলেট করে। ফিরে edit.js::

const  featureID  = attributes;

সংক্ষেপে: বৈশিষ্ট্যটির আইডি হ’ল ব্লকের বৈশিষ্ট্যগুলি গঠন করে। এখন আমার সেই বৈশিষ্ট্যটি নিবন্ধন করতে হবে যাতে ব্লক এটি স্বীকৃতি দেয়। ফিরে block.json একটি নতুন বিভাগে:

"attributes": 
  "featureID": 
    "type": "string"
  
,

খুব সোজা, আমি মনে করি। কেবল একটি একক পাঠ্য ক্ষেত্র যা একটি স্ট্রিং। এটা এই সময় আমি করতে পারি অবশেষে এটি ফ্রন্ট-এন্ড মার্কআপ পর্যন্ত তারে করুন render.php::

<baseline-status
  <?php echo get_block_wrapper_attributes(); ?>
  featureId="<?php echo esc_html( $featureID ); ?>">
</baseline-status>

উপাদান স্টাইলিং

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

আপনি যদি শ্যাডো ডোমে নতুন হন তবে মূল ধারণাটি হ’ল এটি শৈলী এবং স্ক্রিপ্টগুলিকে উপাদানগুলির মধ্যে বা বাইরে “ফাঁস” থেকে বাধা দেয়। এটি ওয়েব উপাদানগুলির একটি বড় বিক্রয় কেন্দ্র কারণ এগুলি যে কোনও প্রকল্পে ফেলে দেওয়া এবং তাদের “ন্যায়সঙ্গত” কাজ করা এত সহজ।

তবে আপনি কীভাবে তৃতীয় পক্ষের ওয়েব উপাদানটি স্টাইল করবেন? এটি কীভাবে বিকাশকারী জিনিসগুলি সেট আপ করে তার উপর নির্ভর করে কারণ শৈলীগুলি ছায়া ডোমের মাধ্যমে “ছিদ্র” করার অনুমতি দেওয়ার উপায় রয়েছে। অলি উইলিয়ামস লিখেছেন “সিএসএস শ্যাডো পার্টস সহ ছায়া ডোমে স্টাইলিং” আমাদের জন্য কিছুক্ষণ আগে এবং এটি আমাকে সঠিক দিকে নির্দেশ করার ক্ষেত্রে অত্যন্ত সহায়ক ছিল। ক্রিসেরও একটি আছে।

আমি ব্যবহার করেছি আরও কয়েকটি নিবন্ধ:

প্রথমত, আমি জানতাম আমি নির্বাচন করতে পারি <baseline-status> কোনও ক্লাস, আইডি বা অন্যান্য বৈশিষ্ট্য ছাড়াই সরাসরি উপাদান:

baseline-status 
  /* Styles! */

আমি স্ক্রিপ্টের দিকে উঁকি দিয়েছি উত্স কোড আমি কী নিয়ে কাজ করছি তা দেখতে। আমার কাছে কয়েকটি হালকা শৈলী ছিল যা আমি এখনই টাইপ সিলেক্টরটিতে ব্যবহার করতে পারি:

baseline-status 
  background: #000;
  border: solid 5px #f8a100;
  border-radius: 8px;
  color: #fff;
  display: block;
  margin-block-end: 1.5em;
  padding: .5em;

আমি সোর্স কোডে একটি সিএসএস রঙের পরিবর্তনশীল লক্ষ্য করেছি যা আমি হার্ড-কোডেড মানগুলির জায়গায় ব্যবহার করতে পারি, তাই আমি সেগুলি পুনরায় সংজ্ঞায়িত করেছি এবং যেখানে প্রয়োজন সেখানে সেট করেছি:

baseline-status 
  --color-text: #fff;
  --color-outline: var(--orange);

  border: solid 5px var(--color-outline);
  border-radius: 8px;
  color: var(--color-text);
  display: block;
  margin-block-end: var(--gap);
  padding: calc(var(--gap) / 4);

এখন একটি জটিল অংশ জন্য। সম্পূর্ণরূপে রেন্ডার করার সময় উপাদানটির মার্কআপটি ডোমে এটির কাছাকাছি দেখায়:

<baseline-status class="wp-block-css-tricks-baseline-status" featureid="anchor-positioning"></baseline-status>
<h1>Anchor positioning</h1>
<details>
  <summary aria-label="Baseline: Limited availability. Supported in Chrome: yes. Supported in Edge: yes. Supported in Firefox: no. Supported in Safari: no.">
    <baseline-icon aria-hidden="true" support="limited"></baseline-icon>
    <div class="baseline-status-title" aria-hidden="true">
      <div>Limited availability</div>
        <div class="baseline-status-browsers">
        <!-- Browser icons -->
        </div>
    </div>
  </summary><p>This feature is not Baseline because it does not work in some of the most widely-used browsers.</p><p><a href="https://github.com/web-platform-dx/web-features/blob/main/features/anchor-positioning.yml">Learn more</a></p></details>
<baseline-status class="wp-block-css-tricks-baseline-status" featureid="anchor-positioning"></baseline-status>

আমি লুকানোর ধারণা নিয়ে খেলতে চেয়েছিলাম <h1> কিছু প্রসঙ্গে উপাদান কিন্তু এটি সম্পর্কে দু’বার চিন্তা করেছিল কারণ না শিরোনামটি প্রদর্শন করা কেবলমাত্র আলমানাক সামগ্রীর জন্য কাজ করে যখন আপনি উপাদানটিতে যা রেন্ডার করা হয় তার মতো একই বৈশিষ্ট্যের জন্য পৃষ্ঠায় থাকে। অন্য কোনও প্রসঙ্গ এবং শিরোনাম হ’ল আমরা কী বৈশিষ্ট্যটি দেখছি ততক্ষণ প্রসঙ্গ সরবরাহের জন্য একটি “প্রয়োজন”। হতে পারে এটি ভবিষ্যতের বর্ধন হতে পারে যেখানে শিরোনামটি টগল করা এবং বন্ধ করা যেতে পারে।

ভয়েলি

প্লাগইন পান!

এটি আজকের হিসাবে ওয়ার্ডপ্রেস প্লাগইন ডিরেক্টরিতে অবাধে উপলব্ধ! এটি আমার প্রথম প্লাগইন যা আমি নিজের পক্ষে ওয়ার্ডপ্রেসে জমা দিয়েছি, তাই এটি আমার পক্ষে সত্যিই উত্তেজনাপূর্ণ!

ভবিষ্যতের উন্নতি

এটি পুরোপুরি বেকড থেকে অনেক দূরে তবে অবশ্যই আপাতত কাজটি সম্পন্ন করে। ভবিষ্যতে যদি এই জিনিসটি আরও কয়েকটি জিনিস করতে পারে তবে ভাল লাগবে:

• লাইভ আপডেট: পৃষ্ঠাটি রিফ্রেশ না হওয়া পর্যন্ত উইজেটটি পিছনের প্রান্তে আপডেট হয় না। আমি কোনও কিছুতে প্রকাশের হিট করার আগে চূড়ান্ত রেন্ডারিংটি দেখতে চাই। আমি এটি পেয়েছি যেখানে পাঠ্য ইনপুটটিতে টাইপ করা তাত্ক্ষণিকভাবে পিছনের প্রান্তে প্রতিফলিত হয়। এটি কেবল যে উপাদানটি আপডেটটি দেখানোর জন্য পুনরায় রেন্ডার করে না।
• বিভিন্নতা: যেমন “বড়” এবং “ছোট”।
• শিরোনাম: ব্লকটি কোথায় ব্যবহৃত হয় তার উপর নির্ভর করে লুকিয়ে রাখতে বা প্রদর্শন করতে টগল করুন।