From cc2b2060c278d116efedb61cea2e84e7e072810a Mon Sep 17 00:00:00 2001
From: Bysa Boro <baysaa@gmail.com>
Date: Fri, 25 Oct 2024 20:10:09 +0100
Subject: [PATCH 1/7] Port expanding text and remove typography plugin (#740)

Co-authored-by: Amitai Burstein <amitai@gizra.com>
---
 robo-components/ThemeTrait.php                |   3 +
 .../custom/server_general/src/ButtonTrait.php |  13 +-
 .../src/ElementTrait/CtaTrait.php             |   2 +-
 .../src/ElementTrait/ExpandingTextTrait.php   |  39 ++++++
 .../src/ElementTrait/HeroTrait.php            |   2 +-
 .../custom/server_style_guide/js/accordion.js |   2 +
 .../src/Controller/StyleGuideController.php   |  43 +++++-
 .../server-style-guide-text-styles.html.twig  | 129 +++++++++++-------
 .../custom/server_theme/package-lock.json     |  64 ---------
 web/themes/custom/server_theme/package.json   |   1 -
 .../server_theme/server_theme.libraries.yml   |   8 ++
 .../custom/server_theme/server_theme.theme    |  18 ++-
 .../server_theme/src/js/expanding-text.js     |  43 ++++++
 .../custom/server_theme/src/js/toggler.js     |  11 +-
 .../server_theme/src/pcss/typography.pcss     | 122 +++++++++++++++--
 .../custom/server_theme/tailwind.config.js    |   6 +-
 .../server_theme/templates/page.html.twig     |   2 +-
 .../templates/server-theme-button.html.twig   |   6 +-
 ...er-theme-element--expanding-text.html.twig |  39 ++++++
 .../server-theme-prose-text.html.twig         |   2 +-
 20 files changed, 409 insertions(+), 146 deletions(-)
 create mode 100644 web/modules/custom/server_general/src/ElementTrait/ExpandingTextTrait.php
 create mode 100644 web/themes/custom/server_theme/src/js/expanding-text.js
 create mode 100644 web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig

diff --git a/robo-components/ThemeTrait.php b/robo-components/ThemeTrait.php
index 72a796d05..345e7f479 100644
--- a/robo-components/ThemeTrait.php
+++ b/robo-components/ThemeTrait.php
@@ -71,6 +71,9 @@ private function doThemeCompile(bool $optimize = FALSE): void {
       $this->_copyDir(self::$themeBase . '/src/js', self::$themeBase . '/dist/js');
     }
 
+    // Fonts.
+    $this->_copyDir(self::$themeBase . '/src/fonts', self::$themeBase . '/dist/fonts');
+
     // Images - Copy everything first.
     $this->_copyDir(self::$themeBase . '/src/images', self::$themeBase . '/dist/images');
 
diff --git a/web/modules/custom/server_general/src/ButtonTrait.php b/web/modules/custom/server_general/src/ButtonTrait.php
index 9769b0a1c..b94eda636 100644
--- a/web/modules/custom/server_general/src/ButtonTrait.php
+++ b/web/modules/custom/server_general/src/ButtonTrait.php
@@ -22,8 +22,9 @@ trait ButtonTrait {
    *   The button's title.
    * @param \Drupal\Core\Url $url
    *   The button's URL as Url object.
-   * @param bool $is_primary
-   *   Whether this is a primary button. Defaults to FALSE.
+   * @param string $button_type
+   *   Type of button. Acceptable values: 'primary', 'secondary', 'tertiary'.
+   *   Defaults to 'primary'.
    * @param string|null $icon
    *   The name of the icon to add as prefix. Allowed values are:
    *   - `download`.
@@ -34,12 +35,16 @@ trait ButtonTrait {
    * @return array
    *   The rendered button array.
    */
-  protected function buildButton(array|string|TranslatableMarkup $title, Url $url, bool $is_primary = FALSE, ?string $icon = NULL, bool $open_new_tab = FALSE): array {
+  protected function buildButton(array|string|TranslatableMarkup $title, Url $url, string $button_type = 'primary', ?string $icon = NULL, bool $open_new_tab = FALSE): array {
+    $button_types = ['primary', 'secondary', 'tertiary'];
+    if (!in_array($button_type, $button_types)) {
+      $button_type = 'primary';
+    }
     return [
       '#theme' => 'server_theme_button',
       '#url' => $url,
       '#title'  => $title,
-      '#is_primary' => $is_primary,
+      '#button_type' => $button_type,
       '#icon' => $icon,
       '#open_new_tab' => $open_new_tab,
     ];
diff --git a/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php b/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php
index 8141891c1..4d17ec678 100644
--- a/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php
+++ b/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php
@@ -44,7 +44,7 @@ protected function buildElementCta(string $title, array $body, Link $link): arra
     $elements[] = $this->wrapProseText($body);
 
     // Button.
-    $elements[] = $this->buildButton($link->getText(), $link->getUrl(), TRUE, NULL, $link->getUrl()->isExternal());
+    $elements[] = $this->buildButton($link->getText(), $link->getUrl(), 'primary', NULL, $link->getUrl()->isExternal());
 
     $elements = $this->wrapContainerVerticalSpacingBig($elements, 'center');
 
diff --git a/web/modules/custom/server_general/src/ElementTrait/ExpandingTextTrait.php b/web/modules/custom/server_general/src/ElementTrait/ExpandingTextTrait.php
new file mode 100644
index 000000000..4b53f993b
--- /dev/null
+++ b/web/modules/custom/server_general/src/ElementTrait/ExpandingTextTrait.php
@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\server_general\ElementTrait;
+
+use Drupal\Component\Render\MarkupInterface;
+
+/**
+ * Trait for building Expanding text element.
+ */
+trait ExpandingTextTrait {
+
+  /**
+   * Build the Expanding text element.
+   *
+   * @param string|array|\Drupal\Component\Render\MarkupInterface $text
+   *   The text.
+   * @param int|null $lines_to_clamp
+   *   Number of lines to show initially.
+   * @param string|array|\Drupal\Component\Render\MarkupInterface|null $button_label_more
+   *   Button text to expand.
+   * @param string|array|\Drupal\Component\Render\MarkupInterface|null $button_label_less
+   *   Button text to collapse.
+   *
+   * @return array
+   *   The render array.
+   */
+  protected function buildElementExpandingText(string|array|MarkupInterface $text, ?int $lines_to_clamp = NULL, string|array|MarkupInterface|null $button_label_more = NULL, string|array|MarkupInterface|null $button_label_less = NULL): array {
+    return [
+      '#theme' => 'server_theme_element__expanding_text',
+      '#text' => $text,
+      '#lines_to_clamp' => $lines_to_clamp,
+      '#button_label_more' => $button_label_more,
+      '#button_label_less' => $button_label_less,
+    ];
+  }
+
+}
diff --git a/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php b/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php
index d04eb2b10..baf57475c 100644
--- a/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php
+++ b/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php
@@ -45,7 +45,7 @@ protected function buildElementHeroImage(array $image, string $title, string $su
 
     // Button.
     if ($link) {
-      $elements[] = $this->buildButton($link->getText(), $link->getUrl(), TRUE, NULL, $link->getUrl()->isExternal());
+      $elements[] = $this->buildButton($link->getText(), $link->getUrl(), 'primary', NULL, $link->getUrl()->isExternal());
     }
 
     $elements = $this->wrapContainerVerticalSpacingBig($elements);
diff --git a/web/modules/custom/server_style_guide/js/accordion.js b/web/modules/custom/server_style_guide/js/accordion.js
index dd3f69422..cd6b4f355 100644
--- a/web/modules/custom/server_style_guide/js/accordion.js
+++ b/web/modules/custom/server_style_guide/js/accordion.js
@@ -21,6 +21,8 @@
       }
       $slick.slick('setPosition');
     });
+    // Trigger resize.
+    $(window).trigger('resize');
   });
 
   // Check if hash exist, and if so try to open its pane.
diff --git a/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php b/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php
index 882130c23..79237e121 100644
--- a/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php
+++ b/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php
@@ -15,6 +15,7 @@
 use Drupal\server_general\ElementTrait\CarouselTrait;
 use Drupal\server_general\ElementTrait\CtaTrait;
 use Drupal\server_general\ElementTrait\DocumentsTrait;
+use Drupal\server_general\ElementTrait\ExpandingTextTrait;
 use Drupal\server_general\ElementTrait\HeroTrait;
 use Drupal\server_general\ElementTrait\InfoCardTrait;
 use Drupal\server_general\ElementTrait\NewsTeasersTrait;
@@ -46,6 +47,7 @@ class StyleGuideController extends ControllerBase {
   use ElementNodeNewsTrait;
   use ElementLayoutTrait;
   use ElementWrapTrait;
+  use ExpandingTextTrait;
   use HeroTrait;
   use InfoCardTrait;
   use LinkTrait;
@@ -146,6 +148,12 @@ protected function getAllElements() : array {
     $element = $this->getDocuments();
     $build[] = $this->wrapElementNoContainer($element, 'Element: Documents list');
 
+    $element = $this->getExpandingText();
+    $build[] = $this->wrapElementNoContainer($element, 'Element: Expanding text');
+
+    $element = $this->getExpandingText(3, 'More', 'Less');
+    $build[] = $this->wrapElementNoContainer($element, 'Element: Expanding text - 3 lines, custom buttons');
+
     $element = $this->getHeroImage();
     $build[] = $this->wrapElementNoContainer($element, 'Element: Hero image');
 
@@ -499,13 +507,17 @@ protected function getButtons(): array {
     $url = Url::fromRoute('<front>');
 
     // Primary button with icon.
-    $element = $this->buildButton('Download file', $url, TRUE, 'download');
+    $element = $this->buildButton($this->t('Download file'), $url, 'primary', 'download');
     $build[] = $this->wrapElementWideContainer($element, 'Primary button');
 
     // Secondary button.
-    $element = $this->buildButton('Register', $url, FALSE);
+    $element = $this->buildButton($this->t('Register'), $url, 'secondary');
     $build[] = $this->wrapElementWideContainer($element, 'Secondary button');
 
+    // Tertiary button.
+    $element = $this->buildButton($this->t('Login'), $url, 'tertiary');
+    $build[] = $this->wrapElementWideContainer($element, 'Tertiary button');
+
     return $build;
   }
 
@@ -758,11 +770,23 @@ protected function buildImage(string $url) {
    *   A render array.
    */
   protected function buildProcessedText(string $text) {
-    return [
+    // Emulate core processed text by wrapping the text in div.text-formatted.
+    $element = [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => [
+          'text-formatted',
+        ],
+      ],
+    ];
+
+    $element[] = [
       '#type' => 'processed_text',
       '#text' => $text,
       '#format' => filter_default_format(),
     ];
+
+    return $element;
   }
 
   /**
@@ -855,4 +879,17 @@ protected function getRelatedContent(int $num = 5, bool $is_featured = FALSE): a
     return $elements;
   }
 
+  /**
+   * Get a sample Expanding Text element.
+   *
+   * @return array
+   *   The render array.
+   */
+  protected function getExpandingText(?int $lines_to_clamp = NULL, ?string $button_label_more = NULL, ?string $button_label_less = NULL): array {
+    $element = ['#theme' => 'server_style_guide_text_styles'];
+    $element = $this->wrapProseText($element);
+
+    return $this->wrapContainerWide($this->buildElementExpandingText($element, $lines_to_clamp, $button_label_more, $button_label_less));
+  }
+
 }
diff --git a/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig b/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig
index b6ba6815f..1e9b5ba78 100644
--- a/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig
+++ b/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig
@@ -1,61 +1,84 @@
-<h1>This is an example for h1</h1>
-<h2>This is an example for h2</h2>
-<h3>This is an example for h3</h3>
-<h4>This is an example for h4</h4>
-<h5>This is an example for h5</h5>
-
-<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ul>
-
-<ol>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ol>
-
-<p>
-  This is a long paragraph that has some text.
-  Opulence to into a never no unprofitable a and the much she musical someone
-  she turner eating I text agreed terms, higher to cache thoughts up, common
-  ever better work, that been a ages, behind of make one vows, shut as much
-  shown horses he essential loyalty. That is it an almost clean set the her so
-  there out throughout. And feel make mouth. In somewhere, way. Was the
-  intrigued sovereignty. That by he sign such, win promptness he of stiff.
-</p>
-
-<blockquote>
-  This is a blockquote.
-</blockquote>
-
-<div>
-  <a href="#">This is a link</a>
-</div>
+<div class="text-formatted">
+  <h1>This is an example for h1</h1>
+  <h2>This is an example for h2</h2>
+  <h3>This is an example for h3</h3>
+  <h4>This is an example for h4</h4>
+  <h5>This is an example for h5</h5>
 
-<div>
-  <strong>This is bold text</strong>
-</div>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
 
-<div>
-  <em>This is italic text</em>
-</div>
+  <ol>
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ol>
 
-<div>
-  <del>This is deleted text</del>
-</div>
+  <p>
+    This is a long paragraph that has some text.
+    Opulence to into a never no unprofitable a and the much she musical someone
+    she turner eating I text agreed terms, higher to cache thoughts up, common
+    ever better work, that been a ages, behind of make one vows, shut as much
+    shown horses he essential loyalty. That is it an almost clean set the her so
+    there out throughout. And feel make mouth. In somewhere, way. Was the
+    intrigued sovereignty. That by he sign such, win promptness he of stiff.
+  </p>
 
-<div>
-  <ins>This is inserted text</ins>
-</div>
+  <table>
+    <thead>
+    <tr>
+      <th>Col 1</th>
+      <th>This is an example of a really long table header</th>
+      <th>Column 3</th>
+      <th>Miscellaneous</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <th>Side header 1</th>
+      <td>Data 1</td>
+      <td>Data 1</td>
+      <td>Data 1</td>
+    </tr>
+    <tr>
+      <th>Side header 2</th>
+      <td>Data 2</td>
+      <td>Data 2</td>
+      <td>Data 2</td>
+    </tr>
+    <tr>
+      <th>Side header 3</th>
+      <td>Data 3</td>
+      <td>Data 3</td>
+      <td>Data 3</td>
+    </tr>
+    </tbody>
+  </table>
 
-<div>
-  <sup>This is superscript text</sup>
-</div>
+  <blockquote>
+    This is a blockquote.
+  </blockquote>
 
-<div>
-  <sub>This is subscript text</sub>
-</div>
+  <p>
+    <a href="#">This is a link</a>
+  </p>
+
+  <p>
+    <strong>This is bold text</strong>
+  </p>
 
+  <p>
+    <em>This is italic text</em>
+  </p>
 
+  <p>
+    <sup>This is superscript text</sup>
+  </p>
+
+  <p>
+    <sub>This is subscript text</sub>
+  </p>
+</div>
diff --git a/web/themes/custom/server_theme/package-lock.json b/web/themes/custom/server_theme/package-lock.json
index 5286f3f50..ab6626ac8 100644
--- a/web/themes/custom/server_theme/package-lock.json
+++ b/web/themes/custom/server_theme/package-lock.json
@@ -6,7 +6,6 @@
     "": {
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/typography": "^0.5.7",
         "autoprefixer": "^10.4.12",
         "cssnano": "^5.1.13",
         "minify": "^9.1.0",
@@ -407,21 +406,6 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
       }
     },
-    "node_modules/@tailwindcss/typography": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.7.tgz",
-      "integrity": "sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==",
-      "dev": true,
-      "dependencies": {
-        "lodash.castarray": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.merge": "^4.6.2",
-        "postcss-selector-parser": "6.0.10"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
-      }
-    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -1534,12 +1518,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/lodash.castarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
-      "dev": true
-    },
     "node_modules/lodash.difference": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
@@ -1564,24 +1542,12 @@
       "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=",
       "dev": true
     },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
-    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
       "dev": true
     },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -4043,18 +4009,6 @@
         "mini-svg-data-uri": "^1.2.3"
       }
     },
-    "@tailwindcss/typography": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.7.tgz",
-      "integrity": "sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==",
-      "dev": true,
-      "requires": {
-        "lodash.castarray": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.merge": "^4.6.2",
-        "postcss-selector-parser": "6.0.10"
-      }
-    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -4843,12 +4797,6 @@
         "p-locate": "^6.0.0"
       }
     },
-    "lodash.castarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
-      "dev": true
-    },
     "lodash.difference": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
@@ -4873,24 +4821,12 @@
       "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=",
       "dev": true
     },
-    "lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
-    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
       "dev": true
     },
-    "lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
diff --git a/web/themes/custom/server_theme/package.json b/web/themes/custom/server_theme/package.json
index f624eedd5..626cd6c95 100644
--- a/web/themes/custom/server_theme/package.json
+++ b/web/themes/custom/server_theme/package.json
@@ -2,7 +2,6 @@
   "scripts": {},
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.7",
     "autoprefixer": "^10.4.12",
     "cssnano": "^5.1.13",
     "minify": "^9.1.0",
diff --git a/web/themes/custom/server_theme/server_theme.libraries.yml b/web/themes/custom/server_theme/server_theme.libraries.yml
index 8594d955c..ebebd4648 100644
--- a/web/themes/custom/server_theme/server_theme.libraries.yml
+++ b/web/themes/custom/server_theme/server_theme.libraries.yml
@@ -80,3 +80,11 @@ messages:
     dist/js/messages.js: {}
   dependencies:
     - core/drupal
+
+expanding-text:
+  js:
+    dist/js/expanding-text.js: {}
+  dependencies:
+    - core/drupal
+    - core/jquery
+    - core/once
diff --git a/web/themes/custom/server_theme/server_theme.theme b/web/themes/custom/server_theme/server_theme.theme
index a284cace5..64e2bc068 100644
--- a/web/themes/custom/server_theme/server_theme.theme
+++ b/web/themes/custom/server_theme/server_theme.theme
@@ -271,8 +271,8 @@ function server_theme_theme() {
       'url' => NULL,
       // The button's text.
       'title'  => NULL,
-      // Indicate if button should be primary or secondary.
-      'is_primary' => NULL,
+      // Specify button type. One of: 'primary', 'secondary' or 'tertiary'.
+      'button_type' => NULL,
       // Specify an icon. Any icon should be added as SVG in
       // `server-theme-button`.
       'icon' => NULL,
@@ -468,6 +468,20 @@ function server_theme_theme() {
     ],
   ];
 
+  // An element which displays clamped text with "Read more" option.
+  $info['server_theme_element__expanding_text'] = [
+    'variables' => [
+      // This needs to be a processed text wrapped with `text-formatted` class
+      // (i.e., a processed text field type).
+      'text' => NULL,
+      // Customize the Read more/less button text if needed.
+      'button_label_more' => NULL,
+      'button_label_less' => NULL,
+      // Customize how much clamping is done. 1 to 6. Default is 6.
+      'lines_to_clamp' => NULL,
+    ],
+  ];
+
   // Media document.
   $info['server_theme_media__document'] = [
     'variables' => [
diff --git a/web/themes/custom/server_theme/src/js/expanding-text.js b/web/themes/custom/server_theme/src/js/expanding-text.js
new file mode 100644
index 000000000..de3dd1419
--- /dev/null
+++ b/web/themes/custom/server_theme/src/js/expanding-text.js
@@ -0,0 +1,43 @@
+/**
+ * @file
+ * JS for button controls.
+ */
+(function ($, Drupal, once) {
+  Drupal.behaviors.expandingText = {
+    attach: function(context, settings) {
+      const $expandingText = $(once('expanding-text', '.js-expanding-text', context));
+      if (!$expandingText.length) {
+        return;
+      }
+
+      const checkExpandingText = function() {
+        $expandingText.each(function () {
+          const $text = $(this).find('.text-formatted');
+          if (!$text.length) {
+            return;
+          }
+          const $button = $(this).find('button');
+          const $textHeight = $text.height();
+          const $textScrollHeight = $text.prop('scrollHeight');
+
+          // If the text was clamped, the scrollHeight will be higher than the
+          // height.
+          if ($textHeight < $textScrollHeight) {
+            // Text is clamped, if the button's hidden, reveal it.
+            if ($button.hasClass('hidden')) {
+              $button.removeClass('hidden');
+            }
+            return;
+          }
+
+          // Text is not clamped, hide the button.
+          $button.addClass('hidden');
+        });
+      }
+
+      checkExpandingText();
+
+      $(window).on('resize', checkExpandingText);
+    }
+  }
+})(jQuery, Drupal, once);
diff --git a/web/themes/custom/server_theme/src/js/toggler.js b/web/themes/custom/server_theme/src/js/toggler.js
index 8f84f07e3..47c3dda0d 100644
--- a/web/themes/custom/server_theme/src/js/toggler.js
+++ b/web/themes/custom/server_theme/src/js/toggler.js
@@ -25,7 +25,16 @@
         if (!$target.length) {
           return;
         }
-        $target.toggleClass('hidden');
+
+        // Sometimes we don't want to toggle .hidden class. In such cases you
+        // can add data-toggle-strategy="aria-expanded" to the button, and this
+        // will instead toggle the aria-expanded property on the target element.
+        if ($this.data('toggleStrategy') === 'aria-expanded') {
+          $target.attr('aria-expanded', $target.attr('aria-expanded') === 'true' ? 'false' : 'true')
+        }
+        else {
+          $target.toggleClass('hidden');
+        }
         $this.attr('aria-expanded', $this.attr('aria-expanded') === 'true' ? 'false' : 'true');
 
         // Handle has-scroll class. It's nice to know element has scrollbar
diff --git a/web/themes/custom/server_theme/src/pcss/typography.pcss b/web/themes/custom/server_theme/src/pcss/typography.pcss
index 2c813a2ed..4e1ebebd7 100644
--- a/web/themes/custom/server_theme/src/pcss/typography.pcss
+++ b/web/themes/custom/server_theme/src/pcss/typography.pcss
@@ -14,16 +14,118 @@ body {
   @apply text-gray-900;
 }
 
-// Remove the top/ bottom margin from the first/ last element of a prose.
-.prose .text-formatted > :first-child {
-  @apply mt-0;
-}
+.prose {
+  // Apply default spacing to all formatted text elements.
+  .text-formatted > * {
+    @apply my-5 md:my-6 lg:my-8;
+  }
 
-.prose .text-formatted > :last-child {
-  @apply mb-0;
-}
+  // Remove top margin from first element, and bottom margin from last element.
+  .text-formatted > :first-child {
+    @apply mt-0;
+  }
+  .text-formatted > :last-child {
+    @apply mb-0;
+  }
+
+  // Remove margins from images.
+  figure,
+  img {
+    @apply my-0;
+  }
+
+  // Styling for text elements.
+  h1 {
+    @apply text-4xl md:text-5xl lg:text-6xl font-bold;
+  }
+
+  h2 {
+    @apply text-3xl md:text-4xl lg:text-5xl font-bold;
+  }
+
+  h3 {
+    @apply text-2xl md:text-3xl lg:text-4xl font-bold;
+  }
+
+  h4 {
+    @apply text-xl md:text-2xl lg:text-3xl font-bold;
+  }
+
+  h5 {
+    @apply text-lg md:text-xl lg:text-2xl font-bold;
+  }
+
+  h6 {
+    @apply text-lg md:text-xl lg:text-2xl;
+  }
+
+  p,
+  ul,
+  ol,
+  blockquote {
+    @apply text-base lg:text-lg;
+  }
+
+  ul,
+  ol {
+    @apply ps-6 md:ps-8 lg:ps-10;
+
+    li {
+      @apply my-1 md:my-2 lg:my-3 marker:text-gray-500;
+    }
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  ol {
+    @apply list-decimal;
+  }
+
+  a {
+    @apply underline decoration-2 underline-offset-4 decoration-blue-500 hover:decoration-emerald-900 hover:underline-offset-6 focus-visible:decoration-emerald-900 focus-visible:underline-offset-6 transition-all duration-300;
+  }
+
+  blockquote {
+    @apply ps-4 md:ps-5 lg:ps-6 border-s-4 border-slate-400;
+  }
+
+  table {
+    @apply table-auto w-full text-sm lg:text-base;
+
+    thead tr {
+      @apply border-b-2 border-gray-200 bg-gray-300;
+    }
+
+    th {
+      @apply align-bottom font-bold;
+    }
+
+    td {
+      @apply align-top;
+    }
+
+    th,
+    td {
+      @apply py-1 md:py-2 px-1 text-start;
+    }
+
+    tbody {
+      @apply border-b-2 border-gray-200;
+    }
+
+    tbody tr {
+      @apply border-b border-gray-100;
+
+      &:hover {
+        @apply bg-lime-100;
+      }
+    }
+
+  }
 
-.prose .text-formatted figure,
-.prose .text-formatted img {
-  @apply my-0;
 }
+
+
+
diff --git a/web/themes/custom/server_theme/tailwind.config.js b/web/themes/custom/server_theme/tailwind.config.js
index 832867be8..058a0dac5 100644
--- a/web/themes/custom/server_theme/tailwind.config.js
+++ b/web/themes/custom/server_theme/tailwind.config.js
@@ -4,8 +4,11 @@ module.exports = {
   theme: {
     extend: {
       maxWidth: {
-        '8xl': '90rem',
+        '8xl': '90rem'
       },
+      textUnderlineOffset: {
+        '6': '6px'
+      }
     },
     fontFamily: {
       'headers': ["Roboto", 'sans-serif'],
@@ -29,6 +32,5 @@ module.exports = {
   ],
   plugins: [
     require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
   ],
 };
diff --git a/web/themes/custom/server_theme/templates/page.html.twig b/web/themes/custom/server_theme/templates/page.html.twig
index 5a864e7f7..9ed1e483b 100644
--- a/web/themes/custom/server_theme/templates/page.html.twig
+++ b/web/themes/custom/server_theme/templates/page.html.twig
@@ -42,7 +42,7 @@
  * @see html.html.twig
  */
 #}
-<div class="layout-container text-black flex-1 flex flex-col gap-y-8 md:gap-y-10">
+<div class="layout-container flex-1 flex flex-col gap-y-8 md:gap-y-10">
 
   <header role="banner" class="w-full z-50 pt-5">
       {{ page.header }}
diff --git a/web/themes/custom/server_theme/templates/server-theme-button.html.twig b/web/themes/custom/server_theme/templates/server-theme-button.html.twig
index e45965f99..a098b121f 100644
--- a/web/themes/custom/server_theme/templates/server-theme-button.html.twig
+++ b/web/themes/custom/server_theme/templates/server-theme-button.html.twig
@@ -8,8 +8,10 @@
 {% endmacro %}
 
 {% set classes = [
-  'flex flex-row items-center gap-x-4 rounded-lg px-6 py-3 text-xl border-2 border-blue-500 hover:bg-blue-600 w-fit',
-  is_primary ? 'bg-blue-500 text-white' : 'text-blue-900 bg-white hover:text-white',
+  'flex flex-row items-center gap-x-4 rounded-lg px-6 py-3 text-xl border-2 border-blue-500 hover:bg-blue-600 w-fit transition duration-300',
+  button_type == 'primary' ? 'bg-blue-500 text-white hover:bg-white hover:text-blue-500 focus-visible:bg-white focus-visible:text-blue-500',
+  button_type == 'secondary' ? 'text-blue-900 bg-white border-blue-900 hover:text-white hover:bg-blue-900 focus-visible:text-white focus-visible:bg-blue-900',
+  button_type == 'tertiary' ? 'text-white bg-emerald-900 border-emerald-900 hover:text-emerald-900 hover:bg-white focus-visible:text-emerald-900 focus-visible:bg-white',
 ] | join(' ') | trim %}
 
 {% set target = open_new_tab ? '_blank' : '_self' %}
diff --git a/web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig b/web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig
new file mode 100644
index 000000000..c90346b3f
--- /dev/null
+++ b/web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig
@@ -0,0 +1,39 @@
+{{ attach_library('server_theme/expanding-text') }}
+{% set expanding_text_id = 'expanding-text-' ~ random() %}
+<div class="js-expanding-text grid grid-cols-1 gap-1">
+  {% if lines_to_clamp == '1' %}
+    {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-1" %}
+  {% elseif lines_to_clamp == '2' %}
+    {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-2" %}
+  {% elseif lines_to_clamp == '3' %}
+    {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-3" %}
+  {% elseif lines_to_clamp == '4' %}
+    {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-4" %}
+  {% elseif lines_to_clamp == '5' %}
+    {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-5" %}
+  {% elseif lines_to_clamp == '6' or lines_to_clamp is empty %}
+    {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-6" %}
+  {% endif %}
+  {# We have to set the line-clamp on the `text-formatted`, so we define this here #}
+  <div class="js-expanding-text--text [&[aria-expanded='false']_.text-formatted]:{{ line_clamp }} [&[aria-expanded='true']_.text-formatted]:line-clamp-none" id="{{ expanding_text_id }}" aria-expanded="false">
+    {{ text }}
+  </div>
+  <div>
+    <button type="button" aria-controls="{{ expanding_text_id }}" aria-expanded="false" data-toggle-strategy="aria-expanded" class="font-semibold text-sm lg:text-base grid grid-cols-1">
+      <span class="col-start-1 row-start-1 flex flex-row gap-2 lg:gap-2.5 items-center is-hidden-when-expanded">
+        {# Heroicons - Solid - Plus. #}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 lg:w-5 lg:h-5">
+          <path fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
+        </svg>
+        {{ button_label_more ?? 'Read more'|t }}
+      </span>
+      <span class="col-start-1 row-start-1 flex flex-row gap-2 lg:gap-2.5 items-center is-revealed-when-expanded">
+        {# Heroicons - Solid - Minus. #}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 lg:w-5 lg:h-5">
+          <path fill-rule="evenodd" d="M4.25 12a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
+        </svg>
+        {{ button_label_less ?? 'Read less'|t }}
+      </span>
+    </button>
+  </div>
+</div>
diff --git a/web/themes/custom/server_theme/templates/server-theme-prose-text.html.twig b/web/themes/custom/server_theme/templates/server-theme-prose-text.html.twig
index fcb107acd..a8ebd03aa 100644
--- a/web/themes/custom/server_theme/templates/server-theme-prose-text.html.twig
+++ b/web/themes/custom/server_theme/templates/server-theme-prose-text.html.twig
@@ -1,3 +1,3 @@
-<div class="prose md:prose-lg lg:prose-xl prose-headings:text-gray-700 max-w-3xl">
+<div class="prose max-w-3xl">
   {{ text }}
 </div>

From 3ca57c0382f5d04fd48a5ed8ca8a95972b32cbe1 Mon Sep 17 00:00:00 2001
From: Amitai Burstein <amitai@gizra.com>
Date: Mon, 28 Oct 2024 16:39:51 +0200
Subject: [PATCH 2/7] Fix line-clamp, to work with css purge (#741)

---
 .../server-theme-element--expanding-text.html.twig          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig b/web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig
index c90346b3f..eed22f430 100644
--- a/web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig
+++ b/web/themes/custom/server_theme/templates/server-theme-element--expanding-text.html.twig
@@ -2,6 +2,7 @@
 {% set expanding_text_id = 'expanding-text-' ~ random() %}
 <div class="js-expanding-text grid grid-cols-1 gap-1">
   {% if lines_to_clamp == '1' %}
+    {# We have to set the line-clamp on the `text-formatted`, so we define this here #}
     {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-1" %}
   {% elseif lines_to_clamp == '2' %}
     {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-2" %}
@@ -13,9 +14,8 @@
     {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-5" %}
   {% elseif lines_to_clamp == '6' or lines_to_clamp is empty %}
     {% set line_clamp = "[&[aria-expanded='false']_.text-formatted]:line-clamp-6" %}
-  {% endif %}
-  {# We have to set the line-clamp on the `text-formatted`, so we define this here #}
-  <div class="js-expanding-text--text [&[aria-expanded='false']_.text-formatted]:{{ line_clamp }} [&[aria-expanded='true']_.text-formatted]:line-clamp-none" id="{{ expanding_text_id }}" aria-expanded="false">
+  {% endif %}  
+  <div class="js-expanding-text--text {{ line_clamp }} [&[aria-expanded='true']_.text-formatted]:line-clamp-none" id="{{ expanding_text_id }}" aria-expanded="false">
     {{ text }}
   </div>
   <div>

From 4f98d0b70a84c31651800591696d1c5b439af9e6 Mon Sep 17 00:00:00 2001
From: Amitai Burstein <amitai@gizra.com>
Date: Fri, 1 Nov 2024 22:39:22 +0200
Subject: [PATCH 3/7] Add Codespaces support (#744)

---
 .ddev/config.local.yaml.example |  7 ++++---
 .devcontainer/devcontainer.json |  7 +++++++
 README.md                       | 15 +++++++++++----
 codespaces_setup.sh             | 25 +++++++++++++++++++++++++
 4 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 .devcontainer/devcontainer.json
 create mode 100755 codespaces_setup.sh

diff --git a/.ddev/config.local.yaml.example b/.ddev/config.local.yaml.example
index d362b42cd..c4022aff3 100644
--- a/.ddev/config.local.yaml.example
+++ b/.ddev/config.local.yaml.example
@@ -44,9 +44,6 @@ hooks:
     # @see https://www.drupal.org/node/947312
     - exec: drush user-block --uid=1
 
-    # Login as AdminOne.
-    - exec-host: ddev login
-
     # Make sure PHP CLI has no memory limit, this is
     # especially for unit testing.
     # Web requests should be still limited, as the
@@ -54,6 +51,10 @@ hooks:
     # memory either.
     # @see https://github.com/drud/ddev/issues/1825#issuecomment-529964728
     - exec: perl -pi -e 's/memory_limit.*$/memory_limit = -1/' /etc/php/${DDEV_PHP_VERSION}/cli/conf.d/*.ini
+
+    # Login as AdminOne.
+    - exec-host: ddev login
+
   post-import-db:
     # Run DB updates.
     - exec: drush updb
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 000000000..8e2d9311a
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,7 @@
+{
+    "image": "mcr.microsoft.com/devcontainers/universal:2",
+    "features": {
+        "ghcr.io/ddev/ddev/install-ddev:latest": {}
+    },
+    "postCreateCommand": "./codespaces_setup.sh"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 0bbff89a9..da1a85794 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
 [![Build Status](https://app.travis-ci.com/Gizra/drupal-starter.svg?branch=main)](https://app.travis-ci.com/Gizra/drupal-starter)
 
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=250256146)
+
+
 # Drupal 10 Starter
 
 Starter repo for Drupal 10 development. This starter is an opinionated approach,
@@ -22,18 +25,22 @@ us with easier iteration, reading and manipulating yaml files, pre-defined
 deployments. See more under ["Deploy to Pantheon"](#deploy-to-pantheon) section.
 1. We use [Pluggable Entity View Builder](https://www.drupal.org/project/pluggable_entity_view_builder) to define how an entity should look like. See [example](https://github.com/Gizra/drupal-starter/blob/main/web/modules/custom/server_general/src/Plugin/EntityViewBuilder/NodeLandingPage.php).
 
-## Requirements
+## GitHub Codespaces
+
+You can open this project in GitHub Codespaces by clicking the badge at the top of this README. This will open a Codespace with the project already cloned and ready to go.
+
+Once the installation is complete, you can use `ddev login` to log in to the site as admin user using your default browser.
 
-* [DDEV](https://ddev.readthedocs.io/en/stable/)
+## Local Installation
 
-## Installation
+The only requirement is having [DDEV](https://ddev.readthedocs.io/en/stable/) installed.
 
     ddev composer install
     cp .ddev/config.local.yaml.example .ddev/config.local.yaml
     ddev restart
 
 Once the Drupal installation is complete you can use `ddev login` to
-log in to the site as user 1 using your default browser.
+log in to the site as admin userusing your default browser.
 
 ## Default content management
 
diff --git a/codespaces_setup.sh b/codespaces_setup.sh
new file mode 100755
index 000000000..466dcb39b
--- /dev/null
+++ b/codespaces_setup.sh
@@ -0,0 +1,25 @@
+#!/bin/bash
+set -x
+
+wait_for_docker() {
+  # Loop until Docker responds, indicating it's ready
+  while true; do
+    docker ps > /dev/null 2>&1 && break
+    sleep 1
+  done
+  echo "Docker is ready."
+}
+
+wait_for_docker
+
+# Remove lynx to prevent it opening a GUI while installing, which
+# would cause the build to get stuck after the `ddev restart`.
+sudo apt-get remove -y lynx
+
+# Proceed with commands requiring Docker
+ddev composer install
+cp .ddev/config.local.yaml.example .ddev/config.local.yaml
+
+# As we have a `ddev login` in the end of the ddev restart, it fails on codespace.
+# So we force a success exit code to avoid the build to fail.
+ddev restart -y || true

From 5cb361a08ff1d1ab9a953c56807907fd78cac7da Mon Sep 17 00:00:00 2001
From: Amitai Burstein <amitai@gizra.com>
Date: Fri, 1 Nov 2024 22:50:44 +0200
Subject: [PATCH 4/7] Document Codespace install length (#746)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index da1a85794..4191fc101 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ deployments. See more under ["Deploy to Pantheon"](#deploy-to-pantheon) section
 
 You can open this project in GitHub Codespaces by clicking the badge at the top of this README. This will open a Codespace with the project already cloned and ready to go.
 
-Once the installation is complete, you can use `ddev login` to log in to the site as admin user using your default browser.
+Once the installation is complete (takes about 10 minutes), you can use `ddev login` to log in to the site as admin user using your default browser.
 
 ## Local Installation
 

From 981effa03ac440baea8895b7017d876b14096407 Mon Sep 17 00:00:00 2001
From: Sonvir <choudharysonvir@gmail.com>
Date: Mon, 11 Nov 2024 22:25:25 +0530
Subject: [PATCH 5/7] issue-732: Remove top border if there are no tags. (#747)

Co-authored-by: sonvir249 <39142-sonvir249@users.noreply.drupalcode.org>
---
 .../custom/server_general/src/ElementNodeNewsTrait.php     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/modules/custom/server_general/src/ElementNodeNewsTrait.php b/web/modules/custom/server_general/src/ElementNodeNewsTrait.php
index 91ea62058..915355523 100644
--- a/web/modules/custom/server_general/src/ElementNodeNewsTrait.php
+++ b/web/modules/custom/server_general/src/ElementNodeNewsTrait.php
@@ -129,10 +129,11 @@ private function buildMainAndSidebar(string $title, array $image, array $body, a
     // Get the tags, and social share.
     $sidebar_elements[] = $tags;
 
-    // Add a line separator above the social share buttons.
-    $sidebar_elements[] = $this->buildLineSeparator();
+    // Add a line separator above the social share buttons when tags are added.
+    if (!empty($tags)) {
+      $sidebar_elements[] = $this->buildLineSeparator();
+    }
     $sidebar_elements[] = $this->buildElementSocialShare($title, $url);
-
     $sidebar_elements = $this->wrapContainerVerticalSpacing($sidebar_elements);
 
     return $this->buildElementLayoutMainAndSidebar(

From 69fcbb3b224dd944e272e2da560f69528f916c3e Mon Sep 17 00:00:00 2001
From: Aron Novak <AronNovak@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:58:40 +0100
Subject: [PATCH 6/7] DDEV upgrade inside Travis (#749)

---
 .ddev/config.yaml          | 4 ++--
 ci-scripts/install_ddev.sh | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.ddev/config.yaml b/.ddev/config.yaml
index b3d2970f9..bbc2880f8 100644
--- a/.ddev/config.yaml
+++ b/.ddev/config.yaml
@@ -11,12 +11,12 @@ additional_fqdns: []
 database:
     type: mariadb
     version: "10.5"
+fail_on_hook_fail: true
 use_dns_when_possible: true
 composer_version: "2"
 web_environment:
     - COMPOSER_EXIT_ON_PATCH_FAILURE=1
 corepack_enable: false
-fail_on_hook_fail: true
 
 # Key features of DDEV's config.yaml:
 
@@ -204,7 +204,7 @@ fail_on_hook_fail: true
 
 # disable_settings_management: false
 # If true, DDEV will not create CMS-specific settings files like
-# Drupal's settings.php/settings.ddev.php or TYPO3's AdditionalConfiguration.php
+# Drupal's settings.php/settings.ddev.php or TYPO3's additional.php
 # In this case the user must provide all such settings.
 
 # You can inject environment variables into the web container with:
diff --git a/ci-scripts/install_ddev.sh b/ci-scripts/install_ddev.sh
index f2980c851..95d7e0708 100755
--- a/ci-scripts/install_ddev.sh
+++ b/ci-scripts/install_ddev.sh
@@ -7,7 +7,7 @@ else
   docker login --password "$DOCKER_PASSWORD" --username amitaibu
 fi
 
-DDEV_VERSION="v1.23.4"
+DDEV_VERSION="v1.23.5"
 
 if ! command -v ddev &>/dev/null; then
     echo "Installing ddev."

From 19ffe8719cfa8fb114ab8f459ff88e99b71dbd50 Mon Sep 17 00:00:00 2001
From: Sonvir <choudharysonvir@gmail.com>
Date: Wed, 13 Nov 2024 00:57:34 +0530
Subject: [PATCH 7/7] Issue-719: Replace webp with wfp module. (#750)

Co-authored-by: sonvir249 <39142-sonvir249@users.noreply.drupalcode.org>
---
 composer.json                                 |  2 +-
 composer.lock                                 | 51 +++++++++----------
 config/sync/core.extension.yml                |  2 +-
 config/sync/image.style.card.yml              |  6 +++
 config/sync/image.style.hero_lg_1x.yml        |  6 +++
 config/sync/image.style.hero_lg_2x.yml        |  6 +++
 config/sync/image.style.hero_md_1x.yml        |  6 +++
 config/sync/image.style.hero_md_2x.yml        |  6 +++
 config/sync/image.style.hero_mobile_1x.yml    |  6 +++
 config/sync/image.style.hero_mobile_2x.yml    |  6 +++
 config/sync/image.style.hero_sm_1x.yml        |  6 +++
 config/sync/image.style.hero_sm_2x.yml        |  6 +++
 config/sync/image.style.hero_xl_1x.yml        |  6 +++
 config/sync/image.style.hero_xl_2x.yml        |  6 +++
 config/sync/image.style.large.yml             |  6 +++
 ...e.style.media_entity_browser_thumbnail.yml |  6 +++
 config/sync/image.style.media_library.yml     |  6 +++
 config/sync/image.style.medium.yml            |  6 +++
 config/sync/image.style.prose_image.yml       |  6 +++
 config/sync/image.style.prose_image_x2.yml    |  6 +++
 config/sync/image.style.quote_lg_1x.yml       |  6 +++
 config/sync/image.style.quote_lg_2x.yml       |  6 +++
 config/sync/image.style.quote_md_1x.yml       |  6 +++
 config/sync/image.style.quote_md_2x.yml       |  6 +++
 config/sync/image.style.quote_mobile_1x.yml   |  6 +++
 config/sync/image.style.quote_mobile_2x.yml   |  6 +++
 config/sync/image.style.quote_sm_1x.yml       |  6 +++
 config/sync/image.style.quote_sm_2x.yml       |  6 +++
 config/sync/image.style.quote_xl_1x.yml       |  6 +++
 config/sync/image.style.quote_xl_2x.yml       |  6 +++
 config/sync/image.style.thumbnail.yml         |  6 +++
 config/sync/webp.settings.yml                 |  3 --
 config/sync/wpf.settings.yml                  | 33 ++++++++++++
 33 files changed, 228 insertions(+), 31 deletions(-)
 delete mode 100644 config/sync/webp.settings.yml
 create mode 100644 config/sync/wpf.settings.yml

diff --git a/composer.json b/composer.json
index 7d486f2b0..c846b902f 100644
--- a/composer.json
+++ b/composer.json
@@ -80,7 +80,7 @@
         "drupal/ultimate_cron": "^2.0@alpha",
         "drupal/upgrade_status": "^4.0",
         "drupal/username_enumeration_prevention": "^1.3",
-        "drupal/webp": "^1.0@RC",
+        "drupal/wpf": "^1.2",
         "drush/drush": "^12.4",
         "longwave/laminas-diactoros": "^2.14",
         "npm-asset/anchor-js": "^5.0",
diff --git a/composer.lock b/composer.lock
index 3245ab921..e146533c8 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9be78e9e1839c8bd8e6a369c0b63a196",
+    "content-hash": "b39359d82267f4b683b257763dce7b60",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -5505,31 +5505,31 @@
             }
         },
         {
-            "name": "drupal/webp",
-            "version": "1.0.0-rc2",
+            "name": "drupal/wpf",
+            "version": "1.2.4",
             "source": {
                 "type": "git",
-                "url": "https://git.drupalcode.org/project/webp.git",
-                "reference": "8.x-1.0-rc2"
+                "url": "https://git.drupalcode.org/project/wpf.git",
+                "reference": "1.2.4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://ftp.drupal.org/files/projects/webp-8.x-1.0-rc2.zip",
-                "reference": "8.x-1.0-rc2",
-                "shasum": "16a1d2c29af57ac04603bcba275e732340491554"
+                "url": "https://ftp.drupal.org/files/projects/wpf-1.2.4.zip",
+                "reference": "1.2.4",
+                "shasum": "faa7f46b2a91416cf789ba938a001c3826962a83"
             },
             "require": {
-                "drupal/core": "^8 || ^9 || ^10 || ^11",
+                "drupal/core": "^10.3 || ^11",
                 "ext-gd": "*"
             },
             "type": "drupal-module",
             "extra": {
                 "drupal": {
-                    "version": "8.x-1.0-rc2",
-                    "datestamp": "1713170119",
+                    "version": "1.2.4",
+                    "datestamp": "1721639534",
                     "security-coverage": {
-                        "status": "not-covered",
-                        "message": "RC releases are not covered by Drupal security advisories."
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
                     }
                 }
             },
@@ -5539,28 +5539,28 @@
             ],
             "authors": [
                 {
-                    "name": "Bart Vanhoutte",
-                    "homepage": "https://www.drupal.org/user/145609",
-                    "email": "bart@croquemonsieur.be",
+                    "name": "Dudás József",
+                    "homepage": "https://www.drupal.org/user/387119",
+                    "email": "dj@brainsum.com",
                     "role": "Maintainer"
                 },
                 {
-                    "name": "Bart Vanhoutte",
-                    "homepage": "https://www.drupal.org/user/1133754"
+                    "name": "pedrop",
+                    "homepage": "https://www.drupal.org/user/1043368"
                 },
                 {
-                    "name": "mandclu",
-                    "homepage": "https://www.drupal.org/user/52136"
+                    "name": "szato",
+                    "homepage": "https://www.drupal.org/user/389677"
                 }
             ],
-            "description": "Generates WebP copies of image style derivatives.",
-            "homepage": "https://www.drupal.org/project/webp",
+            "description": "Generates jpg copies of webp image style derivatives.",
+            "homepage": "https://www.drupal.org/project/wpf",
             "keywords": [
                 "Drupal"
             ],
             "support": {
-                "source": "http://cgit.drupalcode.org/webp",
-                "issues": "https://www.drupal.org/project/issues/webp"
+                "source": "http://cgit.drupalcode.org/wpf",
+                "issues": "https://www.drupal.org/project/issues/wpf"
             }
         },
         {
@@ -14945,8 +14945,7 @@
         "drupal/drupal_test_assertions": 20,
         "drupal/inline_entity_form": 5,
         "drupal/potx": 15,
-        "drupal/ultimate_cron": 15,
-        "drupal/webp": 5
+        "drupal/ultimate_cron": 15
     },
     "prefer-stable": true,
     "prefer-lowest": false,
diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml
index cdbad1ea8..f0e534322 100644
--- a/config/sync/core.extension.yml
+++ b/config/sync/core.extension.yml
@@ -87,8 +87,8 @@ module:
   user: 0
   username_enumeration_prevention: 0
   views_ui: 0
-  webp: 0
   workflows: 0
+  wpf: 0
   fast404: 1
   menu_link_content: 1
   pathauto: 1
diff --git a/config/sync/image.style.card.yml b/config/sync/image.style.card.yml
index c27197268..e8558f4a7 100644
--- a/config/sync/image.style.card.yml
+++ b/config/sync/image.style.card.yml
@@ -15,3 +15,9 @@ effects:
       width: 410
       height: 192
       crop_type: focal_point
+  346e742d-d17c-4208-b156-5812339ec476:
+    uuid: 346e742d-d17c-4208-b156-5812339ec476
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_lg_1x.yml b/config/sync/image.style.hero_lg_1x.yml
index e0a092c07..ac6944f00 100644
--- a/config/sync/image.style.hero_lg_1x.yml
+++ b/config/sync/image.style.hero_lg_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1280
       height: 400
       crop_type: focal_point
+  4917daef-1434-4208-bbf7-a5f9e88ed45c:
+    uuid: 4917daef-1434-4208-bbf7-a5f9e88ed45c
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_lg_2x.yml b/config/sync/image.style.hero_lg_2x.yml
index 4992ccc25..a4298636e 100644
--- a/config/sync/image.style.hero_lg_2x.yml
+++ b/config/sync/image.style.hero_lg_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 2560
       height: 800
       crop_type: focal_point
+  4517c920-bb20-40cb-9d8d-2edc4decbbc5:
+    uuid: 4517c920-bb20-40cb-9d8d-2edc4decbbc5
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_md_1x.yml b/config/sync/image.style.hero_md_1x.yml
index d2611645b..377983e0a 100644
--- a/config/sync/image.style.hero_md_1x.yml
+++ b/config/sync/image.style.hero_md_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1024
       height: 320
       crop_type: focal_point
+  845c67f6-75c7-4321-8f87-577ecdf0d917:
+    uuid: 845c67f6-75c7-4321-8f87-577ecdf0d917
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_md_2x.yml b/config/sync/image.style.hero_md_2x.yml
index 9486d5a52..8df453a22 100644
--- a/config/sync/image.style.hero_md_2x.yml
+++ b/config/sync/image.style.hero_md_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 2048
       height: 640
       crop_type: focal_point
+  2c40eafc-0ff8-4d30-8a57-d90ec3be292a:
+    uuid: 2c40eafc-0ff8-4d30-8a57-d90ec3be292a
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_mobile_1x.yml b/config/sync/image.style.hero_mobile_1x.yml
index caa02e7e3..843e11ccf 100644
--- a/config/sync/image.style.hero_mobile_1x.yml
+++ b/config/sync/image.style.hero_mobile_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 640
       height: 200
       crop_type: focal_point
+  42df8dd1-c7f1-4e71-8935-4f45a0ae016d:
+    uuid: 42df8dd1-c7f1-4e71-8935-4f45a0ae016d
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_mobile_2x.yml b/config/sync/image.style.hero_mobile_2x.yml
index 13291c7ba..f6d176c60 100644
--- a/config/sync/image.style.hero_mobile_2x.yml
+++ b/config/sync/image.style.hero_mobile_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1280
       height: 400
       crop_type: focal_point
+  56762e47-7354-4f2e-af60-badffc42ed0c:
+    uuid: 56762e47-7354-4f2e-af60-badffc42ed0c
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_sm_1x.yml b/config/sync/image.style.hero_sm_1x.yml
index e80753b1d..16cc13e66 100644
--- a/config/sync/image.style.hero_sm_1x.yml
+++ b/config/sync/image.style.hero_sm_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 768
       height: 240
       crop_type: focal_point
+  5904d9f3-a67c-43d8-bfab-26b10f8f141c:
+    uuid: 5904d9f3-a67c-43d8-bfab-26b10f8f141c
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_sm_2x.yml b/config/sync/image.style.hero_sm_2x.yml
index fa3e839e3..4e2cf4bdd 100644
--- a/config/sync/image.style.hero_sm_2x.yml
+++ b/config/sync/image.style.hero_sm_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1536
       height: 480
       crop_type: focal_point
+  0843a229-7768-4c41-a90f-c633f2fdf82d:
+    uuid: 0843a229-7768-4c41-a90f-c633f2fdf82d
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_xl_1x.yml b/config/sync/image.style.hero_xl_1x.yml
index c88362da2..4446f64e0 100644
--- a/config/sync/image.style.hero_xl_1x.yml
+++ b/config/sync/image.style.hero_xl_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1536
       height: 466
       crop_type: focal_point
+  481711d6-f88e-4a03-84ef-ba4314e6ab3f:
+    uuid: 481711d6-f88e-4a03-84ef-ba4314e6ab3f
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.hero_xl_2x.yml b/config/sync/image.style.hero_xl_2x.yml
index 3b0adc7f6..ac0b03603 100644
--- a/config/sync/image.style.hero_xl_2x.yml
+++ b/config/sync/image.style.hero_xl_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 3072
       height: 932
       crop_type: focal_point
+  a13fd71a-b8ca-4ef8-bcf9-0b78a732df01:
+    uuid: a13fd71a-b8ca-4ef8-bcf9-0b78a732df01
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.large.yml b/config/sync/image.style.large.yml
index 94b2ef487..1a3468ace 100644
--- a/config/sync/image.style.large.yml
+++ b/config/sync/image.style.large.yml
@@ -17,3 +17,9 @@ effects:
       width: 480
       height: 480
       crop_type: focal_point
+  e1eb279b-9d91-47ee-a8b0-acf4dafe076b:
+    uuid: e1eb279b-9d91-47ee-a8b0-acf4dafe076b
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.media_entity_browser_thumbnail.yml b/config/sync/image.style.media_entity_browser_thumbnail.yml
index c851a63c9..f0e242786 100644
--- a/config/sync/image.style.media_entity_browser_thumbnail.yml
+++ b/config/sync/image.style.media_entity_browser_thumbnail.yml
@@ -17,3 +17,9 @@ effects:
       width: 350
       height: 200
       crop_type: focal_point
+  2e96d10d-25a9-499a-8a56-7b560b81c257:
+    uuid: 2e96d10d-25a9-499a-8a56-7b560b81c257
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.media_library.yml b/config/sync/image.style.media_library.yml
index ffaada986..0f4bfb067 100644
--- a/config/sync/image.style.media_library.yml
+++ b/config/sync/image.style.media_library.yml
@@ -18,3 +18,9 @@ effects:
       width: 220
       height: 220
       upscale: false
+  a3d694bc-5420-4898-bb2c-d083ca7ab306:
+    uuid: a3d694bc-5420-4898-bb2c-d083ca7ab306
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.medium.yml b/config/sync/image.style.medium.yml
index bfe658637..03140d7d5 100644
--- a/config/sync/image.style.medium.yml
+++ b/config/sync/image.style.medium.yml
@@ -15,3 +15,9 @@ effects:
       width: 220
       height: 220
       upscale: false
+  4afe0de5-587c-4c40-813b-23d7fbde9a0e:
+    uuid: 4afe0de5-587c-4c40-813b-23d7fbde9a0e
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.prose_image.yml b/config/sync/image.style.prose_image.yml
index d0de4da3d..67d3333ac 100644
--- a/config/sync/image.style.prose_image.yml
+++ b/config/sync/image.style.prose_image.yml
@@ -13,3 +13,9 @@ effects:
       width: 768
       height: null
       upscale: false
+  20beb2f0-b7e1-4a35-9d15-ca54bc72a834:
+    uuid: 20beb2f0-b7e1-4a35-9d15-ca54bc72a834
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.prose_image_x2.yml b/config/sync/image.style.prose_image_x2.yml
index cba7ff66b..881cff760 100644
--- a/config/sync/image.style.prose_image_x2.yml
+++ b/config/sync/image.style.prose_image_x2.yml
@@ -13,3 +13,9 @@ effects:
       width: 1536
       height: null
       upscale: false
+  17b5ae17-edbc-4fe4-aa84-6f1ea5eded91:
+    uuid: 17b5ae17-edbc-4fe4-aa84-6f1ea5eded91
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_lg_1x.yml b/config/sync/image.style.quote_lg_1x.yml
index a4a6ffc89..6e853e889 100644
--- a/config/sync/image.style.quote_lg_1x.yml
+++ b/config/sync/image.style.quote_lg_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 640
       height: 400
       crop_type: focal_point
+  7e0a6e88-4e6b-4c17-9765-b12332a80188:
+    uuid: 7e0a6e88-4e6b-4c17-9765-b12332a80188
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_lg_2x.yml b/config/sync/image.style.quote_lg_2x.yml
index e15706a34..12b18ef4d 100644
--- a/config/sync/image.style.quote_lg_2x.yml
+++ b/config/sync/image.style.quote_lg_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1280
       height: 800
       crop_type: focal_point
+  9469d166-db60-43a5-9871-7effd378f084:
+    uuid: 9469d166-db60-43a5-9871-7effd378f084
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_md_1x.yml b/config/sync/image.style.quote_md_1x.yml
index a6ee4eaa2..523444011 100644
--- a/config/sync/image.style.quote_md_1x.yml
+++ b/config/sync/image.style.quote_md_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 512
       height: 320
       crop_type: focal_point
+  bc7da43a-1fb1-4506-a9f0-00fc8761c147:
+    uuid: bc7da43a-1fb1-4506-a9f0-00fc8761c147
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_md_2x.yml b/config/sync/image.style.quote_md_2x.yml
index 433ab3d43..d8d3af312 100644
--- a/config/sync/image.style.quote_md_2x.yml
+++ b/config/sync/image.style.quote_md_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1024
       height: 640
       crop_type: focal_point
+  76233d64-0175-465a-9089-15790bb88bbf:
+    uuid: 76233d64-0175-465a-9089-15790bb88bbf
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_mobile_1x.yml b/config/sync/image.style.quote_mobile_1x.yml
index 9d2eaff42..efdd6e96d 100644
--- a/config/sync/image.style.quote_mobile_1x.yml
+++ b/config/sync/image.style.quote_mobile_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 640
       height: 200
       crop_type: focal_point
+  35eaa298-b20f-491c-a58c-d0ad238a0463:
+    uuid: 35eaa298-b20f-491c-a58c-d0ad238a0463
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_mobile_2x.yml b/config/sync/image.style.quote_mobile_2x.yml
index 40c3debfc..ac8f22d79 100644
--- a/config/sync/image.style.quote_mobile_2x.yml
+++ b/config/sync/image.style.quote_mobile_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1280
       height: 400
       crop_type: focal_point
+  8c08c569-070e-4f47-9eb2-06c8d430a579:
+    uuid: 8c08c569-070e-4f47-9eb2-06c8d430a579
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_sm_1x.yml b/config/sync/image.style.quote_sm_1x.yml
index b2f210288..15565fa43 100644
--- a/config/sync/image.style.quote_sm_1x.yml
+++ b/config/sync/image.style.quote_sm_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 768
       height: 240
       crop_type: focal_point
+  69a9ac01-4511-4276-b66d-914fd4b250f9:
+    uuid: 69a9ac01-4511-4276-b66d-914fd4b250f9
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_sm_2x.yml b/config/sync/image.style.quote_sm_2x.yml
index ac0fdc0a1..6c9539f4a 100644
--- a/config/sync/image.style.quote_sm_2x.yml
+++ b/config/sync/image.style.quote_sm_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1536
       height: 480
       crop_type: focal_point
+  6aa94ff0-845c-4aca-aa33-6bf7db0b4db3:
+    uuid: 6aa94ff0-845c-4aca-aa33-6bf7db0b4db3
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_xl_1x.yml b/config/sync/image.style.quote_xl_1x.yml
index ffd57a671..3f5c6f67b 100644
--- a/config/sync/image.style.quote_xl_1x.yml
+++ b/config/sync/image.style.quote_xl_1x.yml
@@ -15,3 +15,9 @@ effects:
       width: 768
       height: 400
       crop_type: focal_point
+  b6573460-ebc9-4bfd-9709-52910cf553bf:
+    uuid: b6573460-ebc9-4bfd-9709-52910cf553bf
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.quote_xl_2x.yml b/config/sync/image.style.quote_xl_2x.yml
index 77716a222..0edc48eed 100644
--- a/config/sync/image.style.quote_xl_2x.yml
+++ b/config/sync/image.style.quote_xl_2x.yml
@@ -15,3 +15,9 @@ effects:
       width: 1536
       height: 400
       crop_type: focal_point
+  7f0a3bb1-45c8-42e7-ae08-d39af1890952:
+    uuid: 7f0a3bb1-45c8-42e7-ae08-d39af1890952
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/image.style.thumbnail.yml b/config/sync/image.style.thumbnail.yml
index 1f2c21ff3..1d61e47f9 100644
--- a/config/sync/image.style.thumbnail.yml
+++ b/config/sync/image.style.thumbnail.yml
@@ -17,3 +17,9 @@ effects:
       width: 100
       height: 100
       crop_type: focal_point
+  0715213a-db62-426e-9c71-2e0b179af050:
+    uuid: 0715213a-db62-426e-9c71-2e0b179af050
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp
diff --git a/config/sync/webp.settings.yml b/config/sync/webp.settings.yml
deleted file mode 100644
index c7061c9a0..000000000
--- a/config/sync/webp.settings.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-_core:
-  default_config_hash: 0ube66wBYymHixNiMD-uyY8Tjo8alYV3NII6dv5iBJ8
-quality: 75
diff --git a/config/sync/wpf.settings.yml b/config/sync/wpf.settings.yml
new file mode 100644
index 000000000..8d92c59d4
--- /dev/null
+++ b/config/sync/wpf.settings.yml
@@ -0,0 +1,33 @@
+_core:
+  default_config_hash: Zz0MiEpGpRsSM81JunRrcLuDDV6mhBGcv-AJwlIzRdY
+quality: 75
+styles:
+  disabled:
+    card: 0
+    hero_lg_1x: 0
+    hero_lg_2x: 0
+    hero_md_1x: 0
+    hero_md_2x: 0
+    hero_mobile_1x: 0
+    hero_mobile_2x: 0
+    hero_sm_1x: 0
+    hero_sm_2x: 0
+    hero_xl_1x: 0
+    hero_xl_2x: 0
+    large: 0
+    media_entity_browser_thumbnail: 0
+    media_library: 0
+    medium: 0
+    prose_image: 0
+    prose_image_x2: 0
+    quote_lg_1x: 0
+    quote_lg_2x: 0
+    quote_md_1x: 0
+    quote_md_2x: 0
+    quote_mobile_1x: 0
+    quote_mobile_2x: 0
+    quote_sm_1x: 0
+    quote_sm_2x: 0
+    quote_xl_1x: 0
+    quote_xl_2x: 0
+    thumbnail: 0