From aea3bffa416514fcef5ef8ee5ea8b1ab64e9050a Mon Sep 17 00:00:00 2001 From: Brian DiChiara Date: Tue, 30 Jul 2024 15:00:02 -0500 Subject: [PATCH 1/6] [N/A] Modal Component WIP --- .../wp-starter/blocks/dialog/block.json | 41 +++++++++++++++ .../wp-starter/blocks/dialog/editor.css | 52 +++++++++++++++++++ .../wp-starter/blocks/dialog/render.php | 30 +++++++++++ .../themes/wp-starter/blocks/dialog/view.css | 46 ++++++++++++++++ .../themes/wp-starter/blocks/dialog/view.js | 32 ++++++++++++ .../wp-starter/blocks/dialog/x-render.twig | 7 +++ 6 files changed, 208 insertions(+) create mode 100644 wp-content/themes/wp-starter/blocks/dialog/block.json create mode 100644 wp-content/themes/wp-starter/blocks/dialog/editor.css create mode 100644 wp-content/themes/wp-starter/blocks/dialog/render.php create mode 100644 wp-content/themes/wp-starter/blocks/dialog/view.css create mode 100644 wp-content/themes/wp-starter/blocks/dialog/view.js create mode 100644 wp-content/themes/wp-starter/blocks/dialog/x-render.twig diff --git a/wp-content/themes/wp-starter/blocks/dialog/block.json b/wp-content/themes/wp-starter/blocks/dialog/block.json new file mode 100644 index 00000000..c1354520 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/block.json @@ -0,0 +1,41 @@ +{ + "name": "dialog", + "title": "Dialog", + "description": "Displays a Dialog/Modal Component.", + "icon": "cover-image", + "category": "components", + "textdomain": "wp-starter", + "keywords": ["popup", "overlay", "cta", "section", "dialog"], + "attributes": { + "align": { + "type": "string", + "default": "full" + } + }, + "supports": { + "jsx": true, + "mode": false, + "alignWide": true, + "color": { + "background": true + }, + "background": { + "backgroundImage": true, + "backgroundSize": true + }, + "layout": { + "default": { + "type": "constrained", + "justifyContent": "center" + }, + "allowOrientation": false, + "allowCustomContentAndWideSize": false + } + }, + "viewStyle": "file:./view.css", + "editorStyle": "file:./editor.css", + "viewScript": "file:./view.js", + "acf": { + "mode": "preview" + } +} diff --git a/wp-content/themes/wp-starter/blocks/dialog/editor.css b/wp-content/themes/wp-starter/blocks/dialog/editor.css new file mode 100644 index 00000000..ff7bf0f8 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/editor.css @@ -0,0 +1,52 @@ +.acf-block-dialog { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, 0); + width: 75vw; + max-height: 60vh; + display: none; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + z-index: 800; + overflow: auto; +} +.acf-block-dialog .inner { + padding: 1.5rem 2rem; + position: relative; +} +.acfbt-dialog-close { + position: absolute; + top: 0; + right: 0; + padding: 0.35rem 0.75rem; + cursor: pointer; + text-transform: uppercase; + font-size: 1rem; + display: flex; + gap: 0.25rem; +} +.acfbt-dialog-close::before { + content: '×'; + font-size: 1.5rem; + line-height: 0.85; + font-weight: lighter; +} +.acfbt-dialog-label { + display: block; + cursor: pointer; +} +.acfbt-dialog-checkbox { + position: absolute; + visibility: hidden; + width: 0; + height: 0; + overflow: hidden; + opacity: 0; +} +input:checked + label + .acf-block-dialog { + display: block; +} + +.is-root-container:has(.acf-block-dialog) { + position: relative; +} diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php new file mode 100644 index 00000000..a33f6eae --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/render.php @@ -0,0 +1,30 @@ + + + + + + +> + + + + +
+ + + + +
+ + + diff --git a/wp-content/themes/wp-starter/blocks/dialog/view.css b/wp-content/themes/wp-starter/blocks/dialog/view.css new file mode 100644 index 00000000..2f5a6b07 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/view.css @@ -0,0 +1,46 @@ +html:has(.acf-block-dialog[open]), +body:has(.acf-block-dialog[open]) { + overflow: hidden; +} + +.acf-block-dialog { + border-radius: 5px; + border: 0; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + z-index: 1000; + display: none; + margin: 0 !important; + padding: 0 !important; +} + +.acf-block-dialog::backdrop { + background: rgba(0, 0, 0, 0.4); + cursor: pointer; +} + +.acf-block-dialog[open], +.acf-block-dialog::backdrop { + animation: show 500ms ease; +} + +.acf-block-dialog[open] { + display: block; +} + +.acf-block-dialog > .inner { + padding: 50px; + display: flex; + flex-direction: column; +} + +@keyframes show { + 0% { + opacity: 0; + } +} + diff --git a/wp-content/themes/wp-starter/blocks/dialog/view.js b/wp-content/themes/wp-starter/blocks/dialog/view.js new file mode 100644 index 00000000..0f0273e8 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/view.js @@ -0,0 +1,32 @@ +// trigger dialog elements to open when adjacent button is clicked +const dialogButtons = document.querySelectorAll('dialog + button'); +dialogButtons.forEach(button => { + button.addEventListener('click', (e) => { + // set dialog to the previous sibling dialog element + const dialog = button.previousElementSibling; + if (!dialog || dialog.tagName.toLowerCase() !== 'dialog') { + return; + } + + e.preventDefault(); + e.stopPropagation(); + + dialog.showModal(); + }); +}); + +// close dialog when clicked outside of it +const dialogs = document.querySelectorAll('dialog'); +document.addEventListener('click', ({ target }) => { + dialogs.forEach(dialog => { + if ( !dialog.open ) { + return; + } + if (target === dialog || !dialog.contains(target)) { + dialog.close(); + } + }); +}); + + + diff --git a/wp-content/themes/wp-starter/blocks/dialog/x-render.twig b/wp-content/themes/wp-starter/blocks/dialog/x-render.twig new file mode 100644 index 00000000..c9ea10a0 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/x-render.twig @@ -0,0 +1,7 @@ +{# + Block: Dialog +#} + + + {{ inner_blocks() }} + From 3d38fd5626f2289a95d59f1778af8ef348e6d4a9 Mon Sep 17 00:00:00 2001 From: Nathan Schmidt <91974372+nathan-schmidt-viget@users.noreply.github.com> Date: Fri, 8 Nov 2024 08:58:27 -0700 Subject: [PATCH 2/6] [#148] Moving JS over to Alpine --- .../wp-starter/blocks/dialog/editor.css | 3 +- .../wp-starter/blocks/dialog/render.php | 47 +++++++++++-- .../themes/wp-starter/blocks/dialog/view.css | 66 ++++++++----------- 3 files changed, 72 insertions(+), 44 deletions(-) diff --git a/wp-content/themes/wp-starter/blocks/dialog/editor.css b/wp-content/themes/wp-starter/blocks/dialog/editor.css index ff7bf0f8..1d180c7b 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/editor.css +++ b/wp-content/themes/wp-starter/blocks/dialog/editor.css @@ -1,4 +1,4 @@ -.acf-block-dialog { +/* .acf-block-dialog { position: absolute; top: 0; left: 50%; @@ -50,3 +50,4 @@ input:checked + label + .acf-block-dialog { .is-root-container:has(.acf-block-dialog) { position: relative; } + diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php index a33f6eae..c126ded6 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/render.php +++ b/wp-content/themes/wp-starter/blocks/dialog/render.php @@ -14,9 +14,41 @@ -> +
+ x-data="{ + openDialog: false, + + // Close the dialog when the user clicks backdrop + handleDialogClick(event) { + (event.target === $refs.dialogRef) && this.handleDialogClose() + }, + + // Delay close to allow for animation + handleDialogClose() { + if (!this.openDialog) return + + this.openDialog = false + $refs.dialogRef.close() + } + }" + +> + + - + x-ref="dialogRef" + @keydown.escape.prevent="handleDialogClose()" + @click="handleDialogClick(event)" + +> + +
@@ -26,5 +58,12 @@
- - + +
diff --git a/wp-content/themes/wp-starter/blocks/dialog/view.css b/wp-content/themes/wp-starter/blocks/dialog/view.css index 2f5a6b07..4085eeab 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/view.css +++ b/wp-content/themes/wp-starter/blocks/dialog/view.css @@ -1,46 +1,34 @@ -html:has(.acf-block-dialog[open]), -body:has(.acf-block-dialog[open]) { - overflow: hidden; -} - -.acf-block-dialog { - border-radius: 5px; - border: 0; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: #fff; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - z-index: 1000; - display: none; - margin: 0 !important; - padding: 0 !important; -} +@layer components { + html:has(.acf-block-dialog[open]), + body:has(.acf-block-dialog[open]) { + overflow: hidden; + } -.acf-block-dialog::backdrop { - background: rgba(0, 0, 0, 0.4); - cursor: pointer; -} + .acf-block-dialog { + border-radius: 0; + border: none; + background: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } -.acf-block-dialog[open], -.acf-block-dialog::backdrop { - animation: show 500ms ease; -} + .acf-block-dialog::backdrop { + @apply bg-black/40; + } -.acf-block-dialog[open] { - display: block; -} + .acf-block-dialog[open], + .acf-block-dialog::backdrop { + animation: show 500ms ease; + } -.acf-block-dialog > .inner { - padding: 50px; - display: flex; - flex-direction: column; -} + .acf-block-dialog > .inner { + padding: 50px; + display: flex; + flex-direction: column; + } -@keyframes show { - 0% { - opacity: 0; + @keyframes show { + 0% { + opacity: 0; + } } } - From 9eda4eb53c726f276945078d03123fe58a08ffd8 Mon Sep 17 00:00:00 2001 From: Nathan Schmidt <91974372+nathan-schmidt-viget@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:16:14 -0700 Subject: [PATCH 3/6] [#148] Adding style and moving origonal style over to TW --- .../wp-starter/blocks/dialog/editor.css | 78 +++++++------------ .../wp-starter/blocks/dialog/render.php | 12 ++- .../themes/wp-starter/blocks/dialog/view.css | 33 +++----- 3 files changed, 46 insertions(+), 77 deletions(-) diff --git a/wp-content/themes/wp-starter/blocks/dialog/editor.css b/wp-content/themes/wp-starter/blocks/dialog/editor.css index 1d180c7b..2a603991 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/editor.css +++ b/wp-content/themes/wp-starter/blocks/dialog/editor.css @@ -1,53 +1,29 @@ -/* .acf-block-dialog { - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, 0); - width: 75vw; - max-height: 60vh; - display: none; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - z-index: 800; - overflow: auto; -} -.acf-block-dialog .inner { - padding: 1.5rem 2rem; - position: relative; -} -.acfbt-dialog-close { - position: absolute; - top: 0; - right: 0; - padding: 0.35rem 0.75rem; - cursor: pointer; - text-transform: uppercase; - font-size: 1rem; - display: flex; - gap: 0.25rem; -} -.acfbt-dialog-close::before { - content: '×'; - font-size: 1.5rem; - line-height: 0.85; - font-weight: lighter; -} -.acfbt-dialog-label { - display: block; - cursor: pointer; -} -.acfbt-dialog-checkbox { - position: absolute; - visibility: hidden; - width: 0; - height: 0; - overflow: hidden; - opacity: 0; -} -input:checked + label + .acf-block-dialog { - display: block; -} +@layer components { + .acf-block-dialog { + @apply relative !border !border-black; + .inner { + @apply relative p-24; + } -.is-root-container:has(.acf-block-dialog) { - position: relative; -} + .acfbt-dialog-close { + @apply absolute right-12 top-12 z-50 m-auto size-32 cursor-pointer border border-none border-black bg-transparent hover:bg-black; + @apply after:flex after:items-center after:justify-center after:text-black after:content-['\2715'] hover:after:text-white; + } + } + + .acfbt-dialog-label { + @apply block cursor-pointer; + } + .acfbt-dialog-checkbox { + @apply sr-only; + } + + input:checked + label + div .acf-block-dialog { + @apply block w-2/3; + } + + .is-root-container:has(.acf-block-dialog) { + @apply relative; + } +} diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php index c126ded6..8a13598b 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/render.php +++ b/wp-content/themes/wp-starter/blocks/dialog/render.php @@ -8,10 +8,11 @@ */ $cbx_id = uniqid(); + ?> - +
- +
+ + {% endif %} + +
+ {% if function('is_admin') == true %} + + {% endif %} + {{ inner_blocks() }} +
+ + + + diff --git a/wp-content/themes/wp-starter/blocks/dialog/view.js b/wp-content/themes/wp-starter/blocks/dialog/view.js deleted file mode 100644 index 0f0273e8..00000000 --- a/wp-content/themes/wp-starter/blocks/dialog/view.js +++ /dev/null @@ -1,32 +0,0 @@ -// trigger dialog elements to open when adjacent button is clicked -const dialogButtons = document.querySelectorAll('dialog + button'); -dialogButtons.forEach(button => { - button.addEventListener('click', (e) => { - // set dialog to the previous sibling dialog element - const dialog = button.previousElementSibling; - if (!dialog || dialog.tagName.toLowerCase() !== 'dialog') { - return; - } - - e.preventDefault(); - e.stopPropagation(); - - dialog.showModal(); - }); -}); - -// close dialog when clicked outside of it -const dialogs = document.querySelectorAll('dialog'); -document.addEventListener('click', ({ target }) => { - dialogs.forEach(dialog => { - if ( !dialog.open ) { - return; - } - if (target === dialog || !dialog.contains(target)) { - dialog.close(); - } - }); -}); - - - diff --git a/wp-content/themes/wp-starter/blocks/dialog/x-render.twig b/wp-content/themes/wp-starter/blocks/dialog/x-render.twig deleted file mode 100644 index c9ea10a0..00000000 --- a/wp-content/themes/wp-starter/blocks/dialog/x-render.twig +++ /dev/null @@ -1,7 +0,0 @@ -{# - Block: Dialog -#} - - - {{ inner_blocks() }} - From 6e7f815d6cc3ccbb8fb9a51235b4145c364b104c Mon Sep 17 00:00:00 2001 From: Nathan Schmidt <91974372+nathan-schmidt-viget@users.noreply.github.com> Date: Fri, 8 Nov 2024 15:03:00 -0700 Subject: [PATCH 5/6] [#148] Adding ACF custom feild --- .../blocks/dialog/group_672e7d812d248.json | 54 +++++++++++++++++++ .../wp-starter/blocks/dialog/render.php | 6 +-- .../wp-starter/blocks/dialog/render.twig | 3 +- 3 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json diff --git a/wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json b/wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json new file mode 100644 index 00000000..5a2b1540 --- /dev/null +++ b/wp-content/themes/wp-starter/blocks/dialog/group_672e7d812d248.json @@ -0,0 +1,54 @@ +{ + "key": "group_672e7d812d248", + "title": "Dialog Block", + "fields": [ + { + "key": "field_672e7d81d71ee", + "label": "Button Text", + "name": "button_text", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "Open", + "maxlength": "", + "allow_in_bindings": 0, + "placeholder": "", + "prepend": "", + "append": "", + "show_in_graphql": 1, + "graphql_description": "", + "graphql_field_name": "buttonText", + "graphql_non_null": 0 + } + ], + "location": [ + [ + { + "param": "block", + "operator": "==", + "value": "acf\/dialog" + } + ] + ], + "menu_order": 0, + "position": "normal", + "style": "default", + "label_placement": "top", + "instruction_placement": "label", + "hide_on_screen": "", + "active": true, + "description": "", + "show_in_rest": 0, + "show_in_graphql": 1, + "graphql_field_name": "dialogBlock", + "map_graphql_types_from_location_rules": 0, + "graphql_types": "", + "modified": 1731100092 +} diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php index 8a13598b..0d001071 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/render.php +++ b/wp-content/themes/wp-starter/blocks/dialog/render.php @@ -7,8 +7,8 @@ * @package WPStarter */ -$cbx_id = uniqid(); - +$cbx_id = uniqid(); +$button_text = get_field( 'button_text' ); ?> @@ -68,6 +68,6 @@ class="btn-default" @click="$refs.dialogRef.showModal(), openDialog = true" > - + diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.twig b/wp-content/themes/wp-starter/blocks/dialog/render.twig index 85392d3e..c6c9b0d5 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/render.twig +++ b/wp-content/themes/wp-starter/blocks/dialog/render.twig @@ -3,6 +3,7 @@ #} {% set cbx_id = 'dialog-' ~ random() %} +{% set button_text = block.data['button_text'] %} {% if function('is_admin') == true %} @@ -62,6 +63,6 @@ @click="$refs.dialogRef.showModal(), openDialog = true" {% endif %} > - Open + {{ button_text ? button_text : 'Open' }} From fb653d71096541f44b5ef720185b8bf46571d7d0 Mon Sep 17 00:00:00 2001 From: Nathan Schmidt <91974372+nathan-schmidt-viget@users.noreply.github.com> Date: Mon, 11 Nov 2024 06:30:22 -0700 Subject: [PATCH 6/6] [#148] Fixing some small bugs --- .../wp-starter/blocks/dialog/block.json | 2 +- .../wp-starter/blocks/dialog/editor.css | 2 +- .../wp-starter/blocks/dialog/render.php | 64 +++++++++---------- .../wp-starter/blocks/dialog/render.twig | 1 + 4 files changed, 35 insertions(+), 34 deletions(-) diff --git a/wp-content/themes/wp-starter/blocks/dialog/block.json b/wp-content/themes/wp-starter/blocks/dialog/block.json index 0c9a6416..e3198f40 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/block.json +++ b/wp-content/themes/wp-starter/blocks/dialog/block.json @@ -9,7 +9,7 @@ "attributes": { "align": { "type": "string", - "default": "full" + "default": "wide" } }, "supports": { diff --git a/wp-content/themes/wp-starter/blocks/dialog/editor.css b/wp-content/themes/wp-starter/blocks/dialog/editor.css index 2a603991..f4dca1c2 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/editor.css +++ b/wp-content/themes/wp-starter/blocks/dialog/editor.css @@ -12,7 +12,7 @@ } .acfbt-dialog-label { - @apply block cursor-pointer; + @apply mb-24 block cursor-pointer; } .acfbt-dialog-checkbox { diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.php b/wp-content/themes/wp-starter/blocks/dialog/render.php index 0d001071..f0d1ddc0 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/render.php +++ b/wp-content/themes/wp-starter/blocks/dialog/render.php @@ -35,39 +35,39 @@ > - - - x-ref="dialogRef" - @keydown.escape.prevent="handleDialogClose()" - @click="handleDialogClick(event)" - -> - - - - -
- -
- - +
+ + + + +
+ + + diff --git a/wp-content/themes/wp-starter/blocks/dialog/render.twig b/wp-content/themes/wp-starter/blocks/dialog/render.twig index c6c9b0d5..3ce5f580 100644 --- a/wp-content/themes/wp-starter/blocks/dialog/render.twig +++ b/wp-content/themes/wp-starter/blocks/dialog/render.twig @@ -57,6 +57,7 @@ +