وردپرس ۷.۱ «Mary Lou»؛ طراحی ریسپانسیو بدون CSS

وردپرس ۷.۱ با نام «Mary Lou» در ۱۹ اوت ۲۰۲۶ منتشر شد و مهم‌ترین قابلیت آن «استایل ریسپانسیو» است: حالا می‌توانید برای هر بلوک، جداگانه برای موبایل و تبلت فاصله، اندازه فونت، رنگ و چیدمان تعیین کنید، بدون اینکه یک خط CSS بنویسید. بلوک‌های جدید Tabs و Playlist، یادداشت‌های (Notes) دقیق‌تر برای همکاری تیمی، استایل حالت‌های hover و focus برای دکمه‌ها و پردازش تصویر در مرورگر از دیگر تغییرات این نسخه‌اند.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

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

وضعیت تا آبان ۱۴۰۵: وردپرس ۷.۱ «Mary Lou» در ۱۹ اوت ۲۰۲۶ با رهبری Anne McCarthy و مشارکت بیش از ۸۰۰ نفر منتشر شد و نسخه نگهداری ۷.۱.۱ هم پس از آن آمد. ویرایش هم‌زمان و React ۱۹ در این نسخه فعال نشدند. وردپرس ۷.۲ برای ۸ دسامبر ۲۰۲۶ برنامه‌ریزی شده است.

وردپرس ۷.۱ چه قابلیت‌های جدیدی دارد؟

وردپرس ۷.۱ هشت تغییر اصلی برای کاربران دارد که مهم‌ترین آن‌ها استایل ریسپانسیو بلوک‌ها بدون CSS است. طبق اطلاعیه رسمی وردپرس ۷.۱، این نسخه بیش از ۱۵۰۰ بهبود و رفع اشکال دارد و بیش از ۱۷۰ نفر برای اولین بار در آن مشارکت کرده‌اند. نام نسخه به افتخار Mary Lou Williams، پیانیست، تنظیم‌کننده و آهنگساز پیشگام جاز انتخاب شده است.

• استایل ریسپانسیو: تنظیم استایل هر بلوک برای موبایل و تبلت از Global Styles یا تنظیمات بلوک.
• نقاط شکست سفارشی: قالب‌های بلوکی می‌توانند عرض موبایل و تبلت را در theme.json تعریف کنند.
• استایل حالت‌های دکمه: تعیین ظاهر hover، focus و active برای بلوک Button.
• بلوک Tabs: سازمان‌دهی محتوا در پنل‌های زبانه‌ای.
• بلوک Playlist: گروه‌بندی فایل‌های صوتی با نمایش اختیاری موج صدا.
• Notes پیشرفته: یادداشت روی بخشی از متن، نه کل بلوک؛ با متن قالب‌بندی‌شده، منشن و چند گفت‌وگو.
• ویرایشگر رسانه: برش آزاد و با نسبت ثابت، چرخش، قرینه و ویرایش اطلاعات تصویر در یک پنجره.
• نوار مدیریت ثابت: نوار ابزار بالای صفحه در همه ویرایشگرها نمایش داده می‌شود.

استایل ریسپانسیو گوتنبرگ چیست و چطور کار می‌کند؟

استایل ریسپانسیو گوتنبرگ یعنی امکان تعیین مقدار متفاوت برای ویژگی‌های ظاهری یک بلوک در موبایل و تبلت، مستقیماً از رابط ویرایشگر؛ وردپرس خودش برای این مقادیر CSS با Media Query می‌سازد و به بلوک یک کلاس اختصاصی اضافه می‌کند. تا پیش از وردپرس ۷.۱ این کار فقط با نوشتن CSS سفارشی یا افزونه‌های صفحه‌ساز ممکن بود.

طبق یادداشت فنی تیم هسته، استایل ریسپانسیو برای همه بلوک‌هایی کار می‌کند که از پشتیبانی‌های استاندارد هسته استفاده می‌کنند: تایپوگرافی، رنگ، پس‌زمینه، حاشیه (border)، ابعاد، فاصله‌گذاری و چیدمان. یعنی بلوک‌های هسته و بیشتر بلوک‌های افزونه‌هایی که درست ساخته شده‌اند، بدون تغییر از آن بهره می‌برند.

راهنمای تصویری: تنظیم استایل موبایل برای یک بلوک

1. در ویرایشگر، از منوی View گزینه «Responsive styles» را روشن کنید.
2. از پیش‌نمایش دستگاه، حالت Mobile یا Tablet را انتخاب کنید.
3. بلوک موردنظر (مثلاً Group یا Heading) را انتخاب کنید.
4. در پنل تنظیمات بلوک، فاصله یا اندازه فونت را تغییر دهید؛ این مقدار فقط برای همان دستگاه ذخیره می‌شود.
5. به حالت Desktop برگردید و مطمئن شوید مقدار پایه تغییر نکرده است.

برای اعمال تغییر روی همه نمونه‌های یک بلوک در کل سایت، همین کار را از Global Styles و گروه «Viewport» در منوی کشویی «States» انجام دهید. پیش‌نمایش دستگاه‌ها هم حالا با عرض‌های تنظیم‌شده در قالب نمایش داده می‌شود.

نقاط شکست پیش‌فرض وردپرس ۷.۱ کدام‌اند؟

نقاط شکست پیش‌فرض وردپرس ۷.۱ دو عدد است: موبایل تا عرض 480px و تبلت از بیشتر از 480px تا 782px؛ کلید جداگانه‌ای برای دسکتاپ وجود ندارد و استایل پایه بلوک همان استایل دسکتاپ و همه عرض‌های بزرگ‌تر است. این رویکرد «دسکتاپ اول» است، برخلاف رویکرد رایج موبایل اول در CSS دستی.

حالت	کلید در theme.json	Media Query پیش‌فرض
پایه (دسکتاپ و بزرگ‌تر)	بدون کلید؛ استایل معمولی	همه عرض‌ها
تبلت	@tablet	(480px < width <= 782px)
موبایل	@mobile	(width <= 480px)

دقت کنید که بازه‌های موبایل و تبلت هم‌پوشانی ندارند. یعنی اگر فقط برای تبلت فاصله را کم کنید، در موبایل همان مقدار پایه دسکتاپ اعمال می‌شود، نه مقدار تبلت. این رفتار با CSS دستی که معمولاً با max-width آبشاری نوشته می‌شود متفاوت است و یکی از رایج‌ترین اشتباه‌ها در روزهای اول کار با آن است. برای مرور مبانی Media Query و نحو بازه‌ای (range syntax) که وردپرس در خروجی استفاده می‌کند، مستندات MDN درباره استفاده از Media Query را ببینید.

قالب‌سازها چطور نقاط شکست را در theme.json سفارشی کنند؟

قالب‌سازها نقاط شکست را با تنظیم settings.viewport در theme.json سفارشی می‌کنند؛ دو مقدار mobile و tablet می‌پذیرد و هر کدام باید یک طول عددی غیرمنفی با واحد px، em یا rem باشد. مثلاً با مقدار mobile برابر 30rem و tablet برابر 45rem، وردپرس Media Query موبایل را (width <= 30rem) و تبلت را (30rem < width <= 45rem) می‌سازد.

• مقادیر با درصد، بدون واحد یا تابع‌های CSS نادیده گرفته می‌شوند.
• اگر فقط یکی از دو مقدار معتبر باشد، همان یکی با یک Media Query از نوع max-width استفاده می‌شود.
• اگر هیچ‌کدام معتبر نباشد، مقادیر پیش‌فرض اعمال می‌شوند.
• اگر تبلت کوچک‌تر یا مساوی موبایل باشد، فقط نقطه شکست موبایل استفاده می‌شود.
• این تنظیم سراسری است و برای هر نوع بلوک جداگانه تعریف نمی‌شود.

استایل ریسپانسیو در theme.json داخل styles.blocks و زیر کلیدهای @mobile یا @tablet نوشته می‌شود. حالت‌های تعاملی مثل :hover را هم می‌توان داخل همین کلیدها گذاشت؛ مثلاً رنگ پس‌زمینه دکمه هنگام hover فقط در موبایل. برای هر بلوک منفرد هم همین ساختار در صفت style خود بلوک ذخیره می‌شود. خروجی CSS نهایی چیزی شبیه تصویر زیر است.

وردپرس اعلان‌های غیرچیدمانی (مثل فونت و رنگ) را برای هر نمونه بلوک با !important علامت می‌زند تا بر استایل‌های درون‌خطی پیش‌فرض غلبه کند. اگر قالب شما CSS اختصاصی سنگینی دارد، این نکته را هنگام دیباگ تداخل استایل در نظر بگیرید. سایت‌هایی که نمی‌خواهند کاربران به این قابلیت دسترسی داشته باشند، می‌توانند با فیلتر block_editor_settings_all مقدار responsiveEditingEnabled را false کنند؛ این کار گزینه‌های رابط را پنهان می‌کند اما استایل‌های ذخیره‌شده قبلی را حذف نمی‌کند.

بلوک Tabs و Notes در وردپرس ۷.۱ چه کاربردی دارند؟

بلوک Tabs در وردپرس ۷.۱ یک بلوک هسته برای نمایش محتوا در زبانه‌هاست و جای افزونه‌های جانبی تب را برای کاربردهای ساده می‌گیرد؛ Notes هم ابزار همکاری تیمی است که حالا می‌توان آن را به بخش مشخصی از متن پیوست کرد، نه فقط به کل بلوک. هر دو قابلیت برای سایت‌هایی که چند نویسنده یا محتوای مقایسه‌ای دارند مفیدند.

هنگام استفاده از بلوک Tabs برای محتوای مهم، دقت کنید که پاسخ اصلی هر بخش در متن صفحه موجود باشد و فقط به تعامل کاربر وابسته نباشد؛ موتورهای جستجو و پاسخ‌های هوش مصنوعی محتوای ساختارمند و قابل‌استناد را ترجیح می‌دهند. این موضوع را در مقاله تاثیر AI Overviews بر ترافیک سایت‌های فارسی بررسی کرده‌ایم.

قابلیت	پیش از ۷.۱	در وردپرس ۷.۱
محتوای زبانه‌ای	افزونه جانبی یا کد سفارشی	بلوک هسته Tabs
لیست پخش صوتی	افزونه یا شورت‌کد	بلوک Playlist با موج صدا
یادداشت ویراستار	روی کل بلوک	روی متن انتخابی، با منشن و چند گفت‌وگو
استایل hover دکمه	CSS سفارشی	از تنظیمات بلوک Button
فاصله متفاوت در موبایل	CSS سفارشی با Media Query	استایل ریسپانسیو در ویرایشگر

نکته: یادداشت‌های Notes جایگزین ویرایش هم‌زمان نیستند. طبق Field Guide وردپرس ۷.۱، ویرایش هم‌زمان در نسخه نهایی ۷.۱ هم فعال نشده است. دلیل حذف آن از نسخه ۷.۰ را در مقاله وردپرس ۷.۰؛ مهم‌ترین تغییرات توضیح داده‌ایم.

آپدیت به وردپرس ۷.۱ برای توسعه‌دهندگان چه تغییری دارد؟

مهم‌ترین تغییر وردپرس ۷.۱ برای توسعه‌دهندگان این است که ویرایشگر نوشته حالا برای همه قالب‌ها و همه بلوک‌ها همیشه داخل iframe اجرا می‌شود. طبق یادداشت تیم هسته، در ۷.۰ وجود یک بلوک با Block API کمتر از نسخه ۳ ویرایشگر را از iframe خارج می‌کرد؛ در ۷.۱ نوع قالب و نسخه API بلوک‌ها دیگر روی این رفتار اثری ندارند.

1. بلوک‌های سفارشی و افزونه‌هایی که بلوک‌ها را گسترش می‌دهند در ویرایشگر iframe تست کنید.
2. به‌جای document و window سراسری، از ownerDocument و defaultView المان داخل بوم ویرایشگر استفاده کنید.
3. برای افزودن و پاک کردن Event Listener روی المان‌های بوم از useRefEffect استفاده کنید.
4. افزونه‌هایی که به jQuery UI وابسته‌اند را با نسخه ۱.۱۴.۲ تست کنید.

دیگر تغییرات توسعه‌دهنده شامل عمومی شدن SVG Icon API با توابع wp_register_icon() و wp_get_icon()، گسترش Abilities API و پردازش تصویر در مرورگر با نسخه WebAssembly کتابخانه libvips است که بار سرور و خطاهای محدودیت حافظه هنگام آپلود را کم می‌کند و از AVIF، HEIC و HDR پشتیبانی می‌کند. بلوک Classic هم برخلاف پیشنهاد اولیه، در فهرست بلوک‌ها باقی ماند. پس از هر آپدیت اصلی، چک‌لیست امنیت وردپرس در ۲۰۲۶ را هم مرور کنید. اگر سایت شما به هوش مصنوعی در هسته وابسته است، Abilities API را در کنار ایجنت‌های هوش مصنوعی ببینید؛ این API پایه اتصال عامل‌ها به وردپرس است.

محدودیت‌های استایل ریسپانسیو وردپرس ۷.۱ چیست؟

محدودیت اصلی استایل ریسپانسیو وردپرس ۷.۱ این است که فقط دو نقطه شکست سراسری دارد و برای چیدمان‌های پیچیده یا بیش از سه اندازه صفحه، هنوز CSS سفارشی یا Container Query لازم است. همچنین فقط بلوک‌هایی از آن پشتیبانی می‌کنند که از Block Supports استاندارد هسته استفاده کنند.

• کلید @desktop وجود ندارد؛ برای صفحه‌های خیلی بزرگ باید CSS بنویسید.
• نقاط شکست برای هر بلوک جداگانه قابل تنظیم نیستند.
• بلوک‌های قدیمی افزونه‌ها که استایل اختصاصی خودشان را دارند، از آن بهره نمی‌برند.
• استفاده بی‌رویه از آن در هر بلوک، نگهداری طراحی را سخت می‌کند؛ بهتر است در Global Styles تعریف شود.

از تجربه تیم siloow: قالب‌های بلوکی و طراحی واکنش‌گرا

از تجربه تیم siloow در ساخت قالب‌های اختصاصی وردپرس، بخش قابل‌توجهی از CSS سفارشی ما همیشه صرف چند کار تکراری می‌شد: کم کردن فاصله Group در موبایل، کوچک کردن تیترها و تغییر رنگ hover دکمه‌ها. با وردپرس ۷.۱ این موارد به theme.json منتقل می‌شوند و مدیر سایت هم می‌تواند بدون تماس با ما آن‌ها را تغییر دهد. درسی که گرفتیم این بود که نقاط شکست قالب را از روز اول با سیستم طراحی هماهنگ کنیم؛ اگر قالب در CSS خودش 768px را نقطه شکست تبلت گرفته و وردپرس 782px، رفتار صفحه در بازه بین این دو عدد گیج‌کننده می‌شود. برای همین در قالب‌های جدید، settings.viewport را با همان اعداد سیستم طراحی تنظیم می‌کنیم.

جمع‌بندی

• وردپرس ۷.۱ «Mary Lou» در ۱۹ اوت ۲۰۲۶ منتشر شد.
• استایل ریسپانسیو اجازه می‌دهد بدون CSS برای موبایل (تا 480px) و تبلت (تا 782px) استایل جدا تعیین کنید.
• قالب‌سازها نقاط شکست را با settings.viewport در theme.json تغییر می‌دهند.
• بلوک‌های Tabs و Playlist، Notes روی متن انتخابی و استایل hover دکمه اضافه شدند.
• ویرایشگر نوشته همیشه iframe است؛ بلوک‌های سفارشی را تست کنید.

اگر قالب وردپرس شما قدیمی است و می‌خواهید آن را به قالب بلوکی با استایل ریسپانسیو و سیستم طراحی منظم تبدیل کنید، خدمات طراحی سایت وردپرس siloow را ببینید. خبرها و راهنماهای بیشتر وردپرس را در مگ siloow بخوانید.

منابع

• WordPress.org News: WordPress 7.1 Mary Lou
• Make WordPress Core: Responsive block styles and configurable viewports in WordPress 7.1
• Make WordPress Core: WordPress 7.1 Field Guide
• Make WordPress Core: Iframed Editor Changes in WordPress 7.1

سوالات متداول درباره وردپرس ۷.۱