Expo: Fixing details and adding variations (#7995)

* Expo: Fixes and new variations

* Expo: Adding style variations

expo/parts/header.html

@@ -1,35 +1 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-bottom:0"><!-- wp:columns {"verticalAlignment":"bottom","align":"wide","style":{"spacing":{"padding":{"bottom":"1rem"},"blockGap":{"top":"var:preset|spacing|30"}},"border":{"bottom":{"width":"2px"}}}} -->
-<div class="wp-block-columns alignwide are-vertically-aligned-bottom" style="border-bottom-width:2px;padding-bottom:1rem"><!-- wp:column {"verticalAlignment":"bottom","width":"25%"} -->
-<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:25%"><!-- wp:site-title {"className":"no-underline"} /--></div>
-<!-- /wp:column -->
-
-<!-- wp:column {"verticalAlignment":"bottom","width":"45%"} -->
-<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:45%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:site-tagline {"style":{"layout":{"selfStretch":"fill","flexSize":null}}} /-->
-
-<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
-<p style="font-style:normal;font-weight:600"><a href="#">Tumblr</a></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
-<p style="font-style:normal;font-weight:600"><a href="#">TikTok</a></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
-<p style="font-style:normal;font-weight:600"><a href="#">Instgrm</a></p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group --></div>
-<!-- /wp:group --></div>
-<!-- /wp:column -->
-
-<!-- wp:column {"verticalAlignment":"bottom","width":"5%"} -->
-<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:5%"></div>
-<!-- /wp:column -->
-
-<!-- wp:column {"verticalAlignment":"bottom","width":"25%"} -->
-<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:25%"><!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"vertical"}} /--></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns --></div>
-<!-- /wp:group -->
+<!-- wp:pattern {"slug":"expo/header"} /-->

expo/patterns/header.php

@@ -7,26 +7,26 @@
  */
 ?>
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-bottom:0"><!-- wp:columns {"verticalAlignment":"bottom","align":"wide","style":{"spacing":{"padding":{"bottom":"1rem"},"blockGap":{"top":"var:preset|spacing|30"}},"border":{"bottom":{"width":"2px"}}}} -->
-<div class="wp-block-columns alignwide are-vertically-aligned-bottom" style="border-bottom-width:2px;padding-bottom:1rem"><!-- wp:column {"verticalAlignment":"bottom","width":"25%"} -->
-<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:25%"><!-- wp:site-title /--></div>
+<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-bottom:0"><!-- wp:columns {"verticalAlignment":"bottom","align":"wide","style":{"spacing":{"padding":{"bottom":"1rem"},"blockGap":{"top":"var:preset|spacing|30"}},"border":{"bottom":{"color":"var:preset|color|contrast","width":"1px"},"top":[],"right":[],"left":[]}}} -->
+<div class="wp-block-columns alignwide are-vertically-aligned-bottom" style="border-bottom-color:var(--wp--preset--color--contrast);border-bottom-width:1px;padding-bottom:1rem"><!-- wp:column {"verticalAlignment":"bottom","width":"25%"} -->
+<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:25%"><!-- wp:site-title {"className":"no-underline"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"verticalAlignment":"bottom","width":"45%"} -->
 <div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:45%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:site-tagline {"style":{"layout":{"selfStretch":"fill","flexSize":null}}} /-->
 
 <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
-<p style="font-style:normal;font-weight:600"><?php echo __('<a href="#">Tumblr</a>', 'expo');?></p>
+<div class="wp-block-group"><!-- wp:paragraph {"className":"no-underline","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
+<p class="no-underline" style="font-style:normal;font-weight:600"><?php esc_html_e('Tumblr', 'expo');?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
-<p style="font-style:normal;font-weight:600"><?php echo __('<a href="#">TikTok</a>', 'expo');?></p>
+<!-- wp:paragraph {"className":"no-underline","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
+<p class="no-underline" style="font-style:normal;font-weight:600"><?php esc_html_e('TikTok', 'expo');?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
-<p style="font-style:normal;font-weight:600"><?php echo __('<a href="#">Instgrm</a>', 'expo');?></p>
+<!-- wp:paragraph {"className":"no-underline","style":{"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
+<p class="no-underline" style="font-style:normal;font-weight:600"><?php esc_html_e('Instgrm', 'expo');?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group --></div>
 <!-- /wp:group --></div>

expo/patterns/home.php

@@ -19,11 +19,11 @@
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
 <div class="wp-block-group"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast"} -->
-<h2 class="wp-block-heading has-contrast-color has-text-color has-link-color"><?php echo __('In Exhibition', 'expo');?></h2>
+<h2 class="wp-block-heading has-contrast-color has-text-color has-link-color"><?php esc_html_e('In Exhibition', 'expo');?></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
-<p style="text-transform:uppercase"><?php echo __('View All', 'expo');?></p>
+<p style="text-transform:uppercase"><?php esc_html_e('View All', 'expo');?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group --></div>
 <!-- /wp:column --></div>
@@ -39,7 +39,7 @@
 <!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":20} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"400px","style":{"color":{"duotone":"unset"}}} /--></div>
+<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"400px","style":{"color":[]}} /--></div>
 <!-- /wp:group -->
 <!-- /wp:post-template --></main>
 <!-- /wp:query --></div>
@@ -54,27 +54,27 @@
 
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
-<h2 class="wp-block-heading has-base-color has-text-color has-link-color"><?php echo __('History', 'expo');?></h2>
+<h2 class="wp-block-heading has-base-color has-text-color has-link-color"><?php esc_html_e('History', 'expo');?></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('Founded in the heart of Buenos Aires in 1896, the International Art Museum has, from its inception, housed a rich diversity of works spanning different periods and artistic movements globally. It emerged with the mission not only to safeguard the richness of international art but also to foster the flourishing of Argentine art within a context of cultural renewal.', 'expo');?></p>
+<p><?php esc_html_e('Founded in the heart of Buenos Aires in 1896, the International Art Museum has, from its inception, housed a rich diversity of works spanning different periods and artistic movements globally. It emerged with the mission not only to safeguard the richness of international art but also to foster the flourishing of Argentine art within a context of cultural renewal.', 'expo');?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('In its first decade, during the commemoration of the Centennial of the May Revolution, the museum already exhibited masterpieces by renowned artists such as Francisco de Goya, Joaquín Sorolla y Bastida, Edgar Degas, and Pierre-Auguste Renoir.', 'expo');?></p>
+<p><?php esc_html_e('In its first decade, during the commemoration of the Centennial of the May Revolution, the museum already exhibited masterpieces by renowned artists such as Francisco de Goya, Joaquín Sorolla y Bastida, Edgar Degas, and Pierre-Auguste Renoir.', 'expo');?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('A new era dawned in 1911 with the opening of the Argentine Pavilion, a monumental structure from the 1889 Paris Universal Exhibition, situated in Plaza San Martín. This marked the incorporation of notable new acquisitions, such as Édouard Manet\'s \'The surprised nymph\' and Claude Monet\'s \'Banks of the Seine.\'', 'expo');?></p>
+<p><?php esc_html_e('A new era dawned in 1911 with the opening of the Argentine Pavilion, a monumental structure from the 1889 Paris Universal Exhibition, situated in Plaza San Martín. This marked the incorporation of notable new acquisitions, such as Édouard Manet\'s \'The surprised nymph\' and Claude Monet\'s \'Banks of the Seine.\'', 'expo');?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('In 1933, the museum found its current home in the remodeled Recoleta Pump House, a work of art in itself designed by architect Alejandro Bustillo. This relocation saw the addition of valuable pieces, including \'Woman by the sea\' by Paul Gauguin, \'Le Moulin de la Galette\' by Vincent van Gogh, and \'Christ in the Garden of Olives\' by El Greco.', 'expo');?></p>
+<p><?php esc_html_e('In 1933, the museum found its current home in the remodeled Recoleta Pump House, a work of art in itself designed by architect Alejandro Bustillo. This relocation saw the addition of valuable pieces, including \'Woman by the sea\' by Paul Gauguin, \'Le Moulin de la Galette\' by Vincent van Gogh, and \'Christ in the Garden of Olives\' by El Greco.', 'expo');?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('Over the last decades of the 20th century, the museum opened its doors to the great exponents of modern art on an international level. Thus, works by geniuses such as Pablo Picasso, Amedeo Modigliani, Marc Chagall, Vassily Kandinsky, Paul Klee, Lucio Fontana, Jackson Pollock, Mark Rothko, and Henry Moore were added to its collection.', 'expo');?></p>
+<p><?php esc_html_e('Over the last decades of the 20th century, the museum opened its doors to the great exponents of modern art on an international level. Thus, works by geniuses such as Pablo Picasso, Amedeo Modigliani, Marc Chagall, Vassily Kandinsky, Paul Klee, Lucio Fontana, Jackson Pollock, Mark Rothko, and Henry Moore were added to its collection.', 'expo');?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
@@ -86,49 +86,75 @@
 <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"1.5rem"}}}} -->
 <div class="wp-block-columns alignwide"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
-<h3 class="wp-block-heading has-base-color has-text-color has-link-color"><?php echo __('Visiting the Museum', 'expo');?></h3>
+<h3 class="wp-block-heading has-base-color has-text-color has-link-color"><?php esc_html_e('Visiting the Museum', 'expo');?></h3>
 <!-- /wp:heading -->
 
+<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p><?php esc_html_e('Calle de los Artistas 123', 'expo');?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><?php esc_html_e('Buenos Aires, Argentina', 'expo');?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><?php esc_html_e('+00 (000) 0000-0000', 'expo');?></p>
+<!-- /wp:paragraph -->
+
 <!-- wp:paragraph -->
-<p><?php echo __('Calle de los Artistas 123&lt;br&gt;Buenos Aires, Argentina&lt;br&gt;+00 (000) 0000-0000&lt;br&gt;[email protected]', 'expo');?></p>
+<p><?php esc_html_e('[email protected]', 'expo');?></p>
 <!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
-<h3 class="wp-block-heading has-base-color has-text-color has-link-color"><?php echo __('Opening times', 'expo');?></h3>
+<h3 class="wp-block-heading has-base-color has-text-color has-link-color"><?php esc_html_e('Opening times', 'expo');?></h3>
 <!-- /wp:heading -->
 
+<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p><?php esc_html_e('Wed/Fri: 11.00 a 20.00.', 'expo');?></p>
+<!-- /wp:paragraph -->
+
 <!-- wp:paragraph -->
-<p><?php echo __('Wed/Fri: 11.00 a 20.00.&lt;br&gt;Sat/Sun: 10.00 a 20.00&lt;br&gt;Monday: Closed.', 'expo');?></p>
+<p><?php esc_html_e('Sat/Sun: 10.00 a 20.00', 'expo');?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('The Museum is closed to the public on May 1, June 27, December 24, 25 and 31, 2023, and January 1, 2024.', 'expo');?></p>
+<p><?php esc_html_e('Monday: Closed.', 'expo');?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p><?php esc_html_e('The Museum is closed to the public on May 1, June 27, December 24, 25 and 31, 2023, and January 1, 2024.', 'expo');?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('Admission is free of charge.', 'expo');?></p>
+<p><?php esc_html_e('Admission is free of charge.', 'expo');?></p>
 <!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
-<h3 class="wp-block-heading has-base-color has-text-color has-link-color"><?php echo __('Group Visits', 'expo');?></h3>
+<h3 class="wp-block-heading has-base-color has-text-color has-link-color"><?php esc_html_e('Group Visits', 'expo');?></h3>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('Check &lt;span style="text-decoration: underline;"&gt;&lt;a href="#"&gt;here&lt;/a&gt;&lt;/span&gt; the registration dates and the proposed routes for each educational level.', 'expo');?></p>
+<p><?php esc_html_e('Check here the registration dates and the proposed routes for each educational level.', 'expo');?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base","fontSize":"small"} -->
-<h3 class="wp-block-heading has-base-color has-text-color has-link-color has-small-font-size"><?php echo __('Audioguide', 'expo');?></h3>
+<h3 class="wp-block-heading has-base-color has-text-color has-link-color has-small-font-size"><?php esc_html_e('Audioguide', 'expo');?></h3>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo __('An approach to the Museum\'s collection through thirteen audio tracks referring to great sculptural works made by pre-Hispanic, European and Argentine cultures.', 'expo');?></p>
+<p><?php esc_html_e('An approach to the Museum\'s collection through thirteen audio tracks referring to great sculptural works made by pre-Hispanic, European and Argentine cultures.', 'expo');?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
@@ -144,11 +170,11 @@
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
 <div class="wp-block-group"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast"} -->
-<h2 class="wp-block-heading has-contrast-color has-text-color has-link-color"><?php echo __('Collection', 'expo');?></h2>
+<h2 class="wp-block-heading has-contrast-color has-text-color has-link-color"><?php esc_html_e('Collection', 'expo');?></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
-<p style="text-transform:uppercase"><?php echo __('<a href="#">View All</a>', 'expo');?></p>
+<p style="text-transform:uppercase"><?php esc_html_e('<a href="#">View All</a>', 'expo');?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group --></div>
 <!-- /wp:column --></div>

expo/styles/alchemy.json

@@ -0,0 +1,96 @@
+{
+ "settings": {
+ "color": {
+ "palette": [
+ {
+ "color": "#f2f6e9",
+ "name": "Base",
+ "slug": "base"
+ },
+ {
+ "color": "#4b303d",
+ "name": "Contrast",
+ "slug": "contrast"
+ },
+ {
+ "color": "#4b303d",
+ "name": "Primary",
+ "slug": "primary"
+ },
+ {
+ "color": "#2c1c21",
+ "name": "Secondary",
+ "slug": "secondary"
+ },
+ {
+ "color": "#f2f6e9",
+ "name": "Tertiary",
+ "slug": "tertiary"
+ }
+ ]
+ }
+ },
+ "styles": {
+ "blocks": {
+ "core/navigation": {
+ "typography": {
+ "fontFamily": "var(--wp--preset--font-family--bricolage-grotesk)"
+ }
+ }
+ },
+ "elements": {
+ "h1": {
+ "typography": {
+ "fontStyle": "normal",
+ "fontWeight": "700",
+ "letterSpacing": "0.01rem"
+ }
+ },
+ "h2": {
+ "typography": {
+ "fontStyle": "normal",
+ "fontWeight": "700",
+ "letterSpacing": "0.01rem"
+ }
+ },
+ "h3": {
+ "typography": {
+ "fontStyle": "normal",
+ "fontWeight": "700"
+ }
+ },
+ "h4": {
+ "typography": {
+ "fontStyle": "normal",
+ "fontWeight": "700"
+ }
+ },
+ "h5": {
+ "typography": {
+ "fontStyle": "normal",
+ "fontWeight": "700"
+ }
+ },
+ "h6": {
+ "typography": {
+ "fontStyle": "normal",
+ "fontWeight": "700"
+ }
+ },
+ "heading": {
+ "typography": {
+ "fontFamily": "var(--wp--preset--font-family--bricolage-grotesk)",
+ "fontStyle": "normal",
+ "fontWeight": "700"
+ }
+ }
+ },
+ "typography": {
+ "fontFamily": "var(--wp--preset--font-family--bricolage-grotesk)",
+ "letterSpacing": "0rem"
+ }
+ },
+ "title": "Alchemy",
+ "version": 3,
+ "$schema": "https://schemas.wp.org/trunk/theme.json"
+}