{"id":330399,"date":"2026-06-23T11:20:51","date_gmt":"2026-06-23T11:20:51","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/mortar\/"},"modified":"2026-06-23T11:55:12","modified_gmt":"2026-06-23T11:55:12","slug":"mortar","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/mortar\/","author":20402496,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0","requires":"6.2","requires_php":"7.4","requires_plugins":null,"header_name":"Mortar for Bricks Builder","header_author":"Samir Haddad","header_description":"A workflow toolkit for Bricks Builder \u2014 BEM classes, CSS recipes, smart values, HTML tags and more.","assets_banners_color":"2c2555","last_updated":"2026-06-23 11:55:12","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/samirh.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":69,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"samirhp","date":"2026-06-23 11:55:12"}},"upgrade_notice":{"1.0.0":"<p>First public release of Mortar.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3583135,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3583135,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3583135,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3583135,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3583135,"resolution":"1","location":"assets","locale":"","width":1880,"height":1214},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3583135,"resolution":"2","location":"assets","locale":"","width":1880,"height":1216},"screenshot-3.gif":{"filename":"screenshot-3.gif","revision":3583135,"resolution":"3","location":"assets","locale":"","width":800,"height":499},"screenshot-4.gif":{"filename":"screenshot-4.gif","revision":3583135,"resolution":"4","location":"assets","locale":"","width":800,"height":499}},"screenshots":{"1":"The Mortar settings panel inside the Bricks editor \u2014 every module with a description and a live example.","2":"BEM Generator \u2014 bulk-create and rename classes with BEM naming, right from the structure panel.","3":"CSS Recipes \u2014 type a shortcut like <code>@clickable-parent;<\/code> and it expands into full CSS.","4":"Smart Values \u2014 turn <code>--space-m<\/code> into <code>var(--space-m)<\/code> with one keypress."}},"plugin_section":[],"plugin_tags":[256983,198723,356,1084,8197],"plugin_category":[59],"plugin_contributors":[268515],"plugin_business_model":[],"class_list":["post-330399","plugin","type-plugin","status-publish","hentry","plugin_tags-bem","plugin_tags-bricks","plugin_tags-css","plugin_tags-page-builder","plugin_tags-workflow","plugin_category-utilities-and-tools","plugin_contributors-samirhp","plugin_committers-samirhp"],"banners":{"banner":"https:\/\/ps.w.org\/mortar\/assets\/banner-772x250.png?rev=3583135","banner_2x":"https:\/\/ps.w.org\/mortar\/assets\/banner-1544x500.png?rev=3583135","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/mortar\/assets\/icon-128x128.png?rev=3583135","icon_2x":"https:\/\/ps.w.org\/mortar\/assets\/icon-256x256.png?rev=3583135","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/mortar\/assets\/screenshot-1.jpg?rev=3583135","caption":"The Mortar settings panel inside the Bricks editor \u2014 every module with a description and a live example."},{"src":"https:\/\/ps.w.org\/mortar\/assets\/screenshot-2.jpg?rev=3583135","caption":"BEM Generator \u2014 bulk-create and rename classes with BEM naming, right from the structure panel."},{"src":"https:\/\/ps.w.org\/mortar\/assets\/screenshot-3.gif?rev=3583135","caption":"CSS Recipes \u2014 type a shortcut like <code>@clickable-parent;<\/code> and it expands into full CSS."},{"src":"https:\/\/ps.w.org\/mortar\/assets\/screenshot-4.gif?rev=3583135","caption":"Smart Values \u2014 turn <code>--space-m<\/code> into <code>var(--space-m)<\/code> with one keypress."}],"raw_content":"<!--section=description-->\n<p>Mortar makes building in Bricks faster and cleaner. It adds a set of focused workflow tools to the Bricks editor, each explained with a live example, so you always know what a tool does before you turn it on.<\/p>\n\n<p>Generate BEM classes in bulk, expand CSS shortcuts into full code, convert smart values, change semantic tags, and move faster through the structure panel. Everything lives in one clean panel, and every module is optional, so you switch on only what you need.<\/p>\n\n<p><strong>Included modules<\/strong><\/p>\n\n<ul>\n<li><strong>BEM Generator:<\/strong> create and rename CSS classes with BEM naming in bulk, right from the structure panel.<\/li>\n<li><strong>CSS Recipes:<\/strong> type a shortcut like <code>@clickable-parent;<\/code> and it expands into full CSS.<\/li>\n<li><strong>Smart Values:<\/strong> press Enter to turn <code>--space-m<\/code> into <code>var(--space-m)<\/code>, and <code>var(--x) * 2<\/code> into <code>calc(var(--x) * 2)<\/code>.<\/li>\n<li><strong>HTML Tags:<\/strong> change an element's semantic tag without leaving the structure panel.<\/li>\n<li><strong>Style Indicators:<\/strong> a coloured bar per element so you see at a glance what is styled via class or via ID.<\/li>\n<li><strong>Sidebar Shortcuts:<\/strong> a configurable quick-insert rail for your most-used elements.<\/li>\n<li><strong>Auto-Select Class:<\/strong> selects the class automatically after you create or rename it.<\/li>\n<li><strong>Export ID Styles to Class:<\/strong> move ID-level styles onto the first CSS class in one click.<\/li>\n<li><strong>Expand Children:<\/strong> expand or collapse an element's entire subtree at once.<\/li>\n<\/ul>\n\n<p>Every module follows the same clean settings panel, with a description and a live example.<\/p>\n\n<p><strong>Independence and trademark<\/strong><\/p>\n\n<p>Mortar is an independent project. It is not affiliated with, endorsed by, or sponsored by Bricks Builder or its makers. \"Bricks\" is a trademark of its respective owner and is used here only to describe compatibility.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin ZIP via <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>, or copy the <code>mortar<\/code> folder to <code>wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate <strong>Mortar<\/strong> through the <strong>Plugins<\/strong> screen.<\/li>\n<li>Open the Bricks Builder editor \u2014 a Mortar icon appears in the top toolbar.<\/li>\n<li>Click it to open the settings panel and enable the modules you want.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20it%20require%20bricks%20builder%3F\"><h3>Does it require Bricks Builder?<\/h3><\/dt>\n<dd><p>Yes. Mortar runs only inside the Bricks Builder editor (tested with Bricks 2.x).<\/p><\/dd>\n<dt id=\"where%20are%20the%20settings%3F\"><h3>Where are the settings?<\/h3><\/dt>\n<dd><p>Inside the Bricks editor, click the Mortar icon in the top toolbar. The panel lists every module with a description and an example.<\/p><\/dd>\n<dt id=\"can%20i%20turn%20modules%20off%3F\"><h3>Can I turn modules off?<\/h3><\/dt>\n<dd><p>Yes. Every module has its own toggle; save and reload to apply.<\/p><\/dd>\n<dt id=\"how%20do%20updates%20work%3F\"><h3>How do updates work?<\/h3><\/dt>\n<dd><p>Through the WordPress Plugins screen, like any other plugin from the directory.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First public release on WordPress.org.<\/li>\n<li>Settings panel (master\u2013detail) with a description and live example per module.<\/li>\n<li>Modules: BEM Generator, Style Indicators, Sidebar Shortcuts, HTML Tags, Auto-Select Class, Export ID Styles to Class, CSS Recipes, Expand Children and Smart Values.<\/li>\n<li>Accessibility: visible focus rings, ARIA labels and keyboard activation.<\/li>\n<\/ul>","raw_excerpt":"A cleaner, faster workflow for Bricks Builder. BEM classes, CSS recipes, smart values and shortcuts, all in one explained panel.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/330399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=330399"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/samirhp"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=330399"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=330399"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=330399"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=330399"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=330399"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=330399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}