فاصلهگذاری contextual (Contextual Spacing)
Bricks 2.0 فاصلهگذاری contextual (Contextual spacing) را معرفی کرد تا کنترل کامل فاصله عمودی (margin) بین المانهایی مثل heading، paragraph و list در محتوای embedded داشته باشید.
Contextual spacing خودکار روی المانهای داخل این موارد اعمال میشود:
- المان Rich text
- المان Post content (منبع: WordPress)
- محتوای embedded ووکامرس (Checkout مستثنی)
بهطور پیشفرض Bricks margin بالا (margin-block-start) متفاوتی روی heading و paragraph بسته به context اعمال میکند.
برای override این پیشفرضها باید spacing مرورگر را دستی حذف، استایل built-in Bricks را undo و margin خودتان را تعریف میکردید.
Contextual spacing این فرایند را ساده میکند. marginها را reset کنید و قوانین فاصله سفارشی را زیر سبکهای تم (Theme Styles) → Contextual Spacing تعریف کنید.
چه محتوای embedded، layout پویا یا wrapper مبتنی بر utility بسازید، کنترل یکنواخت و انعطافپذیر روی spacing دارید.
نحوه استفاده از contextual spacing
Contextual spacing را در سازنده زیر تنظیمات (Settings) → سبکهای تم (Theme Styles) → Contextual Spacing فعال کنید.
Remove default margins: تگهای HTML که میخواهید margin پیشفرضشان حذف شود را انتخاب کنید (Heading، Paragraph، Lists و غیره). نقطه شروع تمیز برای spacing بدون تداخل استایل ارثی یا پیشفرض.
نکته
Contextual spacing: فقط وقتی margin اعمال میکند که المان قبلاً المان دیگری داشته باشد. از فاصله اضافی در بالای محتوا جلوگیری میکند و فاصله بین المانها یکنواخت میماند.
مرور تنظیمات
| تنظیم | توضیح |
|---|---|
| Remove default margins | margin تگهای HTML انتخابشده یا واردشده دستی را reset میکند. |
| Heading | margin بالا روی h1 تا h6 وقتی المان دیگری قبلش باشد. |
| Paragraph | margin بالا روی p وقتی المان دیگری قبلش باشد. |
| Fallback spacing | برای المانی که heading/paragraph/target نیست یا target مقدار spacing ندارد. |
| Additional target elements | قوانین spacing برای ul، blockquote یا selector سفارشی؛ margin بالا/پایین و padding inline چپ/راست. |
| Additional selectors | گسترش contextual spacing با selector wrapper مثل .contextual-spacing. |
المانهای هدف اضافی (Additional target elements)
از repeater Additional target elements contextual spacing را فراتر از heading و paragraph گسترش دهید.
از المانهای ازپیشتعریفشده:
- Unordered list (ul)
- Ordered list (ol)
- List item (li)
- Figure (figure)
- Blockquote (blockquote)
یا selector سفارشی مثل .my-class، code یا div.
برای هر کدام:
- margin بالا و پایین (
margin-block) - padding start و end (
padding-inline)
اعمال روی ناحیههای محتوای بیشتر
نکته
بهطور پیشفرض Contextual spacing فقط Rich Text، Post Content و محتوای WooCommerce را target میکند. با Additional selectors مثل .contextual-spacing, .brxe-shortcode روی هر wrapper گسترش دهید.
این utility classها را به wrapperها (Container، Div، Block) با محتوای mixed اضافه کنید تا تنظیمات Contextual spacing اعمال شود.
چرا spacing را روی همه heading و paragraph پیشفرض اعمال نکنیم؟
در layoutهای Bricks، مخصوصاً با Heading و Basic text کنار المانهای دیگر، spacing معمولاً با gap بین containerها مدیریت میشود.
قانون spacing واحد برای همه heading و paragraph در هر context منطقی نیست.
Contextual spacing انعطاف میدهد spacing فقط جایی که لازم است با selector و utility class اعمال شود.
مثال ۱: محتوای embedded پست
قالب single post با Post Content (منبع: WordPress).
قبل از Contextual spacing، spacing پیشفرض Bricks نمایش داده میشود.
با Remove default margins، Bricks spacing پیشفرض خود و margin مرورگر را حذف میکند. سپس مقادیر خود را تنظیم کنید؛ مثلاً:
- Heading:
2rem - Paragraph:
1.25rem - Fallback:
1rem
Bricks فقط بین المانهای لازم spacing اعمال میکند. اولین المان margin بالا ندارد؛ بقیه rhythm یکنواخت دارند.
نتیجه: layout تمیز، بدون فاصله بالا، کنترل کامل vertical rhythm.
مثال ۲: layout محتوای mixed
قالب سفارشی با container شامل:
- Heading
- Basic text (تگ
p) - Image (تگ
figure) - Post Content (منبع: WordPress)
سیستمهای spacing متفاوت ممکن است نتیجه ناهماهنگ بدهد.
برای یکپارچهسازی:
- Theme Styles > Contextual Spacing > Remove default margins را فعال کنید
- مقادیر spacing؛ مثلاً Heading:
2rem، Paragraph:1.25rem، Fallback:1rem - کلاس global مثل
.contextual-spacingبه container .contextual-spacingزیر Additional selectors
نتیجه: همه المانهای داخل wrapper از قوانین contextual spacing شما پیروی میکنند.