keith/VDI-Starter
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Add field for ARIA label in button block

Browse Source
This commit is contained in:
Keith Solomon
2025-11-25 08:50:39 -06:00
parent f086c17d26
commit a1d2b59919
3 changed files with 133 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
acf/group_5f7f85a2a3e13.json
View File

@@ -26,7 +26,8 @@
"other_choice": 0, "other_choice": 0,
"allow_in_bindings": 0, "allow_in_bindings": 0,
"layout": "horizontal", "layout": "horizontal",
"save_other_choice": 0 "save_other_choice": 0,
"wpml_cf_preferences": 1
}, },
{ {
"key": "field_5f7f85a71151d", "key": "field_5f7f85a71151d",
@@ -42,7 +43,8 @@
"class": "", "class": "",
"id": "" "id": ""
}, },
"return_format": "array" "return_format": "array",
"wpml_cf_preferences": 1
}, },
{ {
"key": "field_5f7f85bd1151e", "key": "field_5f7f85bd1151e",
@@ -71,7 +73,10 @@
"allow_in_bindings": 1, "allow_in_bindings": 1,
"ui": 0, "ui": 0,
"ajax": 0, "ajax": 0,
"placeholder": "" "placeholder": "",
"create_options": 0,
"save_options": 0,
"wpml_cf_preferences": 1
}, },
{ {
"key": "field_5f7f85e41151f", "key": "field_5f7f85e41151f",
@@ -97,7 +102,10 @@
"ui": 0, "ui": 0,
"return_format": "value", "return_format": "value",
"ajax": 0, "ajax": 0,
"placeholder": "" "placeholder": "",
"create_options": 0,
"save_options": 0,
"wpml_cf_preferences": 1
}, },
{ {
"key": "field_5f807a47dd2a8", "key": "field_5f807a47dd2a8",
@@ -125,7 +133,10 @@
"allow_in_bindings": 1, "allow_in_bindings": 1,
"ui": 0, "ui": 0,
"ajax": 0, "ajax": 0,
"placeholder": "" "placeholder": "",
"create_options": 0,
"save_options": 0,
"wpml_cf_preferences": 1
}, },
{ {
"key": "field_605924972a98a", "key": "field_605924972a98a",
@@ -154,7 +165,32 @@
"allow_in_bindings": 1, "allow_in_bindings": 1,
"ui": 0, "ui": 0,
"ajax": 0, "ajax": 0,
"placeholder": "" "placeholder": "",
"create_options": 0,
"save_options": 0,
"wpml_cf_preferences": 1
},
{
"key": "field_6924c83e85da9",
"label": "ARIA Label",
"name": "aria_label",
"aria-label": "",
"type": "text",
"instructions": "Used to give the link an accessible name if using \"Read more\" as the title",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"wpml_cf_preferences": 0,
"default_value": "",
"maxlength": "",
"allow_in_bindings": 0,
"placeholder": "",
"prepend": "",
"append": ""
} }
], ],
"location": [ "location": [
@@ -175,5 +211,7 @@
"active": true, "active": true,
"description": "", "description": "",
"show_in_rest": 0, "show_in_rest": 0,
"modified": 1742236256 "display_title": "",
"acfml_field_group_mode": "translation",
"modified": 1764018311
} }

143
static/js/components/button.js
View File

@@ -1,76 +1,99 @@
class ButtonComponent extends HTMLElement { class ButtonComponent extends HTMLElement {
/** /**
* Parameters * Parameters
* - btnClasses: Additional classes to add to the block. * - btnClasses: Additional classes to add to the block.
* - element: The element to use for the button. Defaults to 'a'. * - element: The element to use for the button. Defaults to 'a'.
* - url: The URL to link to. * - url: The URL to link to.
* - target: The target for the link. * - target: The target for the link.
* - title: The text to display on the button. * - title: The text to display on the button.
* - color: The color of the button. * - ariaLabel: The ARIA label for the button.
* - variant: The variant of the button. * - color: The color of the button.
* - size: The size of the button. * - variant: The variant of the button.
* - width: The width of the button. * - size: The size of the button.
* * - width: The width of the button.
*/ *
*/
connectedCallback() { connectedCallback() {
if (!this.querySelector(this.getAttribute('element'))) { if (!this.querySelector(this.getAttribute('element'))) {
this.append(document.createElement(this.getAttribute('element'))); this.append(document.createElement(this.getAttribute('element')));
} }
this.update(); this.update();
} }
static get observedAttributes() { static get observedAttributes() {
return [ return [
'btnClasses', 'btnClasses',
'el', 'el',
'element', 'element',
'type', 'type',
'url', 'url',
'target', 'target',
'title', 'title',
'color', 'ariaLabel',
'variant', 'color',
'size', 'variant',
'width', 'size',
] 'width',
} ]
}
attributeChangedCallback() { attributeChangedCallback() {
this.update(); this.update();
} }
update() { update() {
const btn = this.querySelector(this.getAttribute('element')); const btn = this.querySelector(this.getAttribute('element'));
if (btn) { // console.log('[ButtonComponent] attributes', {
btn.classList = this.getAttribute('btnClasses') || ''; // btnClasses: this.getAttribute('btnClasses'),
// element: this.getAttribute('element'),
// type: this.getAttribute('type'),
// url: this.getAttribute('url'),
// target: this.getAttribute('target'),
// title: this.getAttribute('title'),
// ariaLabel: this.getAttribute('ariaLabel'),
// color: this.getAttribute('color'),
// variant: this.getAttribute('variant'),
// size: this.getAttribute('size'),
// width: this.getAttribute('width'),
// });
if (this.getAttribute('element') == 'a') { if (btn) {
btn.href = this.getAttribute('url') || '#'; btn.classList = this.getAttribute('btnClasses') || '';
if (btn.target) { if (this.getAttribute('element') == 'a') {
btn.target = 'target="${this.getAttribute(target)}"'; btn.href = this.getAttribute('url') || '#';
}
}
const type = this.getAttribute('type'); if (btn.target) {
if (type && this.getAttribute('element') !== 'a') { btn.target = 'target="${this.getAttribute(target)}"';
btn.type = type; }
} }
btn.title = this.getAttribute('title') || ''; const type = this.getAttribute('type');
btn.textContent = this.getAttribute('title') || ''; if (type && this.getAttribute('element') !== 'a') {
btn.type = type;
}
btn.setAttribute('data-button-color', this.getAttribute('color')); btn.title = this.getAttribute('title') || '';
btn.setAttribute('data-button-variant', this.getAttribute('variant')); btn.textContent = this.getAttribute('title') || '';
btn.setAttribute('data-button-size', this.getAttribute('size'));
btn.setAttribute('data-button-width', this.getAttribute('width')); if (!this.getAttribute('ariaLabel') && this.getAttribute('url')) {
} btn.setAttribute('aria-label', `Link to ${this.getAttribute('url')}`);
} } else {
btn.setAttribute('aria-label', this.getAttribute('ariaLabel'));
}
btn.setAttribute('aria-label', this.getAttribute('ariaLabel'));
btn.setAttribute('data-button-color', this.getAttribute('color'));
btn.setAttribute('data-button-variant', this.getAttribute('variant'));
btn.setAttribute('data-button-size', this.getAttribute('size'));
btn.setAttribute('data-button-width', this.getAttribute('width'));
}
}
} }
export const registerButtonComponent = () => { export const registerButtonComponent = () => {
customElements.define('x-button', ButtonComponent); customElements.define('x-button', ButtonComponent);
} }

8
views/blocks/button/button.php
View File

@@ -10,9 +10,10 @@ namespace BasicWP;
// Retrieve ACF fields // Retrieve ACF fields
$element = get_field( 'element' ) ? get_field( 'element' ) : 'a'; $element = get_field( 'element' ) ? get_field( 'element' ) : 'a';
$btnLink = get_field( 'link' ); $btnLink = get_field( 'link' );
$url = $btnLink['url'] ? $btnLink['url'] : ''; $url = isset( $btnLink['url'] ) ? $btnLink['url'] : '';
$target = $btnLink['target'] ? $btnLink['target'] : ''; $target = isset( $btnLink['target'] ) ? $btnLink['target'] : '';
$btnTitle = $btnLink['title'] ? $btnLink['title'] : 'Button'; $btnTitle = isset( $btnLink['title'] ) ? $btnLink['title'] : 'Button';
$btnAria = get_field( 'aria_label' ) ? get_field( 'aria_label' ) : '';
$color = get_field( 'color' ); $color = get_field( 'color' );
$variant = get_field( 'variant' ); $variant = get_field( 'variant' );
$size = get_field( 'size' ); $size = get_field( 'size' );
@@ -44,6 +45,7 @@ if ( ! $is_preview ) {
url="<?php echo esc_url( $url ); ?>" url="<?php echo esc_url( $url ); ?>"
target="<?php echo esc_attr( $target ); ?>" target="<?php echo esc_attr( $target ); ?>"
title="<?php echo esc_attr( $btnTitle ); ?>" title="<?php echo esc_attr( $btnTitle ); ?>"
ariaLabel="<?php echo esc_attr( $btnAria ); ?>"
color="<?php echo esc_attr( $color ); ?>" color="<?php echo esc_attr( $color ); ?>"
variant="<?php echo esc_attr( $variant ); ?>" variant="<?php echo esc_attr( $variant ); ?>"
size="<?php echo esc_attr( $size ); ?>" size="<?php echo esc_attr( $size ); ?>"