Assembler: Improving styles

[richtabor]

Changes proposed in this Pull Request:

• Set color inheritance for headings with links at the theme level.
• Remove text-wrap balance, as its conflicting with the editor.
• Add subtle transition effect for buttons.
• Reduce footprint of styles, which allow for simpler section styles (and simpler overriding of styles).
• Update style variations.

Visual

CleanShot.2024-09-13.at.12.27.55.mp4

[github-actions]

Preview changes

I've detected changes to the following themes in this PR: Assembler.

You can preview these changes by following the links below:

• Preview changes for Assembler

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[richtabor]

You can test this better using the playground builder, with these steps, as it includes content to demo with. Would be nice if themes can include their own playground blueprint.json, in the automated GitHub action here.

{
    "steps": [
      {
        "step": "login",
        "username": "admin",
        "password": "password"
      },
      {
        "step": "installTheme",
        "themeZipFile": {
          "resource": "url",
          "url": "https://github-proxy.com/proxy.php?action=partial&repo=Automattic/themes&directory=assembler&branch=improve/section-styles-colors"
        }
      },
      {
        "step": "activateTheme",
        "themeFolderName": "assembler"
      },
      {
        "step": "setSiteOptions",
        "options": {
          "blogname": "Assembler",
          "show_on_front": "page",
          "page_on_front": "4"
        }
      },
      {
        "step": "wp-cli",
        "command": "wp post create --post_type=page --post_title='Welcome' --post_content='<!-- wp:cover {\"url\":\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/1.jpeg\",\"id\":4830,\"dimRatio\":50,\"isUserOverlayColor\":true,\"minHeightUnit\":\"px\",\"className\":\"alignfull is-style-default\",\"style\":{\"spacing\":{\"padding\":{\"right\":\"var:preset|spacing|50\",\"left\":\"var:preset|spacing|50\"},\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}},\"layout\":{\"type\":\"default\"}} -->\r\n<div class=\"wp-block-cover alignfull is-style-default\" style=\"margin-top:0;margin-bottom:0;padding-right:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><img class=\"wp-block-cover__image-background wp-image-4830\" alt=\"\" src=\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/1.jpeg\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container\"><!-- wp:spacer {\"height\":\"200px\"} -->\r\n<div style=\"height:200px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":\"0\"}},\"layout\":{\"type\":\"constrained\",\"contentSize\":\"800px\"}} -->\r\n<div class=\"wp-block-group alignwide\"><!-- wp:heading {\"textAlign\":\"center\",\"className\":\"text-balance\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\",\"left\":\"0\",\"right\":\"0\"}}},\"fontSize\":\"xx-large\"} -->\r\n<h2 class=\"wp-block-heading has-text-align-center text-balance has-xx-large-font-size\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\">Where architecture meets nature.<\/h2>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|40\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--40)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-buttons\"><!-- wp:button {\"width\":50} -->\r\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link wp-element-button\">Explore our cabins<\/a><\/div>\r\n<!-- \/wp:button --><\/div>\r\n<!-- \/wp:buttons --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:spacer {\"height\":\"200px\"} -->\r\n<div style=\"height:200px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div><\/div>\r\n<!-- \/wp:cover -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Services\",\"categories\":[\"services\"],\"patternName\":\"core\/block\/4772\"},\"align\":\"full\",\"className\":\"alignfull is-style-default\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}},\"layout\":{\"type\":\"constrained\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-group alignfull is-style-default\" style=\"margin-top:0;margin-bottom:0\"><!-- wp:spacer {\"height\":\"var:preset|spacing|60\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--60)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|50\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"style\":{\"spacing\":{\"blockGap\":\"var:preset|spacing|30\"}}} -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"layout\":{\"selfStretch\":\"fixed\",\"flexSize\":\"100%\"}},\"fontSize\":\"x-large\"} -->\r\n<h2 class=\"wp-block-heading has-x-large-font-size\">An escape from the ordinary.<\/h2>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:buttons -->\r\n<div class=\"wp-block-buttons\"><!-- wp:button -->\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Default Button<\/a><\/div>\r\n<!-- \/wp:button --><\/div>\r\n<!-- \/wp:buttons -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|10\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}}} -->\r\n<div style=\"margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--10)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column {\"style\":{\"spacing\":{\"blockGap\":\"var:preset|spacing|40\"}}} -->\r\n<div class=\"wp-block-column\"><!-- wp:group {\"metadata\":{\"name\":\"Services Item\"},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"color\":{}}} -->\r\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/2-1.jpg\" alt=\"\" style=\"aspect-ratio:4\/3;object-fit:cover\"\/><\/figure>\r\n<!-- \/wp:image -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Bathe your space in natural light with thoughtfully designed windows that blur the lines between inside and out, creating a peaceful and inviting environment.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Services Item\"},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"color\":{}}} -->\r\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/2-1.jpg\" alt=\"\" style=\"aspect-ratio:4\/3;object-fit:cover\"\/><\/figure>\r\n<!-- \/wp:image -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Bathe your space in natural light with thoughtfully designed windows that blur the lines between inside and out, creating a peaceful and inviting environment.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:group --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column {\"style\":{\"spacing\":{\"blockGap\":\"var:preset|spacing|40\"}}} -->\r\n<div class=\"wp-block-column\"><!-- wp:group {\"metadata\":{\"name\":\"Services Item\"},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"color\":{}}} -->\r\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/2-1.jpg\" alt=\"\" style=\"aspect-ratio:4\/3;object-fit:cover\"\/><\/figure>\r\n<!-- \/wp:image -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Bathe your space in natural light with thoughtfully designed windows that blur the lines between inside and out, creating a peaceful and inviting environment.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Services Item\"},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"color\":{}}} -->\r\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/2-1.jpg\" alt=\"\" style=\"aspect-ratio:4\/3;object-fit:cover\"\/><\/figure>\r\n<!-- \/wp:image -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Bathe your space in natural light with thoughtfully designed windows that blur the lines between inside and out, creating a peaceful and inviting environment.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:group --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|60\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--60)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Services\"},\"align\":\"full\",\"className\":\"alignfull is-style-section-1\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}},\"layout\":{\"type\":\"constrained\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-group alignfull is-style-section-1\" style=\"margin-top:0;margin-bottom:0\"><!-- wp:spacer {\"height\":\"var:preset|spacing|50\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--50)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:heading {\"textAlign\":\"left\",\"align\":\"wide\"} -->\r\n<h2 class=\"wp-block-heading alignwide has-text-align-left\">Style One<\/h2>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:spacer {\"height\":\"8px\"} -->\r\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:separator {\"align\":\"wide\",\"className\":\"is-style-wide\"} -->\r\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\r\n<!-- \/wp:separator -->\r\n\r\n<!-- wp:spacer {\"height\":\"8px\"} -->\r\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":\"var:preset|spacing|40\"}},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\",\"flexWrap\":\"wrap\"}} -->\r\n<div class=\"wp-block-group alignwide\"><!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Escape to Tuscany<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Wake up to breathtaking views of rolling hills, enjoy a morning espresso on the terrace, and immerse yourself in authentic Italian charm.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Relax in tranquility<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Indulge in Italian culture with easy access to local wineries, markets, and historical villages. Whether you\u2019re seeking relaxation or adventure.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Discover local flavors<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Enjoy an outdoor dining area with a traditional wood-fired oven for authentic Italian cooking. Every corner of the house has been designed to offer comfort.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">A cozy, rustic retreat<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Every corner of the house has been designed to offer comfort. This charming villa offers an authentic experience with handcrafted furnishings.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Unforgettable sunsets<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">End each day with stunning sunsets from the terrace, a perfect setting for relaxation. Lounge under the Tuscan sun, or simply take in the breathtaking views.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Authentic experiences<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Relax by the cozy fireplace after a day of exploring the countryside, and enjoy the warmth and ambiance that only a rustic retreat can provide.&nbsp;<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:buttons -->\r\n<div class=\"wp-block-buttons\"><!-- wp:button -->\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Style One Button<\/a><\/div>\r\n<!-- \/wp:button --><\/div>\r\n<!-- \/wp:buttons --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|60\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--60)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Services\",\"categories\":[\"services\"],\"patternName\":\"core\/block\/4772\"},\"align\":\"full\",\"className\":\"alignfull is-style-default\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}},\"layout\":{\"type\":\"constrained\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-group alignfull is-style-default\" style=\"margin-top:0;margin-bottom:0\"><!-- wp:spacer {\"height\":\"var:preset|spacing|60\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--60)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|30\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"layout\":{\"selfStretch\":\"fixed\",\"flexSize\":\"100%\"}},\"fontSize\":\"x-large\"} -->\r\n<h2 class=\"wp-block-heading has-x-large-font-size\">Review the Duotone filters<\/h2>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:buttons -->\r\n<div class=\"wp-block-buttons\"><!-- wp:button -->\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Default Button<\/a><\/div>\r\n<!-- \/wp:button --><\/div>\r\n<!-- \/wp:buttons -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|10\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}}} -->\r\n<div style=\"margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--10)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column {\"style\":{\"spacing\":{\"blockGap\":\"0\"}}} -->\r\n<div class=\"wp-block-column\"><!-- wp:group {\"metadata\":{\"name\":\"Services Item\"},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"color\":{\"duotone\":\"var:preset|duotone|duotone-1\"}}} -->\r\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/1.jpeg\" alt=\"\" style=\"aspect-ratio:4\/3;object-fit:cover\"\/><figcaption class=\"wp-element-caption\">A small caption here.<\/figcaption><\/figure>\r\n<!-- \/wp:image -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Bathe your space in natural light with thoughtfully designed windows that blur the lines between inside and out, creating a peaceful and inviting environment.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:group --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column {\"style\":{\"spacing\":{\"blockGap\":\"0\"}}} -->\r\n<div class=\"wp-block-column\"><!-- wp:group {\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:image {\"aspectRatio\":\"4\/3\",\"scale\":\"cover\",\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"style\":{\"color\":{\"duotone\":\"var:preset|duotone|duotone-1\"}}} -->\r\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/dotcompatterns.wordpress.com\/wp-content\/uploads\/2024\/09\/1.jpeg\" alt=\"\" style=\"aspect-ratio:4\/3;object-fit:cover\"\/><figcaption class=\"wp-element-caption\">A small caption here.<\/figcaption><\/figure>\r\n<!-- \/wp:image -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Built with sustainability in mind, each structure combines modern design with eco-friendly materials, offering a tranquil retreat that\u2019s both beautiful and functional.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:group --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|60\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--60)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Services\"},\"align\":\"full\",\"className\":\"alignfull is-style-section-2\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}},\"layout\":{\"type\":\"constrained\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-group alignfull is-style-section-2\" style=\"margin-top:0;margin-bottom:0\"><!-- wp:spacer {\"height\":\"var:preset|spacing|50\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--50)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:heading {\"textAlign\":\"left\",\"align\":\"wide\"} -->\r\n<h2 class=\"wp-block-heading alignwide has-text-align-left\">Style Two<\/h2>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:spacer {\"height\":\"8px\"} -->\r\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:separator {\"align\":\"wide\",\"className\":\"is-style-wide\"} -->\r\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\r\n<!-- \/wp:separator -->\r\n\r\n<!-- wp:spacer {\"height\":\"8px\"} -->\r\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":\"var:preset|spacing|40\"}},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\",\"flexWrap\":\"wrap\"}} -->\r\n<div class=\"wp-block-group alignwide\"><!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Escape to Tuscany<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Wake up to breathtaking views of rolling hills, enjoy a morning espresso on the terrace, and immerse yourself in authentic Italian charm.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Relax in tranquility<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Indulge in Italian culture with easy access to local wineries, markets, and historical villages. Whether you\u2019re seeking relaxation or adventure.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Discover local flavors<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Enjoy an outdoor dining area with a traditional wood-fired oven for authentic Italian cooking. Every corner of the house has been designed to offer comfort.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">A cozy, rustic retreat<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Every corner of the house has been designed to offer comfort. This charming villa offers an authentic experience with handcrafted furnishings.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Unforgettable sunsets<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">End each day with stunning sunsets from the terrace, a perfect setting for relaxation. Lounge under the Tuscan sun, or simply take in the breathtaking views.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Authentic experiences<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Relax by the cozy fireplace after a day of exploring the countryside, and enjoy the warmth and ambiance that only a rustic retreat can provide.&nbsp;<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:buttons -->\r\n<div class=\"wp-block-buttons\"><!-- wp:button -->\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Style Two Button<\/a><\/div>\r\n<!-- \/wp:button --><\/div>\r\n<!-- \/wp:buttons --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|60\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--60)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Intro\"},\"align\":\"full\",\"className\":\"alignfull is-style-default\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}},\"layout\":{\"type\":\"constrained\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-group alignfull is-style-default\" style=\"margin-top:0;margin-bottom:0\"><!-- wp:spacer {\"height\":\"var:preset|spacing|80\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:columns {\"align\":\"wide\"} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"width\":\"15%\"} -->\r\n<div class=\"wp-block-column\" style=\"flex-basis:15%\"><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column {\"width\":\"70%\"} -->\r\n<div class=\"wp-block-column\" style=\"flex-basis:70%\"><!-- wp:heading {\"textAlign\":\"center\",\"fontSize\":\"xx-large\"} -->\r\n<h2 class=\"wp-block-heading has-text-align-center has-xx-large-font-size\">Extra Extra Large Heading Style Right Here<\/h2>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-buttons\"><!-- wp:button {\"textAlign\":\"center\"} -->\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\">Get Started<\/a><\/div>\r\n<!-- \/wp:button --><\/div>\r\n<!-- \/wp:buttons --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column {\"width\":\"15%\"} -->\r\n<div class=\"wp-block-column\" style=\"flex-basis:15%\"><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|80\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:group {\"metadata\":{\"name\":\"Services\"},\"align\":\"full\",\"className\":\"alignfull is-style-section-3\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\",\"bottom\":\"0\"}}},\"layout\":{\"type\":\"constrained\",\"justifyContent\":\"center\"}} -->\r\n<div class=\"wp-block-group alignfull is-style-section-3\" style=\"margin-top:0;margin-bottom:0\"><!-- wp:spacer {\"height\":\"var:preset|spacing|50\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--50)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:heading {\"textAlign\":\"left\",\"align\":\"wide\"} -->\r\n<h2 class=\"wp-block-heading alignwide has-text-align-left\">Style Three<\/h2>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:spacer {\"height\":\"8px\"} -->\r\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:separator {\"align\":\"wide\",\"className\":\"is-style-wide\"} -->\r\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\r\n<!-- \/wp:separator -->\r\n\r\n<!-- wp:spacer {\"height\":\"8px\"} -->\r\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer -->\r\n\r\n<!-- wp:group {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":\"var:preset|spacing|40\"}},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\",\"flexWrap\":\"wrap\"}} -->\r\n<div class=\"wp-block-group alignwide\"><!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Escape to Tuscany<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Wake up to breathtaking views of rolling hills, enjoy a morning espresso on the terrace, and immerse yourself in authentic Italian charm.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Relax in tranquility<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Indulge in Italian culture with easy access to local wineries, markets, and historical villages. Whether you\u2019re seeking relaxation or adventure.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Discover local flavors<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Enjoy an outdoor dining area with a traditional wood-fired oven for authentic Italian cooking. Every corner of the house has been designed to offer comfort.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:columns {\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|30\"}}}} -->\r\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">A cozy, rustic retreat<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Every corner of the house has been designed to offer comfort. This charming villa offers an authentic experience with handcrafted furnishings.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Unforgettable sunsets<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">End each day with stunning sunsets from the terrace, a perfect setting for relaxation. Lounge under the Tuscan sun, or simply take in the breathtaking views.<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column -->\r\n\r\n<!-- wp:column -->\r\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3,\"className\":\"is-service-name\"} -->\r\n<h3 class=\"wp-block-heading is-service-name\">Authentic experiences<\/h3>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph {\"className\":\"is-service-description\"} -->\r\n<p class=\"is-service-description\">Relax by the cozy fireplace after a day of exploring the countryside, and enjoy the warmth and ambiance that only a rustic retreat can provide.&nbsp;<\/p>\r\n<!-- \/wp:paragraph --><\/div>\r\n<!-- \/wp:column --><\/div>\r\n<!-- \/wp:columns -->\r\n\r\n<!-- wp:buttons -->\r\n<div class=\"wp-block-buttons\"><!-- wp:button -->\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Style Three Button<\/a><\/div>\r\n<!-- \/wp:button --><\/div>\r\n<!-- \/wp:buttons --><\/div>\r\n<!-- \/wp:group -->\r\n\r\n<!-- wp:spacer {\"height\":\"var:preset|spacing|60\"} -->\r\n<div style=\"height:var(--wp--preset--spacing--60)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n<!-- \/wp:spacer --><\/div>\r\n<!-- \/wp:group -->' --post_status=publish --porcelain"
      }
    ]
  }

[miksansegundo]

Looks good to me 👍

Tested with:

• Editor
• Theme Showcase preview
• Public library
• Assembler flow

[ivan-ottinger]

Hey @richtabor 👋🏼🙂 Looks like the !important caused a small regression here: #8193.

I wonder what was the underlying need for this color override. As when removing it in my tests, it doesn't seem to cause any issues. 🤔 I suspect there might be some case I am missing.

[ivan-ottinger]

Here's a PR with the fix ready for review: #8206.

[richtabor]

I'll take a look, thanks :)