[#148] Dialog block #162
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| { | ||
| "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", | ||
| "acf": { | ||
| "mode": "preview" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| @layer components { | ||
| .acf-block-dialog { | ||
| @apply relative !border !border-black; | ||
| .inner { | ||
| @apply relative p-24; | ||
| } | ||
|
|
||
| .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; | ||
| } | ||
| } |
|
There was a problem hiding this comment. Not sure if we could add a ACF field or if there is another way to do it. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } |
|
There was a problem hiding this comment. All the alpine.js is from blueprint. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| <?php | ||
| /** | ||
| * Block: Dialog | ||
| * | ||
| * @global array $block | ||
| * | ||
| * @package WPStarter | ||
| */ | ||
|
|
||
| $cbx_id = uniqid(); | ||
| $button_text = get_field( 'button_text' ); | ||
| ?> | ||
| <?php if ( is_admin() ) : ?> | ||
| <input type="checkbox" id="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-checkbox"> | ||
| <label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-label"><?php esc_html_e( 'Toggle Dialog', 'wp-site-starter' ); ?></label> | ||
| <?php endif; ?> | ||
|
|
||
| <div | ||
| <?php if ( ! is_admin() ) : ?> | ||
| 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() | ||
| } | ||
| }" | ||
| <?php endif; ?> | ||
| > | ||
|
|
||
| <dialog | ||
| <?php block_attrs( $block ); ?> | ||
| <?php if ( ! is_admin() ) : ?> | ||
| x-ref="dialogRef" | ||
| @keydown.escape.prevent="handleDialogClose()" | ||
| @click="handleDialogClick(event)" | ||
| <?php endif; ?> | ||
| > | ||
| <?php if ( ! is_admin() ) : ?> | ||
| <button | ||
| class="acf-dialog-close" | ||
| @click="handleDialogClose()" | ||
| > | ||
| <span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span> | ||
| </button> | ||
| <?php endif; ?> | ||
|
|
||
| <div class="inner"> | ||
| <?php if ( is_admin() ) : ?> | ||
| <label for="<?php echo esc_attr( $cbx_id ); ?>" class="acfbt-dialog-close"> | ||
| <span class="sr-only"><?php esc_html_e( 'Close', 'wp-site-starter' ); ?></span> | ||
| </label> | ||
| <?php endif; ?> | ||
| <?php inner_blocks(); ?> | ||
| </div> | ||
| </dialog> | ||
|
|
||
| <button | ||
| class="btn-default" | ||
| <?php if ( ! is_admin() ) : ?> | ||
| @click="$refs.dialogRef.showModal(), openDialog = true" | ||
| <?php endif; ?> | ||
| > | ||
| <?php esc_html_e( $button_text ? $button_text : 'Open', 'wp-site-starter' ); ?> | ||
| </button> | ||
| </div> |
|
There was a problem hiding this comment. Cursor did all the heavy lifting of moving its from PHP to Twig. 🎉 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| {# | ||
| Block: Dialog | ||
| #} | ||
|
|
||
| {% set cbx_id = 'dialog-' ~ random() %} | ||
| {% set button_text = block.data['button_text'] %} | ||
|
|
||
| {% if function('is_admin') == true %} | ||
| <input type="checkbox" id="{{ cbx_id }}" class="acfbt-dialog-checkbox"> | ||
| <label for="{{ cbx_id }}" class="acfbt-dialog-label">Toggle Dialog</label> | ||
| {% endif %} | ||
|
|
||
| <div | ||
| {% if function('is_admin') == false %} | ||
| 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() | ||
| } | ||
| }" | ||
| {% endif %} | ||
| > | ||
|
|
||
| <dialog | ||
| {{ block_attrs( block ) }} | ||
| {% if function('is_admin') == false %} | ||
| x-ref="dialogRef" | ||
| @keydown.escape.prevent="handleDialogClose()" | ||
| @click="handleDialogClick(event)" | ||
| {% endif %} | ||
| > | ||
| {% if function('is_admin') == false %} | ||
| <button | ||
| class="acf-dialog-close" | ||
| @click="handleDialogClose()" | ||
| > | ||
| <span class="sr-only">Close</span> | ||
| </button> | ||
| {% endif %} | ||
|
|
||
| <div class="inner"> | ||
| {% if function('is_admin') == true %} | ||
| <label for="{{ cbx_id }}" class="acfbt-dialog-close"> | ||
| <span class="sr-only">Close</span> | ||
| </label> | ||
| {% endif %} | ||
| {{ inner_blocks() }} | ||
| </div> | ||
| </dialog> | ||
|
|
||
| <button | ||
| class="btn-default" | ||
| {% if function('is_admin') == false %} | ||
| @click="$refs.dialogRef.showModal(), openDialog = true" | ||
| {% endif %} | ||
| > | ||
| {{ button_text ? button_text : 'Open' }} | ||
| </button> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| @layer components { | ||
| html:has(.acf-block-dialog[open]), | ||
| body:has(.acf-block-dialog[open]) { | ||
| @apply overflow-hidden; | ||
| } | ||
|
|
||
| .acf-block-dialog { | ||
| @apply bottom-0 left-0 right-0 top-0 !m-auto h-1/2 w-1/2 rounded border-none bg-white; | ||
|
|
||
| &::backdrop { | ||
| @apply bg-black/70; | ||
| } | ||
|
|
||
| .acf-dialog-close { | ||
| @apply absolute right-12 top-12 z-10 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; | ||
| } | ||
|
|
||
| > .inner { | ||
| @apply flex flex-col p-24; | ||
| } | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is really nice to have style for both!!