From 4261141b899f6290808b197c5da127f1337a6cfb Mon Sep 17 00:00:00 2001
From: Elias Lackner <lackner.elias@gmail.com>
Date: Mon, 18 Mar 2024 21:21:00 +0100
Subject: [PATCH] NEXT-34491 - NEXT-14691 - Add pseudo modal twig blocks fixes
 #3567

---
 ...2024-03-18-add-pseudo-modal-twig-blocks.md | 17 +++++
 .../component/pseudo-modal.html.twig          | 76 +++++++++++--------
 2 files changed, 63 insertions(+), 30 deletions(-)
 create mode 100644 changelog/_unreleased/2024-03-18-add-pseudo-modal-twig-blocks.md

diff --git a/changelog/_unreleased/2024-03-18-add-pseudo-modal-twig-blocks.md b/changelog/_unreleased/2024-03-18-add-pseudo-modal-twig-blocks.md
new file mode 100644
index 00000000000..101adb0485a
--- /dev/null
+++ b/changelog/_unreleased/2024-03-18-add-pseudo-modal-twig-blocks.md
@@ -0,0 +1,17 @@
+---
+title: Add pseudo modal twig blocks
+issue: NEXT-14691
+author: Elias Lackner
+author_email: lackner.elias@gmail.com
+author_github: @lacknere
+---
+# Storefront
+* Added new blocks to `pseudo-modal.html.twig`:
+    - `component_pseudo_modal`
+    - `component_pseudo_modal_header`
+    - `component_pseudo_modal_title`
+    - `component_pseudo_modal_close_btn`
+    - `component_pseudo_modal_close_btn_content`
+    - `component_pseudo_modal_body`
+    - `component_pseudo_modal_back_btn_content`
+* Deprecated block `product_detail_zoom_modal_close_button_content` in `pseudo-modal.html.twig`. Use block `component_pseudo_modal_close_btn_content` instead.
diff --git a/src/Storefront/Resources/views/storefront/component/pseudo-modal.html.twig b/src/Storefront/Resources/views/storefront/component/pseudo-modal.html.twig
index cd08c30323e..fb7cf61b49f 100644
--- a/src/Storefront/Resources/views/storefront/component/pseudo-modal.html.twig
+++ b/src/Storefront/Resources/views/storefront/component/pseudo-modal.html.twig
@@ -1,35 +1,51 @@
-<div class="js-pseudo-modal-template">
-    <div class="modal modal-lg fade"
-         tabindex="-1"
-         role="dialog">
-        <div class="modal-dialog"
-             role="document">
-            <div class="modal-content">
-                <div class="modal-header only-close">
-                    <div class="modal-title js-pseudo-modal-template-title-element h5"></div>
+{% block component_pseudo_modal %}
+    <div class="js-pseudo-modal-template">
+        <div class="modal modal-lg fade"
+             tabindex="-1"
+             role="dialog">
+            <div class="modal-dialog"
+                 role="document">
+                <div class="modal-content">
+                    {% block component_pseudo_modal_header %}
+                        <div class="modal-header only-close">
+                            {% block component_pseudo_modal_title %}
+                                <div class="modal-title js-pseudo-modal-template-title-element h5"></div>
+                            {% endblock %}
 
-                    <button type="button"
-                            class="btn-close close"
-                            data-bs-dismiss="modal"
-                            aria-label="Close">
-                        {% block product_detail_zoom_modal_close_button_content %}
-                        {% endblock %}
-                    </button>
-                </div>
-                <div class="modal-body js-pseudo-modal-template-content-element">
+                            {% block component_pseudo_modal_close_btn %}
+                                <button type="button"
+                                        class="btn-close close"
+                                        data-bs-dismiss="modal"
+                                        aria-label="Close">
+                                    {% block component_pseudo_modal_close_btn_content %}
+                                        {# @deprecated tag:v6.7.0 - Block will be removed. Use `component_pseudo_modal_close_btn_content` instead. #}
+                                        {% block product_detail_zoom_modal_close_button_content %}{% endblock %}
+                                    {% endblock %}
+                                </button>
+                            {% endblock %}
+                        </div>
+                    {% endblock %}
+
+                    {% block component_pseudo_modal_body %}
+                        <div class="modal-body js-pseudo-modal-template-content-element">
+                        </div>
+                    {% endblock %}
                 </div>
             </div>
-        </div>
-        <template class="js-pseudo-modal-back-btn-template">
-            {# Back button will be rendered by `AjaxModalPlugin` if a `data-prev-url` is given in order to toggle between modals. #}
 
-            {# Attributes `data-url` and `href` will be set automatically by `AjaxModalPlugin`. #}
-            {% block component_pseudo_modal_back_btn %}
-                <button class="js-pseudo-modal-back-btn btn btn-outline-primary" data-ajax-modal="true" data-url="#" href="#">
-                    {% sw_icon 'arrow-left' style { size: 'sm', class: 'me-1' } %}
-                    {{ 'general.back'|trans }}
-                </button>
-            {% endblock %}
-        </template>
+            <template class="js-pseudo-modal-back-btn-template">
+                {# Back button will be rendered by `AjaxModalPlugin` if a `data-prev-url` is given in order to toggle between modals. #}
+
+                {# Attributes `data-url` and `href` will be set automatically by `AjaxModalPlugin`. #}
+                {% block component_pseudo_modal_back_btn %}
+                    <button class="js-pseudo-modal-back-btn btn btn-outline-primary" data-ajax-modal="true" data-url="#" href="#">
+                        {% block component_pseudo_modal_back_btn_content %}
+                            {% sw_icon 'arrow-left' style { size: 'sm', class: 'me-1' } %}
+                            {{ 'general.back'|trans }}
+                        {% endblock %}
+                    </button>
+                {% endblock %}
+            </template>
+        </div>
     </div>
-</div>
+{% endblock %}