Issue #3117217 by bnjmnm, lauriii: Decouple core theme dependency on functions in stable.theme

core/modules/filter/src/Element/TextFormat.php

@@ -124,6 +124,9 @@ class TextFormat extends RenderElement {
     // Setup child container for the text format widget.
     $element['format'] = [
       '#type' => 'container',
+      '#theme_wrappers' => [
+        'container__text_format_filter_wrapper',
+      ],
       '#attributes' => ['class' => ['js-filter-wrapper']],
     ];
 
@@ -166,6 +169,9 @@ class TextFormat extends RenderElement {
     $element['format']['guidelines'] = [
       '#type' => 'container',
       '#attributes' => ['class' => ['js-filter-guidelines']],
+      '#theme_wrappers' => [
+        'container__text_format_filter_guidelines',
+      ],
       '#weight' => 20,
     ];
     $options = [];
@@ -190,6 +196,9 @@ class TextFormat extends RenderElement {
 
     $element['format']['help'] = [
       '#type' => 'container',
+      '#theme_wrappers' => [
+        'container__text_format_filter_help',
+      ],
       'about' => [
         '#type' => 'link',
         '#title' => t('About text formats'),

core/profiles/demo_umami/themes/umami/css/theme/filter.admin.css

@@ -0,0 +1,81 @@
+
+/**
+ * @file
+ * Admin styling for the Filter module.
+ */
+
+/**
+ * Filter information under field.
+ */
+.text-format-wrapper > .form-item {
+  margin-bottom: 0;
+}
+
+.filter-wrapper {
+  overflow: hidden;
+  margin: 0;
+  padding: 0.5em 0.666em;
+  border: 1px solid #ccc;
+  border-top: 0;
+}
+.filter-wrapper .form-item {
+  margin: 0;
+}
+.filter-wrapper .form-item label {
+  display: inline;
+}
+
+.filter-help {
+  float: right; /* LTR */
+}
+[dir="rtl"] .filter-help {
+  float: left;
+}
+.filter-guidelines .filter-guidelines-item {
+  margin-top: 1em;
+}
+.filter-help p {
+  margin: 0;
+}
+.filter-help a {
+  position: relative;
+  margin: 0 20px 0 0; /* LTR */
+}
+[dir="rtl"] .filter-help a {
+  margin: 0 0 0 20px;
+}
+.filter-help a:after {
+  position: absolute;
+  top: 0;
+  right: -20px; /* LTR */
+  display: block;
+  width: 16px;
+  height: 16px;
+  content: "";
+  background: transparent url(../../../../../../misc/help.png);
+}
+[dir="rtl"] .filter-help a:after {
+  right: auto;
+  left: -20px;
+}
+
+.text-format-wrapper .description {
+  margin-top: 0.5em;
+}
+.tips {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: 0.9em;
+}
+
+/**
+ * Improve filter tips position.
+ */
+.tips {
+  padding-left: 0; /* LTR */
+}
+[dir="rtl"] .tips {
+  padding-right: 0;
+}

core/profiles/demo_umami/themes/umami/templates/components/text_format/container--text-format-filter-guidelines.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter guidelines.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-guidelines',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/profiles/demo_umami/themes/umami/templates/components/text_format/container--text-format-filter-help.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter help.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-help',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/profiles/demo_umami/themes/umami/templates/components/text_format/container--text-format-filter-wrapper.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for the text filter wrapper.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-wrapper',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/profiles/demo_umami/themes/umami/umami.info.yml

@@ -25,6 +25,16 @@ libraries-override:
       theme:
         layouts/fourcol_section/fourcol_section.css: layouts/fourcol_section/fourcol_section.css
 
+  # @todo remove this library override in https://drupal.org/node/3115223
+  filter/drupal.filter.admin:
+    css:
+      theme:
+        /core/themes/stable/css/filter/filter.admin.css: false
+  # @todo remove this library override in https://drupal.org/node/3115223
+  filter/drupal.filter:
+    css:
+      theme:
+        /core/themes/stable/css/filter/filter.admin.css: false
   # @todo remove this library override in https://drupal.org/node/3111468
   stable/drupal.ajax: umami/empty
   # @todo remove this library override in https://drupal.org/node/3111468
@@ -44,6 +54,10 @@ libraries-extend:
     - umami/classy.progress
   file/drupal.file:
     - umami/classy.file
+  filter/drupal.filter.admin:
+    - umami/filter
+  filter/drupal.filter:
+    - umami/filter
   media/media_embed_ckeditor_theme:
     - umami/classy.media_embed_ckeditor_theme
   media_library/view:

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -149,6 +149,12 @@ oneplusfourgrid_section:
     theme:
       layouts/oneplusfourgrid_section/oneplusfourgrid_section.css: {}
 
+filter:
+  version: VERSION
+  css:
+    component:
+      css/theme/filter.admin.css: {}
+
 classy.base:
   version: VERSION
   css:

core/profiles/demo_umami/themes/umami/umami.theme

@@ -140,3 +140,15 @@ function umami_form_alter(array &$form, FormStateInterface $form_state, $form_id
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_image_widget().
+ *
+ * @todo Revisit in https://drupal.org/node/3117430
+ */
+function umami_preprocess_image_widget(&$variables) {
+  if (!empty($variables['element']['fids']['#value'])) {
+    $file = reset($variables['element']['#files']);
+    $variables['data']["file_{$file->id()}"]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
+  }
+}

core/themes/bartik/bartik.info.yml

@@ -24,6 +24,17 @@ libraries:
   - bartik/global-styling
 
 libraries-override:
+  # @todo remove this library override in https://drupal.org/node/3115223
+  filter/drupal.filter.admin:
+    css:
+      theme:
+        /core/themes/stable/css/filter/filter.admin.css: false
+
+  # @todo remove this library override in https://drupal.org/node/3115223
+  filter/drupal.filter:
+    css:
+      theme:
+        /core/themes/stable/css/filter/filter.admin.css: false
   # @todo remove this library override in https://drupal.org/node/3111468
   stable/drupal.ajax: bartik/empty
   # @todo remove this library override in https://drupal.org/node/3111468
@@ -41,6 +52,10 @@ libraries-extend:
     - bartik/classy.progress
   file/drupal.file:
     - bartik/classy.file
+  filter/drupal.filter.admin:
+    - bartik/filter
+  filter/drupal.filter:
+    - bartik/filter
   media/media_embed_ckeditor_theme:
     - bartik/classy.media_embed_ckeditor_theme
   media_library/view:

core/themes/bartik/bartik.libraries.yml

@@ -132,6 +132,12 @@ user:
     # @todo remove this file from library in https://drupal.org/node/3111468
     js/user.theme.temporary.js: {}
 
+filter:
+  version: VERSION
+  css:
+    component:
+      css/theme/filter.admin.css: {}
+
 classy.book-navigation:
   version: VERSION
   css:

core/themes/bartik/bartik.theme

@@ -165,3 +165,15 @@ function bartik_preprocess_links__media_library_menu(array &$variables) {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_image_widget().
+ *
+ * @todo Revisit in https://drupal.org/node/3117430
+ */
+function bartik_preprocess_image_widget(&$variables) {
+  if (!empty($variables['element']['fids']['#value'])) {
+    $file = reset($variables['element']['#files']);
+    $variables['data']["file_{$file->id()}"]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
+  }
+}

core/themes/bartik/css/theme/filter.admin.css

@@ -0,0 +1,81 @@
+
+/**
+ * @file
+ * Admin styling for the Filter module.
+ */
+
+/**
+ * Filter information under field.
+ */
+.text-format-wrapper > .form-item {
+  margin-bottom: 0;
+}
+
+.filter-wrapper {
+  overflow: hidden;
+  margin: 0;
+  padding: 0.5em 0.666em;
+  border: 1px solid #ccc;
+  border-top: 0;
+}
+.filter-wrapper .form-item {
+  margin: 0;
+}
+.filter-wrapper .form-item label {
+  display: inline;
+}
+
+.filter-help {
+  float: right; /* LTR */
+}
+[dir="rtl"] .filter-help {
+  float: left;
+}
+.filter-guidelines .filter-guidelines-item {
+  margin-top: 1em;
+}
+.filter-help p {
+  margin: 0;
+}
+.filter-help a {
+  position: relative;
+  margin: 0 20px 0 0; /* LTR */
+}
+[dir="rtl"] .filter-help a {
+  margin: 0 0 0 20px;
+}
+.filter-help a:after {
+  position: absolute;
+  top: 0;
+  right: -20px; /* LTR */
+  display: block;
+  width: 16px;
+  height: 16px;
+  content: "";
+  background: transparent url(../../../../misc/help.png);
+}
+[dir="rtl"] .filter-help a:after {
+  right: auto;
+  left: -20px;
+}
+
+.text-format-wrapper .description {
+  margin-top: 0.5em;
+}
+.tips {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: 0.9em;
+}
+
+/**
+ * Improve filter tips position.
+ */
+.tips {
+  padding-left: 0; /* LTR */
+}
+[dir="rtl"] .tips {
+  padding-right: 0;
+}

core/themes/bartik/templates/text_format/container--text-format-filter-guidelines.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter guidelines.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-guidelines',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/bartik/templates/text_format/container--text-format-filter-help.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter help.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-help',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/bartik/templates/text_format/container--text-format-filter-wrapper.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for the text filter wrapper.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-wrapper',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/claro/claro.info.yml

@@ -71,15 +71,17 @@ libraries-override:
       theme:
         /core/themes/stable/css/field_ui/field_ui.admin.css: css/theme/field-ui.admin.css
 
+  # @todo remove this library override in https://drupal.org/node/3115223
   filter/drupal.filter.admin:
     css:
       theme:
-        /core/themes/stable/css/filter/filter.admin.css: css/theme/filter.theme.css
+        /core/themes/stable/css/filter/filter.admin.css: false
 
+  # @todo remove this library override in https://drupal.org/node/3115223
   filter/drupal.filter:
     css:
       theme:
-        /core/themes/stable/css/filter/filter.admin.css: css/theme/filter.theme.css
+        /core/themes/stable/css/filter/filter.admin.css: false
 
   views_ui/admin.styling:
     css:
@@ -109,6 +111,10 @@ libraries-extend:
     - claro/claro.jquery.ui
   file/drupal.file:
     - claro/file
+  filter/drupal.filter.admin:
+    - claro/filter
+  filter/drupal.filter:
+    - claro/filter
   system/admin:
     - claro/system.admin
   core/drupal.autocomplete:

core/themes/claro/claro.libraries.yml

@@ -271,6 +271,12 @@ progress:
     component:
       css/components/progress.css: {}
 
+filter:
+  version: VERSION
+  css:
+    component:
+      css/theme/filter.theme.css: {}
+
 classy.book-navigation:
   version: VERSION
   css:

core/themes/claro/templates/text_format/container--text-format-filter-guidelines.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter guidelines.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-guidelines',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/claro/templates/text_format/container--text-format-filter-help.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter help.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-help',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/claro/templates/text_format/container--text-format-filter-wrapper.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for the text filter wrapper.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-wrapper',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/seven/css/theme/filter.admin.css

@@ -0,0 +1,81 @@
+
+/**
+ * @file
+ * Admin styling for the Filter module.
+ */
+
+/**
+ * Filter information under field.
+ */
+.text-format-wrapper > .form-item {
+  margin-bottom: 0;
+}
+
+.filter-wrapper {
+  overflow: hidden;
+  margin: 0;
+  padding: 0.5em 0.666em;
+  border: 1px solid #ccc;
+  border-top: 0;
+}
+.filter-wrapper .form-item {
+  margin: 0;
+}
+.filter-wrapper .form-item label {
+  display: inline;
+}
+
+.filter-help {
+  float: right; /* LTR */
+}
+[dir="rtl"] .filter-help {
+  float: left;
+}
+.filter-guidelines .filter-guidelines-item {
+  margin-top: 1em;
+}
+.filter-help p {
+  margin: 0;
+}
+.filter-help a {
+  position: relative;
+  margin: 0 20px 0 0; /* LTR */
+}
+[dir="rtl"] .filter-help a {
+  margin: 0 0 0 20px;
+}
+.filter-help a:after {
+  position: absolute;
+  top: 0;
+  right: -20px; /* LTR */
+  display: block;
+  width: 16px;
+  height: 16px;
+  content: "";
+  background: transparent url(../../../../misc/help.png);
+}
+[dir="rtl"] .filter-help a:after {
+  right: auto;
+  left: -20px;
+}
+
+.text-format-wrapper .description {
+  margin-top: 0.5em;
+}
+.tips {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: 0.9em;
+}
+
+/**
+ * Improve filter tips position.
+ */
+.tips {
+  padding-left: 0; /* LTR */
+}
+[dir="rtl"] .tips {
+  padding-right: 0;
+}

core/themes/seven/seven.info.yml

@@ -42,6 +42,18 @@ libraries-override:
     css:
       component:
         assets/vendor/jquery.ui/themes/base/dialog.css: false
+
+  # @todo remove this library override in https://drupal.org/node/3115223
+  filter/drupal.filter.admin:
+    css:
+      theme:
+        /core/themes/stable/css/filter/filter.admin.css: false
+
+  # @todo remove this library override in https://drupal.org/node/3115223
+  filter/drupal.filter:
+    css:
+      theme:
+        /core/themes/stable/css/filter/filter.admin.css: false
   # @todo remove this library override in https://drupal.org/node/3111468
   stable/drupal.ajax: seven/empty
   # @todo remove this library override in https://drupal.org/node/3111468
@@ -65,6 +77,10 @@ libraries-extend:
     - seven/seven.jquery.ui
   file/drupal.file:
     - seven/classy.file
+  filter/drupal.filter.admin:
+    - seven/filter
+  filter/drupal.filter:
+    - seven/filter
   media/media_embed_ckeditor_theme:
     - seven/classy.media_embed_ckeditor_theme
   media_library/view:

core/themes/seven/seven.libraries.yml

@@ -187,6 +187,12 @@ user:
     # @todo remove this file from library in https://drupal.org/node/3111468
     js/user.theme.temporary.js: {}
 
+filter:
+  version: VERSION
+  css:
+    component:
+      css/theme/filter.admin.css: {}
+
 classy.book-navigation:
   version: VERSION
   css:

core/themes/seven/seven.theme

@@ -424,6 +424,13 @@ function seven_preprocess_image_widget(array &$variables) {
   if (isset($data['preview']['#access']) && $data['preview']['#access'] === FALSE) {
     unset($data['preview']);
   }
+
+  // @todo Revisit everything in this conditional in
+  //   https://drupal.org/node/3117430
+  if (!empty($variables['element']['fids']['#value'])) {
+    $file = reset($variables['element']['#files']);
+    $data["file_{$file->id()}"]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
+  }
 }
 
 /**

core/themes/seven/templates/text_format/container--text-format-filter-guidelines.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter guidelines.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-guidelines',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/seven/templates/text_format/container--text-format-filter-help.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme implementation for text filter help.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-help',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>

core/themes/seven/templates/text_format/container--text-format-filter-wrapper.html.twig

@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme implementation for the text filter wrapper.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+ *   containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'filter-wrapper',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>