اضافه کردن حاشیه و بالشتک به بلوک

امکان کنترل حاشیه ، بالشتک و تنظیم شکاف بلوک ها یکی از ویژگی های اصلی ویرایش تمام سایت است.

اما این یک ویژگی کاملاً پیچیده است:

• بلوک ها حاشیه پیش فرض اضافه شده از طریق فاصله بلوک یا شکاف بلوک دارند.
• پرونده theme. json اجازه می دهد تا حاشیه ها و بالشتک ها به بلوک ها اضافه شوند.
• بلوک ها می توانند یک پنل ابعاد داشته باشند تا کاربران بتوانند حاشیه و بالشتک را بر روی پایه های بلوک کنترل کنند.

در این مقاله ما نگاهی خواهیم داشت که چگونه این عناصر با هم کار می کنند تا حاشیه ها را کنترل کنند و بلوک بالشتک را کنترل کنند.

قطعه های کد در این مقاله از پرونده theme. json استفاده می کنند. اگر با نحوه استفاده از Theme. Json برای پیکربندی یک موضوع آشنا نیستید ، می توانید دوره رایگان را توضیح دهید.

فهرست مطالب

• تنظیمات بعد چیست؟
• کنترل واحدهای موجود
• کنترل بالشتک و حاشیه
• اضافه کردن بالشتک و حاشیه
• درک شکاف بلوک
• کنترل شکاف بلوک
• بسته

تنظیمات بعد چیست؟

پانل Dimensions رابط کاربری را نشان می دهد که به کاربران امکان می دهد فاصله اطراف بلوک ها را کنترل کنند. وقتی در مورد فاصله صحبت می کنیم ، منظور ما حاشیه و بالشتک است. اما ویرایش کامل سایت همچنین شامل یک ویژگی خاص به نام بلوک فاصله یا شکاف بلوک است.

پیش فرض این نیست که تمام تنظیمات را نشان دهد. یک دکمه وجود دارد که به شما امکان می دهد کنترل های اضافی را فعال کنید.

کنترل واحدهای موجود

هر کنترل در رابط ابعاد از دو عنصر تشکیل شده است. فیلد برای وارد کردن یک شماره وجود دارد و انتخاب کننده واحد نیز وجود دارد.

هنگامی که روی واحد انتخابی کلیک می کنید ، لیستی از واحدهای موجود ظاهر می شود.

واحدهای موجود را می توان از طریق ورود واحدها در Theme. json کنترل کرد:

"فاصله": <"واحدها": [ "%", "PX", "em", "Rem", "VH", "VW" ]>زبان کد: جاذب (جاذب)

کنترل بالشتک و حاشیه

کنترل ها برای تنظیم حاشیه ها و بالشتک ها یکسان است. رابط پیش فرض به شما امکان می دهد تا برای هر چهار طرف یک بلوک یک عدد وارد کنید. اما یک انتخاب کننده نیز وجود دارد که به شما امکان می دهد مقادیر را برای طرفین جداگانه تنظیم کنید.

این کنترل ها به شما امکان می دهد حاشیه پیش فرض و بالشتک برای بلوک های جداگانه را نادیده بگیرید. در حالی که هنوز هم می توانید از CSS برای کنترل این خصوصیات استفاده کنید ، استفاده از پرونده theme. json گزینه بسیار بهتری است.

اضافه کردن بالشتک و حاشیه

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

این نمونه ای از یک پرونده کامل theme. json است که به بالای بلوک عنوان پست اضافه می کند:

<"نسخه": 2, "سبک": <"هسته/پس از عنوان": <"فاصله": <"لایه گذاری": <"بالا": "30px">>>>>زبان کد: JSON / JSON با نظرات (json)

اگر می خواستید همان چهار گوشه یک بلوک را تنظیم کنید ، این همان چیزی است که دستورالعمل فاصله به نظر می رسد:

"فاصله": <"لبه": "30px">زبان کد: جاذب (جاذب)

درک شکاف بلوک

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

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

اما هنوز هم اگر به یک پست وبلاگ یا الگوی ویرایش کامل سایت اضافه کنید ، باید یکپارچه ادغام شود. و جنبه اصلی آن فضای اطراف بلوک است.

آنچه ویژگی فاصله بلوک انجام می دهد ، اضافه کردن حاشیه قبل از هر بلوک به جز:

• اولین بلوک در یک صفحه وب با استفاده از یک موضوع بلوک (بنابراین در داخل بلوک های سایت . wp).
• اولین بلوک در داخل یک ظرف (به عنوان مثال یک بلوک گروهی).

این ممکن است گیج کننده به نظر برسد ، بنابراین بیایید به یک مثال نگاه کنیم. بیایید با این مطالب یک الگوی بلوک بگیریم:

بیایید ببینیم که چگونه فاصله به این بلوک ها اضافه می شود.

بلوک گروه اولین بلوک این الگوی است ، بنابراین هیچ فضایی بین این بلوک و بالای صفحه وجود ندارد.

این CSS است که وردپرس برای این بلوک اول در صفحه ایجاد می کند:

بلوک های wp-site> * <حاشیه بلوک: 0; حاشیه بلوک: 0;>زبان کد: CSS (CSS)

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

همانطور که می بینید CSS به طور خاص برای این بلوک گروه خاص تولید می شود:

. wp-container-1> * <حاشیه بلوک: 0; حاشیه بلوک: 0;>زبان کد: CSS (CSS)

اما اکنون اگر به بلوک تصویر نگاه کنیم ، می بینیم که فضایی به سمت بالای بلوک دارد.

از آنجا که تصویر بلوک دوم ظرف است ، از سبک های شکاف زیر استفاده می شود:

. wp-container-1> * + * <حاشیه بلوک: قارچ(-wp-tyle-شکاف بلوک) ؛حاشیه بلوک: 0;>زبان کد: CSS (CSS)

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

کنترل شکاف بلوک

فاصله بلوک جهانی را می توان از طریق theme. json کنترل کرد. تنظیم blockgap بخشی از بخش سبک ها است:

"سبک": <"فاصله": <"blockgap": "1. 5rem">>زبان کد: جاذب (جاذب)

یا اگر ویژگی را دوست ندارید ، می توانید با استفاده از بخش تنظیمات آن را خاموش کنید:

"تنظیمات": <"فاصله": <"blockgap": دروغ>>زبان کد: جاذب (جاذب)

بسته

آنجا شما آن را دارید! تمام آنچه شما باید در مورد حاشیه ، بالشتک و تنظیمات شکاف در ویرایشگر بلوک بدانید.

توانایی مدیریت این تنظیمات فقط یکی از بسیاری از ویژگی هایی است که می توانید با Theme. Json پیکربندی کنید. راهنماهای مفصلی برای تنظیمات رنگ و تنظیمات تایپوگرافی موجود است.

اگر هنوز به کار با Theme. Json اطمینان ندارید ، موضوع رایگان من. Json توضیح داد که دوره راه است.

برای راهنمایی های بیشتر در مورد ویرایش و طراحی و طراحی بیشتر در سایت ، لطفاً برای خبرنامه هفتگی من ثبت نام کنید.