دکمه های استایل در تم های بلوک وردپرس

در حالی که کمی به عقب، Ganesh Dahal یک پست در CSS-Tricks در اینجا نوشت در پاسخ به توییتی که در مورد اضافه کردن سایه‌های جعبه CSS روی بلوک‌ها و عناصر وردپرس پرسیده بود. چیزهای بسیار خوبی در آنجا وجود دارد که از ویژگی‌های جدیدی استفاده می‌کند که در وردپرس 6.1 ارسال شده است و کنترل‌هایی را برای اعمال سایه‌ها بر روی چیزها به طور مستقیم در Block Editor و Site Editor UI فراهم می‌کند.

گانش در آن پست به طور خلاصه به عناصر دکمه اشاره کرد. من می‌خواهم آن را انتخاب کنم و به رویکردهای طراحی دکمه‌ها در قالب‌های وردپرس عمیق‌تر بپردازم. به طور خاص، ما در حال رفتن به کرک باز کردن یک تازه theme.json روش‌های مختلف دکمه‌های یک ظاهر را در طرحواره فایل کنید و تجزیه کنید.

می پرسی چرا دکمه ها؟ این سوال خوبی است، پس بیایید با آن شروع کنیم.

انواع مختلف دکمه ها

هنگامی که ما در مورد دکمه ها در زمینه ویرایشگر بلاک وردپرس صحبت می کنیم، باید بین دو نوع مختلف تمایز قائل شویم:

1. بلوک های فرزند در داخل بلوک دکمه ها
2. دکمه هایی که در داخل بلوک دیگر قرار دارند (مثلاً بلوک فرم نظرات ارسال)

اگر هر دوی این بلوک ها را به یک قالب اضافه کنیم، به طور پیش فرض ظاهر یکسانی دارند.

اما نشانه گذاری بسیار متفاوت است:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

همانطور که می بینیم، نام تگ های HTML متفاوت است. این کلاس های رایج است - .wp-block-button و .wp-element-button - که یک ظاهر ثابت بین دو دکمه را تضمین می کند.

اگر CSS می نوشتیم، این دو کلاس را هدف قرار می دادیم. اما همانطور که می‌دانیم، تم‌های بلوک وردپرس روش متفاوتی برای مدیریت سبک‌ها دارند، و آن هم از طریق theme.json فایل. گانش نیز این موضوع را با جزئیات کامل پوشش داده استو شما بهتر است مقاله او را بخوانید.

بنابراین، چگونه استایل های دکمه را در آن تعریف کنیم theme.json بدون نوشتن CSS واقعی؟ بیا با هم انجامش بدیم.

ایجاد سبک های پایه

theme.json مجموعه ای ساختار یافته از طرحواره است که به صورت جفت ویژگی: ارزش نوشته شده است. ویژگی های سطح بالا "بخش" نامیده می شوند، و ما با آن کار خواهیم کرد styles بخش. این جایی است که تمام دستورالعمل های یک ظاهر طراحی شده است.

ما به طور خاص بر روی آن تمرکز خواهیم کرد elements در styles. این انتخابگر عناصر HTML را هدف قرار می دهد که بین بلوک ها به اشتراک گذاشته شده اند. این پوسته اصلی است که ما با آن کار می کنیم:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

بنابراین کاری که باید انجام دهیم این است که a را تعریف کنیم button عنصر

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

که button مربوط به عناصر HTML است که برای علامت گذاری عناصر دکمه در قسمت جلویی استفاده می شود. این دکمه‌ها حاوی تگ‌های HTML هستند که می‌توانند یکی از دو نوع دکمه ما باشند: یک مؤلفه مستقل (یعنی بلوک دکمه) یا یک مؤلفه تو در تو در یک بلوک دیگر (مثلاً بلوک ارسال نظر).

به جای نیاز به استایل دادن به هر بلوک جداگانه، ما سبک های مشترک ایجاد می کنیم. بیایید جلو برویم و رنگ پس‌زمینه و متن پیش‌فرض را برای هر دو نوع دکمه در موضوع خود تغییر دهیم. یک وجود دارد color شی در آنجا است که به نوبه خود پشتیبانی می کند background و text خواصی که در آن مقادیر مورد نظر خود را تنظیم می کنیم:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

این رنگ هر دو نوع دکمه را تغییر می دهد:

اگر DevTools را کرک کنید و به CSS که وردپرس برای دکمه ها تولید می کند نگاهی بیندازید، می بینیم که .wp-element-button class استایل هایی را که ما در آنها تعریف کردیم اضافه می کند theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

اینها رنگهای پیش فرض ما هستند! در مرحله بعد، ما می‌خواهیم به کاربران در هنگام تعامل با دکمه، بازخورد بصری بدهیم.

پیاده سازی سبک های دکمه های تعاملی

از آنجایی که این سایت کاملاً در مورد CSS است، شرط می بندم که بسیاری از شما قبلاً با حالت های تعاملی پیوندها و دکمه ها آشنا هستید. ما میتوانیم :hover نشانگر ماوس را بر روی آنها قرار دهید، آنها را در آنها قرار دهید :focus، روی آنها کلیک کنید تا آنها را بسازید :active. هک، حتی یک وجود دارد :visited این حالت را به کاربران نشان می دهد که قبلاً روی آن کلیک کرده اند.

آنها هستند شبه کلاس های CSS و ما از آنها برای هدف قرار دادن تعاملات یک پیوند یا دکمه استفاده می کنیم.

در CSS، ما ممکن است به سبک a :hover اینگونه بیان کنید:

a:hover { /* Styles */
}

In theme.json، می خواهیم اعلان دکمه موجود خود را با این شبه کلاس ها گسترش دهیم.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

به ماهیت «ساخت‌یافته» این موضوع توجه کنید. ما اساساً یک طرح کلی را دنبال می کنیم:

ما اکنون تعریف کاملی از سبک های پیش فرض و تعاملی دکمه خود داریم. اما اگر بخواهیم دکمه‌های خاصی را که در بلوک‌های دیگر تودرتو هستند، استایل کنیم، چه؟

دکمه های یک ظاهر طراحی شده در بلوک های جداگانه تو در تو

بیایید تصور کنیم که می‌خواهیم همه دکمه‌ها سبک پایه ما را داشته باشند، به استثنای یک استثنا. می خواهیم دکمه ارسال بلوک ارسال نظر آبی رنگ باشد. چگونه به آن دست یابیم؟

این بلوک پیچیده‌تر از بلوک Button است زیرا دارای بخش‌های متحرک بیشتری است: فرم، ورودی‌ها، متن آموزشی و دکمه. برای هدف قرار دادن دکمه در این بلوک، باید از همان ساختار JSON پیروی کنیم که برای آن انجام دادیم button عنصر، اما در بلوک Post Comment Form اعمال می شود، که به نگاشت می شود core/post-comments-form عنصر:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

توجه داشته باشید که ما دیگر در آن کار نمی کنیم elements دیگر در عوض، ما در داخل کار می کنیم blocks که برای پیکربندی بلوک های واقعی رزرو شده است. در مقابل، دکمه‌ها یک عنصر جهانی در نظر گرفته می‌شوند، زیرا می‌توانند در بلوک‌ها تودرتو شوند، حتی اگر به‌عنوان یک بلوک مستقل نیز در دسترس باشند.

ساختار JSON از عناصر درون عناصر پشتیبانی می کند. بنابراین، اگر وجود دارد button عنصر در بلوک Post Comment Form، می‌توانیم آن را در قسمت هدف قرار دهیم core/post-comments-form مسدود کردن:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

این انتخابگر به این معنی است که ما نه تنها یک بلوک خاص را هدف قرار می‌دهیم، بلکه عنصر خاصی را که در آن بلوک وجود دارد، هدف قرار می‌دهیم. اکنون یک مجموعه پیش‌فرض از سبک‌های دکمه‌ای داریم که برای همه دکمه‌های موضوع اعمال می‌شوند، و مجموعه‌ای از سبک‌ها که برای دکمه‌های خاصی که در بلوک ارسال نظر وجود دارند اعمال می‌شوند.

در نتیجه CSS تولید شده توسط وردپرس دارای انتخابگر دقیق تری است:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

و اگر بخواهیم استایل های تعاملی مختلفی را برای دکمه ارسال نظر فرم تعریف کنیم چه؟ این همان روشی است که ما آن را برای سبک‌های پیش‌فرض انجام دادیم، فقط آنهایی که در داخل آن تعریف شده‌اند core/post-comments-form مسدود کردن:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

در مورد دکمه هایی که در بلوک نیستند چطور؟

وردپرس به طور خودکار کلاس های مناسب را برای خروجی این سبک های دکمه ایجاد و اعمال می کند. اما اگر از یک تم وردپرس ترکیبی استفاده کنید که از بلوک‌ها و ویرایش کامل سایت پشتیبانی می‌کند، اما شامل قالب‌های PHP «کلاسیک» نیز می‌شود، چه؟ یا اگر یک بلوک سفارشی بسازید، یا حتی یک کد کوتاه قدیمی داشته باشید که حاوی دکمه‌ها باشد، چه؟ هیچ یک از اینها توسط سازمان مدیریت نمی شود موتور سبک وردپرس!

جای نگرانی نیست در تمام این موارد، شما باید آن را اضافه کنید .wp-element-button کلاس در نشانه گذاری الگو، بلوک یا کد کوتاه. سپس سبک های تولید شده توسط وردپرس در آن نمونه ها اعمال می شود.

و ممکن است شرایطی وجود داشته باشد که کنترلی بر نشانه گذاری نداشته باشید. به عنوان مثال، برخی از پلاگین های بلاک ممکن است کمی بیش از حد صاحب نظر باشند و سبک خود را آزادانه اعمال کنند. اینجاست که معمولاً می‌توانید به گزینه «Advanced» در پانل تنظیمات بلوک بروید و کلاس را در آنجا اعمال کنید:

پسگفتار

هنگام نوشتن "CSS" در theme.json ممکن است در ابتدا احساس ناخوشایندی داشته باشم، متوجه شده ام که طبیعت دوم می شود. مانند CSS، تعداد محدودی از ویژگی ها وجود دارد که می توانید با استفاده از انتخابگرهای مناسب، آنها را به طور گسترده یا بسیار محدود اعمال کنید.

و سه مزیت اصلی استفاده را فراموش نکنیم theme.json:

1. استایل ها روی دکمه ها هم در نمای جلویی و هم در ویرایشگر بلوک اعمال می شوند.
2. CSS شما با به روز رسانی های آینده وردپرس سازگار خواهد بود.
3. سبک های تولید شده با تم های بلوکی و تم های کلاسیک به طور یکسان کار می کنند - نیازی به کپی کردن چیزی در یک شیوه نامه جداگانه نیست.

اگر شما استفاده کرده اید theme.json سبک در پروژه های خود، لطفا تجربیات و افکار خود را به اشتراک بگذارید. من مشتاقانه منتظر خواندن هر نظر و بازخوردی هستم!

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/