یہ میرے آخری مضمون کا تسلسل ہے۔ "فرنٹ اینڈ پر ورڈپریس بلاکس میں بیرونی API ڈیٹا پیش کرنا". اس آخری میں، ہم نے سیکھا کہ کس طرح ایک بیرونی API لینا ہے اور اسے ایک ایسے بلاک کے ساتھ مربوط کرنا ہے جو ورڈپریس سائٹ کے سامنے والے سرے پر حاصل کردہ ڈیٹا کو پیش کرتا ہے۔
بات یہ ہے کہ ہم نے یہ اس طرح سے کیا ہے جو ہمیں ورڈپریس بلاک ایڈیٹر میں ڈیٹا دیکھنے سے روکتا ہے۔ دوسرے الفاظ میں، ہم ایک صفحہ پر بلاک داخل کر سکتے ہیں لیکن ہمیں اس کا کوئی پیش نظارہ نہیں ملتا ہے۔ ہم بلاک کو تب ہی دیکھتے ہیں جب یہ شائع ہوتا ہے۔
آئیے مثال بلاک پلگ ان پر نظرثانی کرتے ہیں جو ہم نے پچھلے مضمون میں بنایا تھا۔ صرف اس بار، ہم اس ڈیٹا کو بیک اینڈ بلاک ایڈیٹر میں بھی لانے اور پیش کرنے کے لیے ورڈپریس کے جاوا اسکرپٹ اور ری ایکٹ ایکو سسٹم کا استعمال کرنے جا رہے ہیں۔
جہاں ہم نے چھوڑ دیا۔
جیسا کہ ہم اسے شروع کرتے ہیں، یہاں ایک ڈیمو ہے جہاں ہم آخری مضمون میں اترے تھے جس کا آپ حوالہ دے سکتے ہیں۔ آپ نے محسوس کیا ہو گا کہ میں نے a render_callback پچھلے آرٹیکل میں طریقہ تاکہ میں پی ایچ پی فائل میں موجود اوصاف کا استعمال کر سکوں اور مواد کو رینڈر کر سکوں۔
ٹھیک ہے، یہ ان حالات میں مفید ہو سکتا ہے جہاں آپ کو متحرک بلاکس بنانے کے لیے کچھ مقامی ورڈپریس یا پی ایچ پی فنکشن استعمال کرنا پڑ سکتا ہے۔ لیکن اگر آپ صرف JavaScript اور React (JSX، خاص طور پر) ورڈپریس کے ماحولیاتی نظام کو استعمال کرنا چاہتے ہیں تاکہ ڈیٹا بیس میں محفوظ کردہ صفات کے ساتھ جامد HTML کو پیش کیا جا سکے، تو آپ کو صرف اس پر توجہ مرکوز کرنے کی ضرورت ہے۔ Edit اور Save بلاک پلگ ان کے افعال۔
- ۔
Editفنکشن مواد کو اس بنیاد پر پیش کرتا ہے جو آپ بلاک ایڈیٹر میں دیکھنا چاہتے ہیں۔ آپ یہاں انٹرایکٹو React اجزاء رکھ سکتے ہیں۔ - ۔
Saveفنکشن مواد کو اس بنیاد پر پیش کرتا ہے کہ آپ فرنٹ اینڈ پر کیا دیکھنا چاہتے ہیں۔ آپ کے پاس یہاں ری ایکٹ کے ریگولر اجزاء یا ہکس نہیں ہو سکتے۔ یہ جامد HTML کو واپس کرنے کے لیے استعمال کیا جاتا ہے جو آپ کے ڈیٹا بیس میں صفات کے ساتھ محفوظ ہوتا ہے۔
۔ Save فنکشن وہ جگہ ہے جہاں ہم آج ہینگ آؤٹ کر رہے ہیں۔ ہم فرنٹ اینڈ پر انٹرایکٹو اجزاء بنا سکتے ہیں، لیکن اس کے لیے ہمیں انہیں دستی طور پر شامل کرنے اور ان تک رسائی حاصل کرنے کی ضرورت ہے۔ Save ایک فائل میں فنکشن جیسا کہ ہم نے پچھلے مضمون میں کیا تھا۔
لہذا، میں اسی زمین کا احاطہ کرنے جا رہا ہوں جو ہم نے پچھلے مضمون میں کیا تھا، لیکن اس بار آپ بلاک ایڈیٹر میں پیش نظارہ دیکھ سکتے ہیں۔ اس سے پہلے آپ اسے سامنے کے آخر تک شائع کرتے ہیں۔
بلاک سہارے
میں نے جان بوجھ کر اس کے بارے میں کوئی وضاحت نہیں چھوڑی۔ edit پچھلے مضمون میں فنکشن کے پرپس کیونکہ اس نے مرکزی نقطہ، رینڈرنگ سے توجہ ہٹا دی ہوگی۔
اگر آپ رد عمل کے پس منظر سے آرہے ہیں، تو آپ سمجھ جائیں گے کہ میں کیا بات کر رہا ہوں، لیکن اگر آپ اس میں نئے ہیں، تو میں تجویز کروں گا React دستاویزات میں اجزاء اور پرپس کو چیک کرنا.
اگر ہم لاگ ان کریں۔ props کنسول پر اعتراض کرتے ہیں، یہ ہمارے بلاک سے متعلق ورڈپریس کے افعال اور متغیرات کی فہرست لوٹاتا ہے:
ہمیں صرف ضرورت ہے۔ attributes اعتراض اور setAttributes فنکشن جس سے میں تباہ کرنے جا رہا ہوں۔ props میرے کوڈ میں اعتراض۔ پچھلے آرٹیکل میں، میں نے RapidAPI کے کوڈ میں ترمیم کی تھی تاکہ میں API ڈیٹا کو اس کے ذریعے اسٹور کر سکوں setAttributes(). پرپس صرف پڑھنے کے قابل ہیں، لہذا ہم ان میں براہ راست ترمیم کرنے سے قاصر ہیں۔
بلاک پروپس ریاستی متغیرات سے ملتے جلتے ہیں اور setState React میں، لیکن React کلائنٹ کی طرف کام کرتا ہے اور setAttributes() پوسٹ کو محفوظ کرنے کے بعد ورڈپریس ڈیٹا بیس میں اوصاف کو مستقل طور پر ذخیرہ کرنے کے لیے استعمال کیا جاتا ہے۔ لہذا، ہمیں ان کو بچانے کی ضرورت ہے۔ attributes.data اور پھر اسے ابتدائی قیمت کے طور پر کال کریں۔ useState() متغیر.
۔ edit تقریب
میں اس HTML کوڈ کو کاپی پیسٹ کرنے جا رہا ہوں جو ہم نے استعمال کیا ہے۔ football-rankings.php آخری مضمون میں اور جاوا اسکرپٹ کے پس منظر میں شفٹ کرنے کے لیے اس میں تھوڑی سی ترمیم کریں۔ یاد رکھیں کہ ہم نے پچھلے مضمون میں فرنٹ اینڈ اسٹائلنگ اور اسکرپٹس کے لیے دو اضافی فائلیں کیسے بنائیں؟ جس طرح سے ہم آج چیزوں تک پہنچ رہے ہیں، ان فائلوں کو بنانے کی ضرورت نہیں ہے۔ اس کے بجائے، ہم اس سب کو میں منتقل کر سکتے ہیں۔ Edit تقریب.
مکمل کوڈ
import { useState } from "@wordpress/element";
export default function Edit(props) {
const { attributes, setAttributes } = props;
const [apiData, setApiData] = useState(null);
function fetchData() {
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "Your Rapid API key",
"X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
},
};
fetch(
"https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39",
options
)
.then((response) => response.json())
.then((response) => {
let newData = { ...response }; // Deep clone the response data
setAttributes({ data: newData }); // Store the data in WordPress attributes
setApiData(newData); // Modify the state with the new data
})
.catch((err) => console.error(err));
}
return (
{apiData && (
Rank
Logo
Team name
GP
GW
GD
GL
GF
GA
Pts
Form history
{/* Usage of [0] might be weird but that is how the API structure is. */}
{apiData.response[0].league.standings[0].map((el) => {
{/* Destructure the required data from all */}
const { played, win, draw, lose, goals } = el.all;
return (
{el.rank}
{el.team.name}
{played}
{win}
{draw}
{lose}
{goals.for}
{goals.against}
{el.points}
{el.form.split("").map((result) => {
return (
{result}
);
})}
);
}
)}
)}
);
}میں نے ری ایکٹ ہک کو شامل کیا ہے۔ useState() سے @wordpress/element اسے React لائبریری سے استعمال کرنے کے بجائے۔ اس کی وجہ یہ ہے کہ اگر میں باقاعدہ طریقے سے لوڈ کرتا ہوں، تو یہ ہر اس بلاک کے لیے React ڈاؤن لوڈ کرے گا جسے میں استعمال کر رہا ہوں۔ لیکن اگر میں استعمال کر رہا ہوں۔ @wordpress/element یہ ایک واحد ذریعہ سے لوڈ ہوتا ہے، یعنی React کے اوپر موجود ورڈپریس پرت۔
اس بار، میں نے کوڈ کو بھی اندر نہیں لپیٹا ہے۔ useEffect() لیکن ایک فنکشن کے اندر جسے صرف بٹن پر کلک کرنے پر کال کیا جاتا ہے تاکہ ہمارے پاس لائے گئے ڈیٹا کا لائیو پیش نظارہ ہو۔ میں نے ایک ریاستی متغیر استعمال کیا ہے جسے کہا جاتا ہے۔ apiData لیگ ٹیبل کو مشروط طور پر پیش کرنا۔ لہذا، ایک بار بٹن پر کلک کرنے اور ڈیٹا حاصل کرنے کے بعد، میں ترتیب دے رہا ہوں۔ apiData کے اندر نئے ڈیٹا تک fetchData() اور فٹ بال رینکنگ ٹیبل کے HTML کے ساتھ ایک رینڈر دستیاب ہے۔
آپ دیکھیں گے کہ ایک بار پوسٹ محفوظ ہونے اور صفحہ کو تازہ کرنے کے بعد، لیگ ٹیبل ختم ہو گیا ہے۔ اس کی وجہ یہ ہے کہ ہم ایک خالی حالت استعمال کر رہے ہیں (null) کے لئے apiDataکی ابتدائی قیمت۔ جب پوسٹ محفوظ ہو جاتی ہے تو صفات کو محفوظ کر لیا جاتا ہے۔ attributes.data اعتراض اور ہم اسے ابتدائی قدر کے طور پر کہتے ہیں۔ useState() اس طرح متغیر:
const [apiData, setApiData] = useState(attributes.data);۔ save تقریب
ہم کے ساتھ تقریباً وہی کام کرنے جا رہے ہیں۔ save فنکشن، لیکن اس میں تھوڑا سا ترمیم کریں۔ مثال کے طور پر، سامنے والے سرے پر "ڈیٹا بازیافت کریں" بٹن کی ضرورت نہیں ہے، اور apiData اسٹیٹ متغیر بھی غیر ضروری ہے کیونکہ ہم اسے پہلے ہی میں چیک کر رہے ہیں۔ edit فنکشن لیکن ہمیں بے ترتیب کی ضرورت ہے۔ apiData متغیر جو چیک کرتا ہے۔ attributes.data JSX کو مشروط طور پر رینڈر کرنے کے لیے ورنہ یہ غیر متعینہ غلطیاں پھینک دے گا اور بلاک ایڈیٹر UI خالی ہو جائے گا۔
مکمل کوڈ
export default function save(props) {
const { attributes, setAttributes } = props;
let apiData = attributes.data;
return (
{/* Only render if apiData is available */}
{apiData && (
Rank
Logo
Team name
GP
GW
GD
GL
GF
GA
Pts
Form history
{/* Usage of [0] might be weird but that is how the API structure is. */}
{apiData.response[0].league.standings[0].map((el) => {
const { played, win, draw, lose, goals } = el.all;
return (
{el.rank}
{el.team.name}
{played}
{win}
{draw}
{lose}
{goals.for}
{goals.against}
{el.points}
{el.form.split("").map((result) => {
return (
{result}
);
})}
);
})}
)}
);
}اگر آپ ترمیم کر رہے ہیں۔ save بلاک ایڈیٹر میں بلاک کے پہلے سے موجود ہونے کے بعد فنکشن، یہ اس طرح کی خرابی دکھائے گا:
اس کی وجہ یہ ہے کہ محفوظ کردہ مواد میں مارک اپ ہمارے نئے میں مارک اپ سے مختلف ہے۔ save فنکشن چونکہ ہم ترقی کے موڈ میں ہیں، اس لیے موجودہ صفحہ سے بکس کو ہٹانا اور اسے ایک نئے بلاک کے طور پر دوبارہ داخل کرنا آسان ہے — اس طرح، اس کی بجائے اپ ڈیٹ شدہ کوڈ استعمال کیا جاتا ہے اور چیزیں دوبارہ مطابقت پذیر ہوجاتی ہیں۔
اسے ہٹانے اور دوبارہ شامل کرنے کی اس صورتحال سے بچا جا سکتا ہے اگر ہم استعمال کرتے render_callback طریقہ چونکہ آؤٹ پٹ متحرک ہے اور سیو فنکشن کے بجائے پی ایچ پی کے ذریعہ کنٹرول کیا جاتا ہے۔ لہذا ہر طریقہ کے اپنے فوائد اور نقصانات ہیں۔
ٹام نوویل نے ایک مکمل وضاحت فراہم کی ہے کہ a میں کیا نہیں کرنا ہے۔ save میں کام یہ اسٹیک اوور فلو جواب.
ایڈیٹر اور فرنٹ اینڈ میں بلاک کو اسٹائل کرنا
اسٹائل کے حوالے سے، یہ تقریباً وہی چیز ہوگی جس پر ہم نے گزشتہ مضمون میں دیکھا تھا، لیکن کچھ معمولی تبدیلیوں کے ساتھ جس کی وضاحت میں نے تبصروں میں کی ہے۔ میں یہاں صرف مکمل سٹائل فراہم کر رہا ہوں کیونکہ یہ صرف تصور کا ثبوت ہے بجائے اس کے کہ آپ کسی چیز کو کاپی پیسٹ کرنا چاہتے ہیں (جب تک کہ آپ کو فٹ بال کی درجہ بندی کو اس طرح کے انداز میں دکھانے کے لیے کسی بلاک کی ضرورت نہ ہو)۔ اور نوٹ کریں کہ میں اب بھی SCSS استعمال کر رہا ہوں جو CSS پر مرتب کرتا ہے۔
ایڈیٹر کے انداز
/* Target all the blocks with the data-title="Football Rankings" */
.block-editor-block-list__layout
.block-editor-block-list__block.wp-block[data-title="Football Rankings"] {
/* By default, the blocks are constrained within 650px max-width plus other design specific code */
max-width: unset;
background: linear-gradient(to right, #8f94fb, #4e54c8);
display: grid;
place-items: center;
padding: 60px 0;
/* Button CSS - From: https://getcssscan.com/css-buttons-examples - Some properties really not needed :) */
button.fetch-data {
align-items: center;
background-color: #ffffff;
border: 1px solid rgb(0 0 0 / 0.1);
border-radius: 0.25rem;
box-shadow: rgb(0 0 0 / 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: rgb(0 0 0 / 0.85);
cursor: pointer;
display: inline-flex;
font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
&:hover,
&:focus {
border-color: rgb(0, 0, 0, 0.15);
box-shadow: rgb(0 0 0 / 0.1) 0 4px 12px;
color: rgb(0, 0, 0, 0.65);
}
&:hover {
transform: translateY(-1px);
}
&:active {
background-color: #f0f0f1;
border-color: rgb(0 0 0 / 0.15);
box-shadow: rgb(0 0 0 / 0.06) 0 2px 4px;
color: rgb(0 0 0 / 0.65);
transform: translateY(0);
}
}
}فرنٹ اینڈ اسٹائلز
/* Front-end block styles */
.wp-block-post-content .wp-block-football-rankings-league-table {
background: linear-gradient(to right, #8f94fb, #4e54c8);
max-width: unset;
display: grid;
place-items: center;
}
#league-standings {
width: 900px;
margin: 60px 0;
max-width: unset;
font-size: 16px;
.header {
display: grid;
gap: 1em;
padding: 10px;
grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
align-items: center;
color: white;
font-size: 16px;
font-weight: 600;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
background-position: right;
.stats {
display: flex;
gap: 15px;
& > div {
width: 30px;
}
}
}
}
.league-table {
background: white;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
padding: 1em;
.position {
width: 20px;
}
.team {
display: grid;
gap: 1em;
padding: 10px 0;
grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
align-items: center;
}
.team:not(:last-child) {
border-bottom: 1px solid lightgray;
}
.team-logo img {
width: 30px;
top: 3px;
position: relative;
}
.stats {
display: flex;
gap: 15px;
& > div {
width: 30px;
text-align: center;
}
}
.last-5-games {
display: flex;
gap: 5px;
& > div {
width: 25px;
height: 25px;
text-align: center;
border-radius: 3px;
font-size: 15px;
& .result-W {
background: #347d39;
color: white;
}
& .result-D {
background: gray;
color: white;
}
& .result-L {
background: lightcoral;
color: white;
}
}
}
ہم اس میں شامل کرتے ہیں۔ src/style.scss جو ایڈیٹر اور فرنٹ اینڈ دونوں میں اسٹائل کا خیال رکھتا ہے۔ میں ڈیمو یو آر ایل کا اشتراک نہیں کر سکوں گا کیونکہ اس کے لیے ایڈیٹر تک رسائی درکار ہوگی لیکن میرے پاس ڈیمو دیکھنے کے لیے آپ کے لیے ایک ویڈیو ریکارڈ کی گئی ہے:
بہت صاف، ٹھیک ہے؟ اب ہمارے پاس ایک مکمل طور پر کام کرنے والا بلاک ہے جو نہ صرف فرنٹ اینڈ پر رینڈر کرتا ہے بلکہ API ڈیٹا بھی لاتا ہے اور وہیں بلاک ایڈیٹر میں رینڈر کرتا ہے — بوٹ کرنے کے لیے ریفریش بٹن کے ساتھ!
لیکن اگر ہم لینا چاہتے ہیں۔ مکمل ورڈپریس بلاک ایڈیٹر کا فائدہ، ہمیں بلاک کے UI عناصر میں سے کچھ کی نقشہ سازی پر غور کرنا چاہیے بلاک کنٹرولز رنگ، نوع ٹائپ، اور وقفہ کاری جیسی چیزوں کے لیے۔ بلاک ڈویلپمنٹ سیکھنے کے سفر میں یہ ایک اچھا اگلا قدم ہے۔
