Feature/block min cleanup

components/alerts/templates/status-messages.html.twig

@@ -18,6 +18,8 @@
  */
 #}
 
+{{ attach_library('drupalx_theme/alerts') }}
+
 <div data-drupal-messages class="container mb-2 mb-lg-4">
   {% for type, messages in message_list %}
     {%

components/side-by-side/side-by-side.component.yml

@@ -49,14 +49,19 @@ props:
           title: Modifier
           description: Additional classes for styling the button.
           default: 'btn-primary has-icon'
-    modifier:
+    layout:
       type: string
-      title: Modifier
+      title: layout
       description: Controls image left/right placement.
       enum:
         - 'left'
         - 'right'
       default: 'left'
+    modifier:
+      type: string
+      title: Modifier
+      description: Additional classes for styling the component.
+      default: ''
 
 libraryOverrides:
   dependencies:

components/side-by-side/side-by-side.stories.js

@@ -29,14 +29,19 @@ export default {
       description: 'Call to action.',
       control: 'object'
     },
-    modifier: {
-      name: 'Modifier',
+    layout: {
+      name: 'Layout',
       description: 'Controls image left/right placement.',
       control: 'select',
       options: {
         'Pin image left': 'left',
         'Pin image right': 'right'
       }
+    },
+    modifier: {
+      name: 'Modifier',
+      description: 'Additional classes for the component.',
+      control: 'text'
     }
   }
 };
@@ -54,7 +59,8 @@ Left.args = {
     icon: 'arrow_right_alt',
     modifier: 'btn-primary has-icon'
   },
-  modifier: 'left'
+  layout: 'left',
+  modifier: ''
 };
 
 export const Right = SideBySideTemplate.bind({});
@@ -70,5 +76,5 @@ Right.args = {
     icon: 'arrow_right_alt',
     modifier: 'btn-primary has-icon'
   },
-  modifier: 'right'
+  layout: 'right'
 };

components/side-by-side/side-by-side.twig

@@ -1,6 +1,6 @@
 
-<div class="side-by-side container {{ modifier }}">
-  <div class="row flex-column gy-3 {{ ('right' in modifier) ? 'flex-lg-row-reverse ' : 'flex-lg-row ' }}justify-content-between align-items-center">
+<div class="side-by-side container {{ layout }} {{ modifier }}">
+  <div class="row flex-column gy-3 {{ ('right' in layout) ? 'flex-lg-row-reverse ' : 'flex-lg-row ' }}justify-content-between align-items-center">
     <div class="col-lg-6">
       <div class="shadow rounded">
         {{ media }}

components/side-by-side/templates/block-content--sidebyside.html.twig

@@ -27,10 +27,6 @@
   }
 %}
 
-{%
-  set modifier = content.field_sidebyside_layout['#items'].getString()
-%}
-
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}
   {{ title_suffix }}
@@ -43,7 +39,8 @@
         body: content.field_summary,
         button: link,
         media: content.field_media,
-        modifier: modifier,
+        layout: content.field_sidebyside_layout['#items'].getString() ?? 'left',
+        modifier: '',
       } only
     %}
   {% endblock %}

components/side-by-side/templates/node--teaser.html.twig

@@ -24,7 +24,8 @@
       body: content.field_summary,
       button: url,
       media: content.field_thumbnail,
-      modifier: 'left',
+      layout: 'left',
+      modifier: '',
     } only
   %}
 </div>

config/optional/block.block.drupalx_theme_pagetitle.yml

@@ -0,0 +1,18 @@
+uuid: 94e6f201-8ab2-4321-96a2-e05c9ca52c6a
+langcode: en
+status: true
+dependencies:
+  theme:
+    - drupalx_theme
+id: drupalx_theme_pagetitle
+theme: drupalx_theme
+region: content
+weight: 0
+provider: null
+plugin: page_title_block
+settings:
+  id: page_title_block
+  label: 'Page title'
+  label_display: '0'
+  provider: core
+visibility: {  }

drupalx_theme.libraries.yml

@@ -1,3 +1,9 @@
+# Included to attach the alerts component css file to status messages.
+alerts:
+  css:
+    component:
+      components/alerts/alerts.css: { }
+
 bootstrap-js:
   js:
     //cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js: