Skip to content

Block editor, WooCommerce & forms

Modality documentation

Block editor, WooCommerce & forms

Browse the documentation

The block editor

The editor looks like your site: the same fonts, colors, content width and heading styles. The Modality palette and fonts are in the editor’s color and typography settings, and they follow the Customizer, so changing the Theme Color there also changes it in your posts.

  • Wide and full-width blocks work on pages without a sidebar.
  • Block styles: Card for groups, Rounded corners and Circle for images, Testimonial for quotes, Check marks for lists and Accent underline for headings. Pick them in the block’s Styles panel.
  • Patterns: every front page section is a pattern in Patterns → Modality (see Setting up the front page).

WooCommerce

Modality styles the shop, product, cart, checkout and account pages to match your preset, including the block-based cart and checkout. With WooCommerce active, Blog & Footer → Shop (WooCommerce) adds:

  • Show the cart in the header, with the number of items.
  • Products per row (2, 3 or 4) and Products per page.
  • Shop and product pages layout, with or without a sidebar.

Other shop settings are in WooCommerce’s own panel in the Customizer.

Contact Form 7

Forms made with Contact Form 7 get Modality’s field, button and message styles, so a contact page looks finished without extra CSS. Its stylesheet only loads when Contact Form 7 is active.

Translation and right-to-left languages

Every text in the theme can be translated, and the layout mirrors itself for right-to-left languages such as Arabic and Hebrew. Translations come from translate.wordpress.org; plugins such as Loco Translate work too.

Back to top