diff --git a/core/misc/cspell/dictionary.txt b/core/misc/cspell/dictionary.txt
index b168461eba538e821f17fe4906b238be5896a70c..650d81410335dca4446e723aa388e6527f510fc4 100644
--- a/core/misc/cspell/dictionary.txt
+++ b/core/misc/cspell/dictionary.txt
@@ -98,6 +98,7 @@ bkslshv
blockarticles
blockbasic
blockcontent
+blockfooter
blocknodebundle
blockpromoted
blockquotes
diff --git a/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.component.yml b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..89f1f9b08b370036b5276e57de1b8af2a48d7221
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.component.yml
@@ -0,0 +1,33 @@
+# This is so your IDE knows about the syntax for fixes and autocomplete.
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+# The human readable name.
+name: Footer Block
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+ # Props are always an object with keys. Each key is a variable in your
+ # component template.
+ type: object
+
+ properties:
+ attributes:
+ type: Drupal\Core\Template\Attribute
+ title: Attributes
+ description: Wrapper attributes.
+ label:
+ type: string
+
+# Slots always hold arbitrary markup. We know that beforehand, so no need for
+# a schema for slots.
+slots:
+ # The key is the name of the slot. In your template you will use
+ # {% block content %}.
+ content:
+ title: Content
+ image:
+ title: Image
diff --git a/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css
new file mode 100644
index 0000000000000000000000000000000000000000..6cae3abc1cbef0d86337e6beea778ff1ed3ef191
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css
@@ -0,0 +1,47 @@
+.footer-block {
+ font-size: 0.9rem;
+}
+
+.footer-block__link {
+ color: #fff;
+ background-color: inherit;
+ font-weight: 700;
+}
+
+.footer-block__link::after {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ content: "";
+ vertical-align: middle;
+ background: url("../../images/svg/pointer--white.svg") no-repeat center center;
+}
+
+.footer-block__link:active,
+.footer-block__link:focus,
+.footer-block__link:hover {
+ color: #fff;
+}
+
+.footer-block__title {
+ font-size: 1.5rem;
+ font-weight: 400;
+}
+
+@media screen and (min-width: 60rem) {
+ .footer-block__title {
+ padding-top: 2rem;
+ }
+}
+
+.footer-block__wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+@media screen and (min-width: 60rem) {
+ .footer-block__wrapper {
+ flex-direction: row;
+ }
+}
\ No newline at end of file
diff --git a/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.twig b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.twig
new file mode 100644
index 0000000000000000000000000000000000000000..43532d748f507f77ee3f9e585b0a77a63457bef7
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.twig
@@ -0,0 +1,14 @@
+<div{{attributes.addClass('footer-block')}}>
+ <div class="footer-block__wrapper">
+ {% block image %}
+ {% if image %}
+ <div class="footer-block__media">
+ {{~ image ~}}
+ </div>
+ {% endif %}
+ {% endblock %}
+ <div class="footer-block__content">
+ {% block content %}{% endblock %}
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/core/profiles/demo_umami/themes/umami/components/title/title.twig b/core/profiles/demo_umami/themes/umami/components/title/title.twig
index 0aae8674905b28aad503c48ba73c426f2df60c28..309348576fb8c94dbf5d81cfdc76d6d345b14018 100644
--- a/core/profiles/demo_umami/themes/umami/components/title/title.twig
+++ b/core/profiles/demo_umami/themes/umami/components/title/title.twig
@@ -2,4 +2,4 @@
<{{ html_tag|default('h2') }}{{ attributes.addClass('umami-title') }}>
{{ label }}
</{{ html_tag|default('h2') }}>
-{{ title_suffix }}
\ No newline at end of file
+{{ title_suffix }}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css
deleted file mode 100644
index a9c1f42711ec29b618a9da4792baf727dd092701..0000000000000000000000000000000000000000
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * @file
- * This file is used to style the Footer promo block.
- */
-
-.block-type-footer-promo-block .field--type-image {
- padding-bottom: 14px;
-}
-
-.block-type-footer-promo-block .block__title {
- font-size: 1.5rem;
- font-weight: 400;
-}
-
-.block-type-footer-promo-block .footer-promo-content {
- margin-bottom: 1.28rem;
-}
-
-.footer-promo-block__link.footer-promo-block__link {
- color: #fff;
- background-color: inherit;
- font-weight: 700;
-}
-
-.footer-promo-block__link.footer-promo-block__link:active,
-.footer-promo-block__link.footer-promo-block__link:focus,
-footer a.footer-promo-block__link:hover {
- background-color: transparent;
-}
-
-.footer-promo-block__link.footer-promo-block__link::after {
- display: inline-block;
- width: 14px;
- height: 14px;
- content: "";
- vertical-align: middle;
- background: url("../../../../images/svg/pointer--white.svg") no-repeat center center;
-}
-
-@media screen and (min-width: 60rem) {
- .block-type-footer-promo-block {
- overflow: hidden;
- flex-basis: 60%;
- height: 200px;
- font-size: 0.9rem;
- }
-
- .block-type-footer-promo-block .field--type-image {
- float: left; /* LTR */
- margin-right: 14px; /* LTR */
- padding-bottom: 0;
- }
-
- [dir="rtl"] .block-type-footer-promo-block .field--type-image {
- float: right;
- margin-left: 14px;
- }
-
- .block-type-footer-promo-block .block__title {
- padding-top: 2rem;
- }
-}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-footer/menu-footer.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-footer/menu-footer.css
index 62b1be300e697c7ac03afb1dea8b8e669f916379..a0da41ed3982f5c3c5fe42c8959ab1fc6b80606d 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-footer/menu-footer.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-footer/menu-footer.css
@@ -7,11 +7,6 @@
padding: 0;
}
-.menu-footer__title {
- font-size: 1.5rem;
- font-weight: 400;
-}
-
.menu-footer__item {
margin-bottom: 0.5em;
list-style: none;
@@ -31,13 +26,3 @@
outline-color: #fff;
background-color: #000;
}
-
-@media screen and (min-width: 60rem) {
- .menu-footer__title {
- padding-top: 2rem;
- }
-
- .menu-footer-wrapper {
- flex-basis: 25%;
- }
-}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css b/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css
index 35d9f48be97a79f5a26ed1de6a63c69e8c40e036..7b792b5da59df150fc1bdd803da4f905ae9c4ccf 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css
@@ -13,6 +13,11 @@
background-color: #5f635d;
font-size: 0.9rem;
}
+.region-footer {
+ display: flex;
+ flex-direction: column;
+ gap: 1.28rem;
+}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.footer {
@@ -22,8 +27,9 @@
text-align: right;
}
.region-footer {
- display: flex;
+ flex-direction: row;
justify-content: space-between;
+ gap: 0;
}
}
/* Extra large + side margins */
@@ -33,15 +39,26 @@
}
}
-.footer a {
+:where(.footer) a {
color: #fff;
background-color: inherit;
font-weight: 400;
}
-.footer a:active,
-.footer a:focus,
-.footer a:hover {
+:where(.footer) a:active,
+:where(.footer) a:focus,
+:where(.footer) a:hover {
outline-color: #fff;
background-color: #000;
}
+
+@media screen and (min-width: 60rem) {
+ .block-type-footer-promo-block {
+ overflow: hidden;
+ flex-basis: 60%;
+ }
+
+ .block-system-menu-blockfooter {
+ flex-basis: 25%;
+ }
+}
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/footer-promo-block/block--bundle--footer-promo-block.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/footer-promo-block/block--bundle--footer-promo-block.html.twig
index 489dd0c2e247564bff102ea3014528c2b8b48700..64601cb30e9a90e9b99c1c18b0a6cf6521b4403d 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/footer-promo-block/block--bundle--footer-promo-block.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/footer-promo-block/block--bundle--footer-promo-block.html.twig
@@ -26,22 +26,29 @@
* @see template_preprocess_block()
*/
#}
-<div{{ attributes }}>
- {{ content.field_media_image }}
- {{ title_prefix }}
- {% if label %}
- <h2{{ title_attributes }}>{{ label }}</h2>
- {% elseif content.field_title %}
- <h2{{ title_attributes }}>{{ content.field_title }}</h2>
- {% endif %}
- {{ title_suffix }}
+
+{% embed "umami:footer-block" with {
+ attributes,
+ content,
+ label,
+ title_attributes,
+ title_prefix,
+ title_suffix,
+} only %}
+ {% block image %}
+ {{ content.field_media_image }}
+ {% endblock %}
{% block content %}
- <div class="footer-promo-content">
- {% if not label %}
- {{ content|without('field_title')|without('field_media_image') }}
- {% else %}
- {{ content|without('field_media_image') }}
- {% endif %}
- </div>
+ {% include "umami:title" with {
+ attributes: title_attributes.addClass('footer-block__title'),
+ label: label ? label : content.field_title,
+ title_prefix,
+ title_suffix,
+ } only %}
+ {% if not label %}
+ {{ content|without('field_title')|without('field_media_image') }}
+ {% else %}
+ {{ content|without('field_media_image') }}
+ {% endif %}
{% endblock %}
-</div>
+{% endembed %}
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--system-menu-block--footer.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--system-menu-block--footer.html.twig
index ecadc9bf6d6495b2e2636063567a6f0c966cb4ae..52ef02ef671957301394d758594bb59cf4482eb6 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--system-menu-block--footer.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--system-menu-block--footer.html.twig
@@ -9,17 +9,24 @@
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
- 'menu-footer-wrapper',
]
%}
-{% set title_classes = ['menu-footer__title'] %}
-<div{{ attributes.addClass(classes) }}>
- {{ title_prefix }}
- {% if label %}
- <h2{{ title_attributes.addClass(title_classes) }}>{{ label }}</h2>
- {% endif %}
- {{ title_suffix }}
+
+{% embed "umami:footer-block" with {
+ attributes: attributes.addClass(classes),
+ content,
+ label,
+ title_attributes,
+ title_prefix,
+ title_suffix,
+} only %}
{% block content %}
+ {% include "umami:title" with {
+ attributes: title_attributes.addClass('footer-block__title'),
+ label: label,
+ title_prefix,
+ title_suffix,
+ } only %}
{{ content }}
{% endblock %}
-</div>
+{% endembed %}
diff --git a/core/profiles/demo_umami/themes/umami/umami.libraries.yml b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
index 324a0e938970043c31183d268827854623a9b22f..1ba2f15a9cc61c8d9ea2a6a1a2f19d77c57123dc 100644
--- a/core/profiles/demo_umami/themes/umami/umami.libraries.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
@@ -7,7 +7,6 @@ global:
css/components/blocks/banner/banner.css: {}
css/components/blocks/help/help.css: {}
css/components/blocks/page-title/page-title.css: {}
- css/components/blocks/footer-promo/footer-promo.css: {}
css/components/blocks/language-switcher/language-switcher.css: {}
css/components/blocks/search/search.css: {}
css/components/blocks/search/search-results.css: {}
diff --git a/core/profiles/demo_umami/themes/umami/umami.theme b/core/profiles/demo_umami/themes/umami/umami.theme
index 7765b1855485de154075962641eed7f06e4e6edc..fe15ab615ad2c4276326c9286ee8ba7280a1b7a8 100644
--- a/core/profiles/demo_umami/themes/umami/umami.theme
+++ b/core/profiles/demo_umami/themes/umami/umami.theme
@@ -75,7 +75,7 @@ function umami_theme_suggestions_block_alter(array &$suggestions, array $variabl
function umami_preprocess_block__bundle__footer_promo_block(&$variables) {
if (isset($variables['content']['field_content_link'])) {
foreach (Element::children($variables['content']['field_content_link']) as $key) {
- $variables['content']['field_content_link'][$key]['#attributes']['class'][] = 'footer-promo-block__link';
+ $variables['content']['field_content_link'][$key]['#attributes']['class'][] = 'footer-block__link';
}
}
}