Responzivní stylování ve WordPress 7.1: Jak nastavit vzhled bloků pro mobil a tablet bez CSS

Autor: Správa WordPress
návody wordpress

WordPress 7.1, pojmenovaný po jazzové legendě Mary Lou Williams, přináší jednu z nejočekávanějších funkcí v historii block editoru – nativní responzivní stylování. Po letech, kdy bylo přizpůsobení vzhledu pro mobilní zařízení možné jen přes vlastní CSS, plugin třetí strany nebo složité úpravy v theme.json, nyní stačí pár kliknutí v editoru. Tento návod vás provede krok za krokem všemi možnostmi, které WordPress 7.1 v oblasti responzivního designu nabízí.

Co přesně responzivní stylování ve WordPress 7.1 umí

Nový systém staví na jednoduchém principu: každý blok má základní (desktopový) styl, který můžete volitelně přepsat pro tablet a mobil. WordPress 7.1 zavádí dva nové klíče – @mobile a @tablet – které lze vložit kamkoli, kde už dnes blokové styly žijí: do theme.json, do atributu style konkrétního bloku i do stylových variací bloku.

Podporované vlastnosti zahrnují vše, co block editor už umí:

  • Typografie – velikost písma, řez, výška řádku, mezery
  • Barvy – text, pozadí, odkazy
  • Pozadí a okraje – barva, obrázek, gradient, šířka okraje
  • Dimenze a rozestupy – padding, margin, šířka
  • Rozvržení – layout, blockGap, zarovnání

To znamená, že například nadpis, který na desktopu zabírá celou šířku s velkým fontem, můžete na mobilu zmenšit, zúžit a přidat mu jinou barvu – vše bez jediného řádku CSS.

Výchozí breakpointy a jak je změnit

WordPress 7.1 přichází s přednastavenými šířkami pro jednotlivá zobrazení. Desktop tvoří základ – neexistuje pro něj žádný @desktop klíč, protože základní styl se aplikuje všude, kde není přepsán.

  • Mobil (@mobile): @media (width <= 480px) – tedy všechna zařízení do šířky 480 pixelů
  • Tablet (@tablet): @media (480px < width <= 782px) – šířky mezi 481 a 782 pixely

Pro mnoho webů jsou tyto hodnoty dostačující. Pokud ale váš design používá vlastní breakpointy – třeba 640 px pro tablet a 1024 px pro desktop – můžete je změnit. Stačí do souboru theme.json přidat sekci settings.viewport:

{
  "settings": {
    "viewport": {
      "mobile": "40rem",
      "tablet": "64rem"
    }
  }
}

Hodnoty musí být v px, em nebo rem. Procenta, CSS funkce a bezjednotková čísla jsou ignorována. Pokud nastavíte tablet menší nebo rovný mobilu, WordPress tabletový breakpoint zahodí. Toto nastavení je celosystémové – nelze ho konfigurovat pro jednotlivé typy bloků zvlášť.

Jak nastavit responzivní styl v editoru krok za krokem

Největší novinka je určená především pro běžné uživatele, kteří nechtějí sahat do kódu. Postup je následující:

  1. Otevřete editor stránky nebo příspěvku a vyberte blok, který chcete upravit (například Nadpis, Odstavec nebo Skupina).
  2. Klikněte na tlačítko náhledu zařízení v horní liště editoru (vedle tlačítka náhledu). Objeví se možnosti Desktop, Tablet a Mobil.
  3. Zapněte přepínač “Responzivní úpravy” – ten aktivuje režim, ve kterém se změny stylů aplikují jen na aktuálně zvolené zobrazení.
  4. Přepněte na Tablet nebo Mobil – šířka editační plochy se přizpůsobí a vy nyní upravujete výhradně toto zobrazení.
  5. Proveďte změny – upravte velikost písma, barvu, padding nebo cokoli jiného. Všechny úpravy se uloží jen pro vybrané zobrazení.

WordPress na frontendu automaticky vygeneruje CSS s media query a přidá ke každému bloku stabilní třídu. Instance bloku, které mají responzivní úpravy, dostanou !important, aby přebily základní inline styly.

Pokročilé možnosti: Pseudo-stavy a jejich kombinace s responzivitou

WordPress 7.1 nepřidává jen responzivní styly, ale také podporu pro pseudo-stavy – :hover, :focus, :focus-visible a :active. Zatím jsou k dispozici u bloků Tlačítko a Navigační odkaz. Klíčová vlastnost: oba systémy se dají kombinovat.

V praxi to znamená, že můžete definovat, jak má tlačítko vypadat při najetí myší na desktopu a jak úplně jinak na mobilu. V theme.json to vypadá takto:

{
  "styles": {
    "blocks": {
      "core/button": {
        "@mobile": {
          ":hover": {
            "color": {
              "background": "var:preset|color|accent",
              "text": "var:preset|color|base"
            }
          }
        }
      }
    }
  }
}

Nejprve se definuje viewport (@mobile), uvnitř něj pseudo-stav (:hover). Tento zápis říká: “Když je zobrazení mobilní a uživatel najede na tlačítko, změň barvu pozadí na akcent a text na bílou.”

Vypnutí responzivních úprav pro specifické projekty

Ne každý web potřebuje, aby jeho editoři měli přístup k responzivnímu stylování. Pokud spravujete weby pro klienty, kde je design pevně daný a editoři by ho mohli nechtěně rozbít, můžete funkci vypnout.

Stačí přidat filtr do must-use pluginu:

function example_disable_responsive_editing( $settings ) {
    $settings['responsiveEditingEnabled'] = false;
    return $settings;
}
add_filter( 'block_editor_settings_all', 'example_disable_responsive_editing' );

Po vypnutí zmizí přepínač “Responzivní úpravy” z nabídky zobrazení i skupina “Viewport” v rozbalovacím seznamu “Stavy” v globálních stylech. Náhled zařízení zůstane funkční a pseudo-stavy jako Hover zůstanou k dispozici. Již uložené responzivní styly v theme.json nebo v atributech bloků zůstanou nedotčeny a dále se vykreslují.

Proč je tato změna důležitá pro každý WordPress web

Responzivní design byl donedávna doménou, kterou si každé téma vymýšlelo po svém – obvykle sadou media queries na konci style.css. Tahle praxe měla několik problémů:

  • Media queries byly oddělené od design systému – žily ve vlastním souboru, mimo theme.json, mimo dohled nástrojů pro správu design tokenů
  • Při migraci na nové téma se ztrácely – responzivní úpravy bylo nutné pracně přepisovat
  • Nebyly dostupné běžným editorům – jen vývojářům, kteří umí CSS

WordPress 7.1 tento problém řeší na úrovni architektury. Responzivní hodnoty jsou nyní součástí stejného datového modelu jako základní styly. Putují s tématem, jsou verzovatelné a přístupné v editoru bez znalosti CSS.

Podle oficiálního Field Guide obsahuje verze 7.1 více než 310 vyřešených ticketů v Core Trac a přes 1 500 vylepšení v Gutenbergu. Z toho přes 100 vylepšení a 180 oprav chyb přímo v jádru. Na vydání se podílelo přes 800 přispěvatelů, z toho 170 poprvé.

Co si z článku odnést a na co se připravit

Pokud spravujete WordPress weby, máte nyní několik možností, jak novinku využít:

  1. Projděte všechna dětská témata a úseky Additional CSS – vyhledejte @media deklarace. Tento seznam je váš migrační inventář. Většinu lze převést do @mobile a @tablet klíčů.
  2. Na jednom reprezentativním webu otestujte přidání settings.viewport do theme.json s breakpointy, které váš design systém už používá. Přeneste dvě až tři nejčastější responzivní úpravy a porovnejte vykreslení.
  3. Rozhodněte, zda nechat responsiveEditingEnabled zapnuté – pro editory, kteří tvoří obsah přímo, je přepínač intuitivní. Na webech s malým týmem a pevným designem ho můžete vypnout.
  4. Neinstalujte plugin, který “přidává UI pro responzivní styly” – nové API je natolik přímočaré, že by plugin ukládající breakpointy do databáze představoval technický dluh. Breakpointy patří do souboru tématu, verzované s design tokeny.
  5. Aktualizujte na WordPress 7.1 – pokud jste to ještě neudělali. Responzivní stylování je zpětně kompatibilní, nic nerozbíjí a okamžitě rozšiřuje možnosti vašeho editoru.

Zdroje

Zdroj: Make WordPress Core – Responsive block styles and configurable viewports in WordPress 7.1 (5. 8. 2026)

Zdroj: InstaWP – WordPress 7.1: What’s New for Developers (20. 8. 2026)

Zdroj: The WP Clan – WordPress 7.1 Responsive Block Styles Land in Global Styles (6. 8. 2026)

Potřebujete s WordPress webem pomoct? Kontakt najdete přes formulář na stránce Kontakt.