From 968e3de5682a0be68a001428485e350af9e2e65e Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Fri, 3 Apr 2026 20:31:57 -0400 Subject: [PATCH 1/2] remove sidebar when no issues are present --- build/validation-api.asset.php | 2 +- build/validation-api.js | 462 +++++++++++---------- src/editor/components/ValidationSidebar.js | 11 +- 3 files changed, 244 insertions(+), 231 deletions(-) diff --git a/build/validation-api.asset.php b/build/validation-api.asset.php index 77b4f28..b8cf89e 100644 --- a/build/validation-api.asset.php +++ b/build/validation-api.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => '43cbf655a56a72fccc0b'); + array('react-jsx-runtime', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => '51a9292fbee92ed5bd5f'); diff --git a/build/validation-api.js b/build/validation-api.js index ee38492..3a7686e 100644 --- a/build/validation-api.js +++ b/build/validation-api.js @@ -880,263 +880,273 @@ o.current && clearTimeout(o.current); }; }, []), - React.createElement( - W.PluginSidebar, - { - name: 'validation-sidebar', - title: (0, Z.__)('Validation', 'validation-api'), - icon: w, - className: 'validation-api-validation-sidebar', - }, - y > 0 && - React.createElement( - F.PanelBody, + 0 === y && 0 === b + ? null + : React.createElement( + W.PluginSidebar, { - title: (0, Z.sprintf)( - /* translators: %d: number of errors */ /* translators: %d: number of errors */ - (0, Z.__)('Errors (%d)', 'validation-api'), - y - ), - initialOpen: !0, - className: 'validation-api-errors-panel', + name: 'validation-sidebar', + title: (0, Z.__)('Validation', 'validation-api'), + icon: w, + className: 'validation-api-validation-sidebar', }, - s.length > 0 && + y > 0 && React.createElement( - F.PanelRow, - null, - React.createElement( - 'div', - { className: 'validation-api-error-group' }, + F.PanelBody, + { + title: (0, Z.sprintf)( + /* translators: %d: number of errors */ /* translators: %d: number of errors */ + (0, Z.__)('Errors (%d)', 'validation-api'), + y + ), + initialOpen: !0, + className: 'validation-api-errors-panel', + }, + s.length > 0 && React.createElement( - 'p', - { className: 'validation-api-error-subheading' }, + F.PanelRow, + null, React.createElement( - 'strong', - null, - React.createElement('span', { - className: 'validation-api-indicator-circle', - }), - (0, Z.__)('Block Errors', 'validation-api') + 'div', + { className: 'validation-api-error-group' }, + React.createElement( + 'p', + { className: 'validation-api-error-subheading' }, + React.createElement( + 'strong', + null, + React.createElement('span', { + className: + 'validation-api-indicator-circle', + }), + (0, Z.__)('Block Errors', 'validation-api') + ) + ), + React.createElement( + 'ul', + { className: 'validation-api-error-list' }, + s.map(function (e, t) { + var r = e.clientIds.length, + n = r > 1 ? ' (x'.concat(r, ')') : ''; + return React.createElement( + 'li', + { key: 'block-error-'.concat(t) }, + React.createElement( + 'button', + { + type: 'button', + className: + 'validation-api-issue-link', + onClick: function () { + return h(e.clientIds[0]); + }, + }, + e.blockName + ), + ': ', + e.message, + n + ); + }) + ) ) ), + m.length > 0 && React.createElement( - 'ul', - { className: 'validation-api-error-list' }, - s.map(function (e, t) { - var r = e.clientIds.length, - n = r > 1 ? ' (x'.concat(r, ')') : ''; - return React.createElement( - 'li', - { key: 'block-error-'.concat(t) }, - React.createElement( - 'button', - { - type: 'button', - className: 'validation-api-issue-link', - onClick: function () { - return h(e.clientIds[0]); - }, - }, - e.blockName - ), - ': ', - e.message, - n - ); - }) - ) - ) - ), - m.length > 0 && - React.createElement( - F.PanelRow, - null, - React.createElement( - 'div', - { className: 'validation-api-error-group' }, - React.createElement( - 'p', - { className: 'validation-api-error-subheading' }, + F.PanelRow, + null, React.createElement( - 'strong', - null, - React.createElement('span', { - className: 'validation-api-indicator-circle', - }), - (0, Z.__)('Meta Errors', 'validation-api') + 'div', + { className: 'validation-api-error-group' }, + React.createElement( + 'p', + { className: 'validation-api-error-subheading' }, + React.createElement( + 'strong', + null, + React.createElement('span', { + className: + 'validation-api-indicator-circle', + }), + (0, Z.__)('Meta Errors', 'validation-api') + ) + ), + React.createElement( + 'ul', + { className: 'validation-api-error-list' }, + m.map(function (e, t) { + return React.createElement( + 'li', + { key: 'meta-error-'.concat(t) }, + e.message + ); + }) + ) ) ), + p.length > 0 && React.createElement( - 'ul', - { className: 'validation-api-error-list' }, - m.map(function (e, t) { - return React.createElement( - 'li', - { key: 'meta-error-'.concat(t) }, - e.message - ); - }) - ) - ) - ), - p.length > 0 && - React.createElement( - F.PanelRow, - null, - React.createElement( - 'div', - { className: 'validation-api-error-group' }, - React.createElement( - 'p', - { className: 'validation-api-error-subheading' }, + F.PanelRow, + null, React.createElement( - 'strong', - null, - React.createElement('span', { - className: 'validation-api-indicator-circle', - }), - (0, Z.__)('Editor Errors', 'validation-api') + 'div', + { className: 'validation-api-error-group' }, + React.createElement( + 'p', + { className: 'validation-api-error-subheading' }, + React.createElement( + 'strong', + null, + React.createElement('span', { + className: + 'validation-api-indicator-circle', + }), + (0, Z.__)('Editor Errors', 'validation-api') + ) + ), + React.createElement( + 'ul', + { className: 'validation-api-error-list' }, + p.map(function (e, t) { + return React.createElement( + 'li', + { key: 'editor-error-'.concat(t) }, + e.message + ); + }) + ) ) - ), - React.createElement( - 'ul', - { className: 'validation-api-error-list' }, - p.map(function (e, t) { - return React.createElement( - 'li', - { key: 'editor-error-'.concat(t) }, - e.message - ); - }) ) - ) - ) - ), - b > 0 && - React.createElement( - F.PanelBody, - { - title: (0, Z.sprintf)( - /* translators: %d: number of warnings */ /* translators: %d: number of warnings */ - (0, Z.__)('Warnings (%d)', 'validation-api'), - b ), - initialOpen: !0, - className: 'validation-api-warnings-panel', - }, - d.length > 0 && + b > 0 && React.createElement( - F.PanelRow, - null, - React.createElement( - 'div', - { className: 'validation-api-warning-group' }, + F.PanelBody, + { + title: (0, Z.sprintf)( + /* translators: %d: number of warnings */ /* translators: %d: number of warnings */ + (0, Z.__)('Warnings (%d)', 'validation-api'), + b + ), + initialOpen: !0, + className: 'validation-api-warnings-panel', + }, + d.length > 0 && React.createElement( - 'p', - { className: 'validation-api-warning-subheading' }, + F.PanelRow, + null, React.createElement( - 'strong', - null, - React.createElement('span', { - className: 'validation-api-indicator-circle', - }), - (0, Z.__)('Block Warnings', 'validation-api') + 'div', + { className: 'validation-api-warning-group' }, + React.createElement( + 'p', + { className: 'validation-api-warning-subheading' }, + React.createElement( + 'strong', + null, + React.createElement('span', { + className: + 'validation-api-indicator-circle', + }), + (0, Z.__)('Block Warnings', 'validation-api') + ) + ), + React.createElement( + 'ul', + { className: 'validation-api-warning-list' }, + d.map(function (e, t) { + var r = e.clientIds.length, + n = r > 1 ? ' (x'.concat(r, ')') : ''; + return React.createElement( + 'li', + { key: 'block-warning-'.concat(t) }, + React.createElement( + 'button', + { + type: 'button', + className: + 'validation-api-issue-link', + onClick: function () { + return h(e.clientIds[0]); + }, + }, + e.blockName + ), + ': ', + e.message, + n + ); + }) + ) ) ), + f.length > 0 && React.createElement( - 'ul', - { className: 'validation-api-warning-list' }, - d.map(function (e, t) { - var r = e.clientIds.length, - n = r > 1 ? ' (x'.concat(r, ')') : ''; - return React.createElement( - 'li', - { key: 'block-warning-'.concat(t) }, - React.createElement( - 'button', - { - type: 'button', - className: 'validation-api-issue-link', - onClick: function () { - return h(e.clientIds[0]); - }, - }, - e.blockName - ), - ': ', - e.message, - n - ); - }) - ) - ) - ), - f.length > 0 && - React.createElement( - F.PanelRow, - null, - React.createElement( - 'div', - { className: 'validation-api-warning-group' }, - React.createElement( - 'p', - { className: 'validation-api-warning-subheading' }, + F.PanelRow, + null, React.createElement( - 'strong', - null, - React.createElement('span', { - className: 'validation-api-indicator-circle', - }), - (0, Z.__)('Meta Warnings', 'validation-api') + 'div', + { className: 'validation-api-warning-group' }, + React.createElement( + 'p', + { className: 'validation-api-warning-subheading' }, + React.createElement( + 'strong', + null, + React.createElement('span', { + className: + 'validation-api-indicator-circle', + }), + (0, Z.__)('Meta Warnings', 'validation-api') + ) + ), + React.createElement( + 'ul', + { className: 'validation-api-warning-list' }, + f.map(function (e, t) { + return React.createElement( + 'li', + { key: 'meta-warning-'.concat(t) }, + e.message + ); + }) + ) ) ), + v.length > 0 && React.createElement( - 'ul', - { className: 'validation-api-warning-list' }, - f.map(function (e, t) { - return React.createElement( - 'li', - { key: 'meta-warning-'.concat(t) }, - e.message - ); - }) - ) - ) - ), - v.length > 0 && - React.createElement( - F.PanelRow, - null, - React.createElement( - 'div', - { className: 'validation-api-warning-group' }, - React.createElement( - 'p', - { className: 'validation-api-warning-subheading' }, + F.PanelRow, + null, React.createElement( - 'strong', - null, - React.createElement('span', { - className: 'validation-api-indicator-circle', - }), - (0, Z.__)('Editor Warnings', 'validation-api') + 'div', + { className: 'validation-api-warning-group' }, + React.createElement( + 'p', + { className: 'validation-api-warning-subheading' }, + React.createElement( + 'strong', + null, + React.createElement('span', { + className: + 'validation-api-indicator-circle', + }), + (0, Z.__)('Editor Warnings', 'validation-api') + ) + ), + React.createElement( + 'ul', + { className: 'validation-api-warning-list' }, + v.map(function (e, t) { + return React.createElement( + 'li', + { key: 'editor-warning-'.concat(t) }, + e.message + ); + }) + ) ) - ), - React.createElement( - 'ul', - { className: 'validation-api-warning-list' }, - v.map(function (e, t) { - return React.createElement( - 'li', - { key: 'editor-warning-'.concat(t) }, - e.message - ); - }) ) - ) ) ) - ) ); } (0, t.addFilter)( diff --git a/src/editor/components/ValidationSidebar.js b/src/editor/components/ValidationSidebar.js index 381a10d..31b3f81 100644 --- a/src/editor/components/ValidationSidebar.js +++ b/src/editor/components/ValidationSidebar.js @@ -159,8 +159,8 @@ function deduplicateEditorIssues(issues, severity) { * and source type. Users can click on issues to navigate directly to the relevant * block or field in the editor. * - * The sidebar only renders when validation issues exist and displays an icon - * that changes color based on the highest severity issue present. + * The sidebar and its toolbar icon are only rendered when validation issues exist. + * The icon color reflects the highest severity issue present (red for errors, yellow for warnings). */ export function ValidationSidebar() { // Retrieve validation results from all sources @@ -303,8 +303,11 @@ export function ValidationSidebar() { }; }, []); - // Always render the sidebar to maintain consistent icon position - // This ensures the icon appears in the same location regardless of validation state + // No issues — don't render the sidebar or its toolbar icon + if (totalErrors === 0 && totalWarnings === 0) { + return null; + } + return ( Date: Fri, 3 Apr 2026 22:04:28 -0400 Subject: [PATCH 2/2] update plugin icon --- build/validation-api-rtl.css | 2 +- build/validation-api.asset.php | 2 +- build/validation-api.css | 2 +- build/validation-api.js | 317 +++++++++--------- src/admin.scss | 8 +- src/editor/components/BlockIndicator.js | 8 +- src/editor/components/ValidationIcon.js | 27 ++ src/editor/components/ValidationSidebar.js | 19 +- src/editor/components/index.js | 1 + src/settings.scss | 356 --------------------- src/styles/_variables.scss | 40 +-- src/styles/editor-validation.scss | 14 +- src/styles/inline-indicators.scss | 28 +- src/styles/inline-modal.scss | 4 +- src/styles/meta-validation.scss | 16 +- src/styles/validation-sidebar.scss | 8 +- 16 files changed, 253 insertions(+), 599 deletions(-) create mode 100644 src/editor/components/ValidationIcon.js delete mode 100644 src/settings.scss diff --git a/build/validation-api-rtl.css b/build/validation-api-rtl.css index 750b015..87a7a4d 100644 --- a/build/validation-api-rtl.css +++ b/build/validation-api-rtl.css @@ -1 +1 @@ -:root{--a11y-light-blue:#dfe9ee;--a11y-blue:#507a96;--a11y-lightest-grey:#f7f7f7;--a11y-light-grey:#e8e8e8;--a11y-grey:#b9b9b9;--a11y-medium-grey:#666;--a11y-dark-grey:#474747;--a11y-black:#1d2327;--a11y-red:#d82000;--a11y-light-red:#ffe4e0;--a11y-dark-red:#a21800;--a11y-yellow:#dbc900;--a11y-light-yellow:#fffde2;--a11y-dark-yellow:#807500;--a11y-lightest-green:#f1fcf2;--a11y-green:#2aad40;--a11y-dark-green:#1b6027;--a11y-border-width:3px solid;--a11y-settings-space:32px;--a11y-font-small:0.8rem}.validation-api-validation-list{margin:0;padding:0}.validation-api-validation-item{border-right:var(--a11y-border-width);border-radius:2px;margin-bottom:12px;padding:12px 14px;width:100%}.validation-api-validation-item:last-child{margin-bottom:0}.validation-api-validation-item--error{background-color:var(--a11y-light-red);border-color:var(--a11y-red)}.validation-api-validation-item--warning{background-color:var(--a11y-light-yellow);border-color:var(--a11y-yellow)}.validation-api-validation-message{font-size:13px;line-height:1.5;margin:0}.validation-api-validation-message strong{font-weight:600}.validation-api-validation-item--error .validation-api-validation-message{color:var(--a11y-dark-red)}.validation-api-validation-item--warning .validation-api-validation-message{color:var(--a11y-dark-yellow)}.validation-api-validation-description{color:#636363;font-size:12px;line-height:1.4;margin-top:8px}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-indicator,.validation-api-meta-indicator{bottom:0;height:24px;right:0;pointer-events:none;position:absolute;width:24px;z-index:20}.validation-api-block-indicator-button.components-button.has-icon,.validation-api-meta-indicator-button.components-button.has-icon{background-color:var(--a11y-light-red);border:1px solid var(--a11y-red);cursor:pointer;height:100%;min-width:0;padding:0;pointer-events:all;position:absolute;transition:all .2s ease;width:100%}.validation-api-block-indicator-button.components-button.has-icon svg,.validation-api-meta-indicator-button.components-button.has-icon svg{fill:var(--a11y-dark-red);height:18px;width:18px}.validation-api-block-indicator-button.components-button.has-icon:hover,.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--a11y-red)}.validation-api-block-indicator-button.components-button.has-icon:hover svg,.validation-api-meta-indicator-button.components-button.has-icon:hover svg{fill:#fff}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button{background-color:var(--a11y-light-yellow);border-color:var(--a11y-yellow);color:var(--a11y-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button svg,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--a11y-dark-yellow);height:20px;width:20px}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover{background-color:var(--a11y-yellow);border:1px solid var(--a11y-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover svg,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover svg{fill:#fff}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-left:8px;vertical-align:middle;width:8px}.validation-api-indicator-category-label{font-style:italic}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--a11y-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--a11y-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:24px}.validation-api-indicator-modal-content .validation-api-indicator-errors p,.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings p,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin:0}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin-right:3px;padding:4px 14px 2px 0}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{margin:0;padding:4px 0}.validation-api-meta-error .components-select-control__input,.validation-api-meta-error .components-text-control__input,.validation-api-meta-error .components-textarea-control__input{border-right:4px solid var(--a11y-red)}.validation-api-meta-warning .components-select-control__input,.validation-api-meta-warning .components-text-control__input,.validation-api-meta-warning .components-textarea-control__input{border-right:4px solid var(--a11y-yellow)}.validation-api-meta-error .components-select-control__input:focus,.validation-api-meta-error .components-text-control__input:focus,.validation-api-meta-error .components-textarea-control__input:focus{border:none;border-right:4px solid var(--a11y-red);box-shadow:0 0 0 1px var(--a11y-red)}.validation-api-meta-warning .components-select-control__input:focus,.validation-api-meta-warning .components-text-control__input:focus,.validation-api-meta-warning .components-textarea-control__input:focus{border:none;border-right:4px solid var(--a11y-yellow);box-shadow:0 0 0 1px var(--a11y-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--a11y-dark-red)}.validation-api-warning-text{color:var(--a11y-dark-yellow)}.validation-api-errors-panel .components-panel__row+.components-panel__row,.validation-api-warnings-panel .components-panel__row+.components-panel__row{margin-top:20px}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-left:8px;vertical-align:middle;width:8px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--a11y-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--a11y-yellow)}.validation-api-error-group p,.validation-api-error-group ul,.validation-api-warning-group p,.validation-api-warning-group ul{line-height:1.4;margin:0}.validation-api-error-group ul,.validation-api-warning-group ul{margin-right:3px;padding:4px 14px 2px 0}.validation-api-error-group li,.validation-api-warning-group li{margin:0;padding:4px 0}.validation-api-error-group li:last-child,.validation-api-warning-group li:last-child{padding-bottom:0}.validation-api-error-group .validation-api-issue-link,.validation-api-warning-group .validation-api-issue-link{background:none;border:none;color:var(--wp-admin-theme-color);cursor:pointer;font-weight:400;margin:0;padding:0;text-decoration:underline}.validation-api-error-group .validation-api-issue-link:hover,.validation-api-warning-group .validation-api-issue-link:hover{color:#135e96} +:root{--validaion-api-light-blue:#dfe9ee;--validaion-api-blue:#507a96;--validaion-api-lightest-grey:#f7f7f7;--validaion-api-light-grey:#e8e8e8;--validaion-api-grey:#b9b9b9;--validaion-api-medium-grey:#666;--validaion-api-dark-grey:#474747;--validaion-api-black:#1d2327;--validaion-api-red:#d82000;--validaion-api-light-red:#ffe4e0;--validaion-api-dark-red:#a21800;--validaion-api-yellow:#cbba00;--validaion-api-light-yellow:#fffde2;--validaion-api-dark-yellow:#807500;--validaion-api-lightest-green:#f1fcf2;--validaion-api-green:#2aad40;--validaion-api-dark-green:#1b6027;--validaion-api-border-width:3px solid;--validaion-api-settings-space:32px;--validaion-api-font-small:0.8rem}.validation-api-validation-list{margin:0;padding:0}.validation-api-validation-item{border-right:var(--validaion-api-border-width);border-radius:2px;margin-bottom:12px;padding:12px 14px;width:100%}.validation-api-validation-item:last-child{margin-bottom:0}.validation-api-validation-item--error{background-color:var(--validaion-api-light-red);border-color:var(--validaion-api-red)}.validation-api-validation-item--warning{background-color:var(--validaion-api-light-yellow);border-color:var(--validaion-api-yellow)}.validation-api-validation-message{font-size:13px;line-height:1.5;margin:0}.validation-api-validation-message strong{font-weight:600}.validation-api-validation-item--error .validation-api-validation-message{color:var(--validaion-api-dark-red)}.validation-api-validation-item--warning .validation-api-validation-message{color:var(--validaion-api-dark-yellow)}.validation-api-validation-description{color:#636363;font-size:12px;line-height:1.4;margin-top:8px}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-indicator,.validation-api-meta-indicator{height:24px;right:-2px;pointer-events:none;position:absolute;top:-2px;width:24px;z-index:20}.validation-api-block-indicator-button.components-button.has-icon,.validation-api-meta-indicator-button.components-button.has-icon{background-color:var(--validaion-api-light-red);border:1px solid var(--validaion-api-red);cursor:pointer;height:100%;min-width:0;padding:0;pointer-events:all;position:absolute;transition:all .2s ease;width:100%}.validation-api-block-indicator-button.components-button.has-icon svg,.validation-api-meta-indicator-button.components-button.has-icon svg{fill:var(--validaion-api-dark-red);height:18px;width:18px}.validation-api-block-indicator-button.components-button.has-icon:hover,.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--validaion-api-red)}.validation-api-block-indicator-button.components-button.has-icon:hover svg path,.validation-api-meta-indicator-button.components-button.has-icon:hover svg path{fill:#fff}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button{background-color:var(--validaion-api-light-yellow);border-color:var(--validaion-api-yellow);color:var(--validaion-api-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button svg,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--validaion-api-dark-yellow);height:20px;width:20px}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover{background-color:var(--validaion-api-yellow);border-color:1px solid var(--validaion-api-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover svg path,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover svg path{fill:#fff}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-left:8px;vertical-align:middle;width:8px}.validation-api-indicator-category-label{font-style:italic}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validaion-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validaion-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:24px}.validation-api-indicator-modal-content .validation-api-indicator-errors p,.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings p,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin:0}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin-right:3px;padding:4px 14px 2px 0}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{margin:0;padding:4px 0}.validation-api-meta-error .components-select-control__input,.validation-api-meta-error .components-text-control__input,.validation-api-meta-error .components-textarea-control__input{border-right:4px solid var(--validaion-api-red)}.validation-api-meta-warning .components-select-control__input,.validation-api-meta-warning .components-text-control__input,.validation-api-meta-warning .components-textarea-control__input{border-right:4px solid var(--validaion-api-yellow)}.validation-api-meta-error .components-select-control__input:focus,.validation-api-meta-error .components-text-control__input:focus,.validation-api-meta-error .components-textarea-control__input:focus{border:none;border-right:4px solid var(--validaion-api-red);box-shadow:0 0 0 1px var(--validaion-api-red)}.validation-api-meta-warning .components-select-control__input:focus,.validation-api-meta-warning .components-text-control__input:focus,.validation-api-meta-warning .components-textarea-control__input:focus{border:none;border-right:4px solid var(--validaion-api-yellow);box-shadow:0 0 0 1px var(--validaion-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validaion-api-dark-red)}.validation-api-warning-text{color:var(--validaion-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-errors-panel .components-panel__row+.components-panel__row,.validation-api-warnings-panel .components-panel__row+.components-panel__row{margin-top:20px}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-left:8px;vertical-align:middle;width:8px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--validaion-api-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--validaion-api-yellow)}.validation-api-error-group p,.validation-api-error-group ul,.validation-api-warning-group p,.validation-api-warning-group ul{line-height:1.4;margin:0}.validation-api-error-group ul,.validation-api-warning-group ul{margin-right:3px;padding:4px 14px 2px 0}.validation-api-error-group li,.validation-api-warning-group li{margin:0;padding:4px 0}.validation-api-error-group li:last-child,.validation-api-warning-group li:last-child{padding-bottom:0}.validation-api-error-group .validation-api-issue-link,.validation-api-warning-group .validation-api-issue-link{background:none;border:none;color:var(--wp-admin-theme-color);cursor:pointer;font-weight:400;margin:0;padding:0;text-decoration:underline}.validation-api-error-group .validation-api-issue-link:hover,.validation-api-warning-group .validation-api-issue-link:hover{color:#135e96} diff --git a/build/validation-api.asset.php b/build/validation-api.asset.php index b8cf89e..e8eeb96 100644 --- a/build/validation-api.asset.php +++ b/build/validation-api.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => '51a9292fbee92ed5bd5f'); + array('wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '28273b41ee73fa8d23e0'); diff --git a/build/validation-api.css b/build/validation-api.css index e4d90e0..75b01b6 100644 --- a/build/validation-api.css +++ b/build/validation-api.css @@ -1 +1 @@ -:root{--a11y-light-blue:#dfe9ee;--a11y-blue:#507a96;--a11y-lightest-grey:#f7f7f7;--a11y-light-grey:#e8e8e8;--a11y-grey:#b9b9b9;--a11y-medium-grey:#666;--a11y-dark-grey:#474747;--a11y-black:#1d2327;--a11y-red:#d82000;--a11y-light-red:#ffe4e0;--a11y-dark-red:#a21800;--a11y-yellow:#dbc900;--a11y-light-yellow:#fffde2;--a11y-dark-yellow:#807500;--a11y-lightest-green:#f1fcf2;--a11y-green:#2aad40;--a11y-dark-green:#1b6027;--a11y-border-width:3px solid;--a11y-settings-space:32px;--a11y-font-small:0.8rem}.validation-api-validation-list{margin:0;padding:0}.validation-api-validation-item{border-left:var(--a11y-border-width);border-radius:2px;margin-bottom:12px;padding:12px 14px;width:100%}.validation-api-validation-item:last-child{margin-bottom:0}.validation-api-validation-item--error{background-color:var(--a11y-light-red);border-color:var(--a11y-red)}.validation-api-validation-item--warning{background-color:var(--a11y-light-yellow);border-color:var(--a11y-yellow)}.validation-api-validation-message{font-size:13px;line-height:1.5;margin:0}.validation-api-validation-message strong{font-weight:600}.validation-api-validation-item--error .validation-api-validation-message{color:var(--a11y-dark-red)}.validation-api-validation-item--warning .validation-api-validation-message{color:var(--a11y-dark-yellow)}.validation-api-validation-description{color:#636363;font-size:12px;line-height:1.4;margin-top:8px}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-indicator,.validation-api-meta-indicator{bottom:0;height:24px;left:0;pointer-events:none;position:absolute;width:24px;z-index:20}.validation-api-block-indicator-button.components-button.has-icon,.validation-api-meta-indicator-button.components-button.has-icon{background-color:var(--a11y-light-red);border:1px solid var(--a11y-red);cursor:pointer;height:100%;min-width:0;padding:0;pointer-events:all;position:absolute;transition:all .2s ease;width:100%}.validation-api-block-indicator-button.components-button.has-icon svg,.validation-api-meta-indicator-button.components-button.has-icon svg{fill:var(--a11y-dark-red);height:18px;width:18px}.validation-api-block-indicator-button.components-button.has-icon:hover,.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--a11y-red)}.validation-api-block-indicator-button.components-button.has-icon:hover svg,.validation-api-meta-indicator-button.components-button.has-icon:hover svg{fill:#fff}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button{background-color:var(--a11y-light-yellow);border-color:var(--a11y-yellow);color:var(--a11y-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button svg,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--a11y-dark-yellow);height:20px;width:20px}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover{background-color:var(--a11y-yellow);border:1px solid var(--a11y-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover svg,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover svg{fill:#fff}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-right:8px;vertical-align:middle;width:8px}.validation-api-indicator-category-label{font-style:italic}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--a11y-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--a11y-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:24px}.validation-api-indicator-modal-content .validation-api-indicator-errors p,.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings p,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin:0}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin-left:3px;padding:4px 0 2px 14px}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{margin:0;padding:4px 0}.validation-api-meta-error .components-select-control__input,.validation-api-meta-error .components-text-control__input,.validation-api-meta-error .components-textarea-control__input{border-left:4px solid var(--a11y-red)}.validation-api-meta-warning .components-select-control__input,.validation-api-meta-warning .components-text-control__input,.validation-api-meta-warning .components-textarea-control__input{border-left:4px solid var(--a11y-yellow)}.validation-api-meta-error .components-select-control__input:focus,.validation-api-meta-error .components-text-control__input:focus,.validation-api-meta-error .components-textarea-control__input:focus{border:none;border-left:4px solid var(--a11y-red);box-shadow:0 0 0 1px var(--a11y-red)}.validation-api-meta-warning .components-select-control__input:focus,.validation-api-meta-warning .components-text-control__input:focus,.validation-api-meta-warning .components-textarea-control__input:focus{border:none;border-left:4px solid var(--a11y-yellow);box-shadow:0 0 0 1px var(--a11y-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--a11y-dark-red)}.validation-api-warning-text{color:var(--a11y-dark-yellow)}.validation-api-errors-panel .components-panel__row+.components-panel__row,.validation-api-warnings-panel .components-panel__row+.components-panel__row{margin-top:20px}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-right:8px;vertical-align:middle;width:8px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--a11y-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--a11y-yellow)}.validation-api-error-group p,.validation-api-error-group ul,.validation-api-warning-group p,.validation-api-warning-group ul{line-height:1.4;margin:0}.validation-api-error-group ul,.validation-api-warning-group ul{margin-left:3px;padding:4px 0 2px 14px}.validation-api-error-group li,.validation-api-warning-group li{margin:0;padding:4px 0}.validation-api-error-group li:last-child,.validation-api-warning-group li:last-child{padding-bottom:0}.validation-api-error-group .validation-api-issue-link,.validation-api-warning-group .validation-api-issue-link{background:none;border:none;color:var(--wp-admin-theme-color);cursor:pointer;font-weight:400;margin:0;padding:0;text-decoration:underline}.validation-api-error-group .validation-api-issue-link:hover,.validation-api-warning-group .validation-api-issue-link:hover{color:#135e96} +:root{--validaion-api-light-blue:#dfe9ee;--validaion-api-blue:#507a96;--validaion-api-lightest-grey:#f7f7f7;--validaion-api-light-grey:#e8e8e8;--validaion-api-grey:#b9b9b9;--validaion-api-medium-grey:#666;--validaion-api-dark-grey:#474747;--validaion-api-black:#1d2327;--validaion-api-red:#d82000;--validaion-api-light-red:#ffe4e0;--validaion-api-dark-red:#a21800;--validaion-api-yellow:#cbba00;--validaion-api-light-yellow:#fffde2;--validaion-api-dark-yellow:#807500;--validaion-api-lightest-green:#f1fcf2;--validaion-api-green:#2aad40;--validaion-api-dark-green:#1b6027;--validaion-api-border-width:3px solid;--validaion-api-settings-space:32px;--validaion-api-font-small:0.8rem}.validation-api-validation-list{margin:0;padding:0}.validation-api-validation-item{border-left:var(--validaion-api-border-width);border-radius:2px;margin-bottom:12px;padding:12px 14px;width:100%}.validation-api-validation-item:last-child{margin-bottom:0}.validation-api-validation-item--error{background-color:var(--validaion-api-light-red);border-color:var(--validaion-api-red)}.validation-api-validation-item--warning{background-color:var(--validaion-api-light-yellow);border-color:var(--validaion-api-yellow)}.validation-api-validation-message{font-size:13px;line-height:1.5;margin:0}.validation-api-validation-message strong{font-weight:600}.validation-api-validation-item--error .validation-api-validation-message{color:var(--validaion-api-dark-red)}.validation-api-validation-item--warning .validation-api-validation-message{color:var(--validaion-api-dark-yellow)}.validation-api-validation-description{color:#636363;font-size:12px;line-height:1.4;margin-top:8px}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-indicator,.validation-api-meta-indicator{height:24px;left:-2px;pointer-events:none;position:absolute;top:-2px;width:24px;z-index:20}.validation-api-block-indicator-button.components-button.has-icon,.validation-api-meta-indicator-button.components-button.has-icon{background-color:var(--validaion-api-light-red);border:1px solid var(--validaion-api-red);cursor:pointer;height:100%;min-width:0;padding:0;pointer-events:all;position:absolute;transition:all .2s ease;width:100%}.validation-api-block-indicator-button.components-button.has-icon svg,.validation-api-meta-indicator-button.components-button.has-icon svg{fill:var(--validaion-api-dark-red);height:18px;width:18px}.validation-api-block-indicator-button.components-button.has-icon:hover,.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--validaion-api-red)}.validation-api-block-indicator-button.components-button.has-icon:hover svg path,.validation-api-meta-indicator-button.components-button.has-icon:hover svg path{fill:#fff}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button{background-color:var(--validaion-api-light-yellow);border-color:var(--validaion-api-yellow);color:var(--validaion-api-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button svg,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--validaion-api-dark-yellow);height:20px;width:20px}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover{background-color:var(--validaion-api-yellow);border-color:1px solid var(--validaion-api-yellow)}.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button:hover svg path,.validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button:hover svg path{fill:#fff}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-right:8px;vertical-align:middle;width:8px}.validation-api-indicator-category-label{font-style:italic}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validaion-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validaion-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:24px}.validation-api-indicator-modal-content .validation-api-indicator-errors p,.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings p,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin:0}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{margin-left:3px;padding:4px 0 2px 14px}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{margin:0;padding:4px 0}.validation-api-meta-error .components-select-control__input,.validation-api-meta-error .components-text-control__input,.validation-api-meta-error .components-textarea-control__input{border-left:4px solid var(--validaion-api-red)}.validation-api-meta-warning .components-select-control__input,.validation-api-meta-warning .components-text-control__input,.validation-api-meta-warning .components-textarea-control__input{border-left:4px solid var(--validaion-api-yellow)}.validation-api-meta-error .components-select-control__input:focus,.validation-api-meta-error .components-text-control__input:focus,.validation-api-meta-error .components-textarea-control__input:focus{border:none;border-left:4px solid var(--validaion-api-red);box-shadow:0 0 0 1px var(--validaion-api-red)}.validation-api-meta-warning .components-select-control__input:focus,.validation-api-meta-warning .components-text-control__input:focus,.validation-api-meta-warning .components-textarea-control__input:focus{border:none;border-left:4px solid var(--validaion-api-yellow);box-shadow:0 0 0 1px var(--validaion-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validaion-api-dark-red)}.validation-api-warning-text{color:var(--validaion-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-errors-panel .components-panel__row+.components-panel__row,.validation-api-warnings-panel .components-panel__row+.components-panel__row{margin-top:20px}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:50%;display:inline-block;height:8px;margin-bottom:2px;margin-right:8px;vertical-align:middle;width:8px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--validaion-api-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--validaion-api-yellow)}.validation-api-error-group p,.validation-api-error-group ul,.validation-api-warning-group p,.validation-api-warning-group ul{line-height:1.4;margin:0}.validation-api-error-group ul,.validation-api-warning-group ul{margin-left:3px;padding:4px 0 2px 14px}.validation-api-error-group li,.validation-api-warning-group li{margin:0;padding:4px 0}.validation-api-error-group li:last-child,.validation-api-warning-group li:last-child{padding-bottom:0}.validation-api-error-group .validation-api-issue-link,.validation-api-warning-group .validation-api-issue-link{background:none;border:none;color:var(--wp-admin-theme-color);cursor:pointer;font-weight:400;margin:0;padding:0;text-decoration:underline}.validation-api-error-group .validation-api-issue-link:hover,.validation-api-warning-group .validation-api-issue-link:hover{color:#135e96} diff --git a/build/validation-api.js b/build/validation-api.js index 3a7686e..7a59b36 100644 --- a/build/validation-api.js +++ b/build/validation-api.js @@ -85,7 +85,7 @@ s = function (e) { return c(e, 'warning'); }, - d = function (e) { + f = function (e) { return e.some(function (e) { return 'error' === e.type; }); @@ -95,7 +95,7 @@ return 'warning' === e.type; }); }, - f = function (e) { + d = function (e) { return null != e && !1 !== e.enabled; }, p = function (e, t) { @@ -121,7 +121,7 @@ }, v = function (e) { var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; - return o({ isValid: 0 === e.length, issues: e, hasErrors: d(e), hasWarnings: m(e) }, t); + return o({ isValid: 0 === e.length, issues: e, hasErrors: f(e), hasWarnings: m(e) }, t); }; function y(e, t) { (null == t || t > e.length) && (t = e.length); @@ -208,16 +208,16 @@ })()), u = c[0], s = c[1]; - if (f(s)) { - var d = !0; - ('function' == typeof s.validator && (d = s.validator(n, e)), - (d = (0, t.applyFilters)('validation_api_validate_block', d, r, n, u, e)) || + if (d(s)) { + var f = !0; + ('function' == typeof s.validator && (f = s.validator(n, e)), + (f = (0, t.applyFilters)('validation_api_validate_block', f, r, n, u, e)) || a.push(p(s, u))); } }); var o = 'none'; return ( - d(a) ? (o = 'error') : m(a) && (o = 'warning'), + f(a) ? (o = 'error') : m(a) && (o = 'warning'), v(a, { mode: o, clientId: e.clientId, name: r }) ); }; @@ -448,7 +448,7 @@ null === (i = k[e]) || void 0 === i || null === (i = i[r]) || void 0 === i ? void 0 : i[a]; - if (!f(o)) return !0; + if (!d(o)) return !0; var l = !0; return ( 'required' === a && (l = '' !== n && null != n), @@ -464,7 +464,7 @@ var l = S(o[i], 2), c = l[0], u = l[1]; - if (f(u) && !A(e, t, r, c)) { + if (d(u) && !A(e, t, r, c)) { var s = p(u, c, { metaKey: t }); ((s.checkName = c), a.push(s)); } @@ -506,7 +506,7 @@ var r = null != arguments[t] ? arguments[t] : {}; t % 2 ? I(Object(r), !0).forEach(function (t) { - V(e, t, r[t]); + L(e, t, r[t]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) @@ -516,7 +516,7 @@ } return e; } - function V(e, t, r) { + function L(e, t, r) { return ( (t = (function (e) { var t = (function (e) { @@ -541,7 +541,7 @@ e ); } - function T() { + function V() { for ( var e, t = (0, r.useSelect)(function (e) { @@ -569,7 +569,7 @@ } return o; } - function B(e, t) { + function T(e, t) { return ( (function (e) { if (Array.isArray(e)) return e; @@ -612,7 +612,7 @@ })(e, t) || (function (e, t) { if (e) { - if ('string' == typeof e) return M(e, t); + if ('string' == typeof e) return B(e, t); var r = {}.toString.call(e).slice(8, -1); return ( 'Object' === r && e.constructor && (r = e.constructor.name), @@ -620,7 +620,7 @@ ? Array.from(e) : 'Arguments' === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) - ? M(e, t) + ? B(e, t) : void 0 ); } @@ -632,12 +632,12 @@ })() ); } - function M(e, t) { + function B(e, t) { (null == t || t > e.length) && (t = e.length); for (var r = 0, n = Array(t); r < t; r++) n[r] = e[r]; return n; } - var x = + var M = (null === (P = window.ValidationAPI) || void 0 === P ? void 0 : P.editorValidationRules) || {}; function D() { @@ -654,12 +654,12 @@ a = e.postType; if (!a || !n) return []; var i = (function (e, r) { - for (var n = x[e] || {}, a = [], i = 0, o = Object.entries(n); i < o.length; i++) { - var l = B(o[i], 2), + for (var n = M[e] || {}, a = [], i = 0, o = Object.entries(n); i < o.length; i++) { + var l = T(o[i], 2), c = l[0], u = l[1]; if ( - f(u) && + d(u) && !(0, t.applyFilters)('validation_api_validate_editor', !0, r, e, c, u) ) { var s = p(u, c); @@ -675,7 +675,7 @@ })(a, n); return i.issues; } - function L() { + function x() { var e, t = (null === (e = window.ValidationAPI) || void 0 === e ? void 0 : e.editorContext) || @@ -685,15 +685,15 @@ o = (0, r.useDispatch)(i), l = wp.data && wp.data.select && wp.data.select(i), c = R(), - u = T(), + u = V(), s = D(), - f = o || {}, - p = f.lockPostSaving, - v = f.unlockPostSaving, - y = f.lockPostAutosaving, - b = f.unlockPostAutosaving, - g = f.disablePublishSidebar, - w = f.enablePublishSidebar; + d = o || {}, + p = d.lockPostSaving, + v = d.unlockPostSaving, + y = d.lockPostAutosaving, + b = d.unlockPostAutosaving, + g = d.disablePublishSidebar, + w = d.enablePublishSidebar; return ( (0, n.useEffect)( function () { @@ -704,7 +704,7 @@ r = u.some(function (e) { return e.hasErrors; }), - n = d(s); + n = f(s); e || r || n ? (p('validation-api'), y && y('validation-api'), g && g()) : (v('validation-api'), b && b('validation-api'), w && w()); @@ -727,12 +727,12 @@ i = u.some(function (e) { return e.hasWarnings && !e.hasErrors; }), - o = d(s), + o = f(s), l = m(s), - f = e || n || o, - p = !f && (r || i || l); + d = e || n || o, + p = !d && (r || i || l); return ( - f + d ? (document.body.classList.add('has-meta-validation-errors'), document.body.classList.remove('has-meta-validation-warnings')) : p @@ -761,9 +761,29 @@ } const W = window.wp.editor, F = window.wp.components, - Z = window.wp.i18n, - U = window.wp.blocks; - function $(e, t) { + U = window.wp.i18n, + $ = window.wp.blocks; + function q(e) { + var t = e.fill, + r = void 0 === t ? 'currentColor' : t; + return React.createElement( + 'svg', + { + viewBox: '-2.12 -2.12 28.24 28.24', + xmlns: 'http://www.w3.org/2000/svg', + className: 'validation-api-sidebar-icon', + }, + React.createElement('path', { + fill: r, + d: 'M21.77205 2.96949V9.22968L24 11.49539L21.41025 14.12373C20.18445 17.59455 17.82645 19.4559 16.5927 20.1609C15.7053 20.66805 13.45103 22.0566 12.42537 22.69365L12 22.9578L11.57463 22.69365C10.54898 22.0566 8.2947 20.66805 7.4073 20.1609C6.17361 19.4559 3.81545 17.59455 2.58966 14.12373L0 11.49539L2.22791 9.22968V2.96949L10.16957 0L10.73433 1.51038L3.84047 4.08809V9.88976L2.26275 11.49425L3.99707 13.25445L4.05633 13.4307C5.10714 16.5531 7.20452 18.1878 8.2074 18.7608C9.01367 19.2216 10.87026 20.36115 12 21.06C13.12974 20.36115 14.98634 19.2216 15.7926 18.7608C16.7955 18.1878 18.8928 16.5531 19.9437 13.4307L20.00295 13.25445L21.73725 11.49425L20.15955 9.88976V4.08809L13.26567 1.51038L13.83044 0L21.77205 2.96949Z', + }), + React.createElement('path', { + fill: r, + d: 'M16.95615 8.74307L10.64529 15.05385L7.23707 11.64567L8.37732 10.50542L10.64529 12.77339L15.81585 7.60281L16.95615 8.74307Z', + }) + ); + } + function K(e, t) { var r = new Map(); return ( e.forEach(function (e) { @@ -776,7 +796,7 @@ r.set(l, { blockName: ((a = e.name), - (i = (0, U.getBlockType)(a)), + (i = (0, $.getBlockType)(a)), i && i.title ? i.title : (a.split('/')[1] || a) @@ -797,7 +817,7 @@ Array.from(r.values()) ); } - function q(e, t) { + function H(e, t) { var r = new Map(); return ( e.forEach(function (e) { @@ -810,7 +830,7 @@ Array.from(r.values()) ); } - function K(e, t) { + function Z(e, t) { var r = new Map(); return ( e.forEach(function (e) { @@ -824,39 +844,25 @@ Array.from(r.values()) ); } - function H() { + function z() { var e = R() || [], - t = T() || [], + t = V() || [], a = D() || [], i = (0, r.useDispatch)('core/block-editor').selectBlock, o = (0, n.useRef)(null), l = c(a, 'error'), u = c(a, 'warning'), - s = $(e, 'error'), - d = $(e, 'warning'), - m = q(t, 'error'), - f = q(t, 'warning'), - p = K(l, 'error'), - v = K(u, 'warning'), + s = K(e, 'error'), + f = K(e, 'warning'), + m = H(t, 'error'), + d = H(t, 'warning'), + p = Z(l, 'error'), + v = Z(u, 'warning'), y = s.length + m.length + p.length, - b = d.length + f.length + v.length, + b = f.length + d.length + v.length, g = 'currentColor'; y > 0 ? (g = '#d82000') : b > 0 && (g = '#dbc900'); - var w = React.createElement( - 'svg', - { - width: '16', - height: '16', - viewBox: '0 0 16 16', - fill: g, - className: 'validation-api-sidebar-icon', - xmlns: 'http://www.w3.org/2000/svg', - }, - React.createElement('path', { - d: 'M8 0C9.77663 0 11.4175 0.57979 12.7451 1.55957L11.5498 2.75488C10.5372 2.06824 9.3156 1.66699 8 1.66699C4.5022 1.66699 1.66699 4.5022 1.66699 8C1.66699 11.4978 4.5022 14.333 8 14.333C11.2302 14.333 13.8933 11.9148 14.2822 8.79004L10.2256 12.8477C10.0614 13.0117 9.84597 13.0923 9.63086 13.0908C9.41575 13.0923 9.20031 13.0117 9.03613 12.8477L3.75586 7.56738C3.43077 7.24201 3.43077 6.71502 3.75586 6.38965C4.0813 6.06421 4.60913 6.06421 4.93457 6.38965L7.40137 8.85645L13.6689 2.58887C13.9944 2.26363 14.5223 2.26361 14.8477 2.58887C15.173 2.91425 15.1729 3.44213 14.8477 3.76758L8.58008 10.0352L9.63086 11.0859L14.3271 6.38965C14.3588 6.35799 14.3926 6.32921 14.4277 6.30371L15.5059 5.22656C15.8253 6.09066 16 7.0249 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C2.2549e-07 3.58172 3.58172 2.25497e-07 8 0Z', - fill: g, - }) - ), + var w = React.createElement(q, { fill: g }), h = function (e) { e && (i(e), @@ -886,7 +892,7 @@ W.PluginSidebar, { name: 'validation-sidebar', - title: (0, Z.__)('Validation', 'validation-api'), + title: (0, U.__)('Validation', 'validation-api'), icon: w, className: 'validation-api-validation-sidebar', }, @@ -894,9 +900,9 @@ React.createElement( F.PanelBody, { - title: (0, Z.sprintf)( + title: (0, U.sprintf)( /* translators: %d: number of errors */ /* translators: %d: number of errors */ - (0, Z.__)('Errors (%d)', 'validation-api'), + (0, U.__)('Errors (%d)', 'validation-api'), y ), initialOpen: !0, @@ -919,7 +925,7 @@ className: 'validation-api-indicator-circle', }), - (0, Z.__)('Block Errors', 'validation-api') + (0, U.__)('Block Errors', 'validation-api') ) ), React.createElement( @@ -968,7 +974,7 @@ className: 'validation-api-indicator-circle', }), - (0, Z.__)('Meta Errors', 'validation-api') + (0, U.__)('Meta Errors', 'validation-api') ) ), React.createElement( @@ -1001,7 +1007,7 @@ className: 'validation-api-indicator-circle', }), - (0, Z.__)('Editor Errors', 'validation-api') + (0, U.__)('Editor Errors', 'validation-api') ) ), React.createElement( @@ -1022,15 +1028,15 @@ React.createElement( F.PanelBody, { - title: (0, Z.sprintf)( + title: (0, U.sprintf)( /* translators: %d: number of warnings */ /* translators: %d: number of warnings */ - (0, Z.__)('Warnings (%d)', 'validation-api'), + (0, U.__)('Warnings (%d)', 'validation-api'), b ), initialOpen: !0, className: 'validation-api-warnings-panel', }, - d.length > 0 && + f.length > 0 && React.createElement( F.PanelRow, null, @@ -1047,13 +1053,13 @@ className: 'validation-api-indicator-circle', }), - (0, Z.__)('Block Warnings', 'validation-api') + (0, U.__)('Block Warnings', 'validation-api') ) ), React.createElement( 'ul', { className: 'validation-api-warning-list' }, - d.map(function (e, t) { + f.map(function (e, t) { var r = e.clientIds.length, n = r > 1 ? ' (x'.concat(r, ')') : ''; return React.createElement( @@ -1079,7 +1085,7 @@ ) ) ), - f.length > 0 && + d.length > 0 && React.createElement( F.PanelRow, null, @@ -1096,13 +1102,13 @@ className: 'validation-api-indicator-circle', }), - (0, Z.__)('Meta Warnings', 'validation-api') + (0, U.__)('Meta Warnings', 'validation-api') ) ), React.createElement( 'ul', { className: 'validation-api-warning-list' }, - f.map(function (e, t) { + d.map(function (e, t) { return React.createElement( 'li', { key: 'meta-warning-'.concat(t) }, @@ -1129,7 +1135,7 @@ className: 'validation-api-indicator-circle', }), - (0, Z.__)('Editor Warnings', 'validation-api') + (0, U.__)('Editor Warnings', 'validation-api') ) ), React.createElement( @@ -1165,43 +1171,12 @@ }, } ); - (0, e.registerPlugin)('validation-api', { - render: function () { - return React.createElement( - React.Fragment, - null, - React.createElement(L, null), - React.createElement(H, null) - ); - }, - }); - const J = window.wp.compose, - X = window.wp.primitives, - z = window.ReactJSXRuntime; - var Q = (0, z.jsx)(X.SVG, { - xmlns: 'http://www.w3.org/2000/svg', - viewBox: '0 0 24 24', - children: (0, z.jsx)(X.Path, { - fillRule: 'evenodd', - clipRule: 'evenodd', - d: 'M12.218 5.377a.25.25 0 0 0-.436 0l-7.29 12.96a.25.25 0 0 0 .218.373h14.58a.25.25 0 0 0 .218-.372l-7.29-12.96Zm-1.743-.735c.669-1.19 2.381-1.19 3.05 0l7.29 12.96a1.75 1.75 0 0 1-1.525 2.608H4.71a1.75 1.75 0 0 1-1.525-2.608l7.29-12.96ZM12.75 17.46h-1.5v-1.5h1.5v1.5Zm-1.5-3h1.5v-5h-1.5v5Z', - }), - }), - Y = (0, z.jsx)(X.SVG, { - xmlns: 'http://www.w3.org/2000/svg', - viewBox: '0 0 24 24', - children: (0, z.jsx)(X.Path, { - fillRule: 'evenodd', - clipRule: 'evenodd', - d: 'M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 12v-1.5h1.5V16h-1.5Zm0-8v5h1.5V8h-1.5Z', - }), - }); - function ee(e, t) { + function J(e, t) { (null == t || t > e.length) && (t = e.length); for (var r = 0, n = Array(t); r < t; r++) n[r] = e[r]; return n; } - function te(e) { + function Q(e) { var t, r, a = e.issues, @@ -1255,7 +1230,7 @@ })(t, r) || (function (e, t) { if (e) { - if ('string' == typeof e) return ee(e, t); + if ('string' == typeof e) return J(e, t); var r = {}.toString.call(e).slice(8, -1); return ( 'Object' === r && e.constructor && (r = e.constructor.name), @@ -1263,7 +1238,7 @@ ? Array.from(e) : 'Arguments' === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) - ? ee(e, t) + ? J(e, t) : void 0 ); } @@ -1276,10 +1251,12 @@ o = i[0], l = i[1]; if (!a || 0 === a.length) return null; - var c = d(a), + var c = f(a), m = u(a), - f = s(a), - p = c ? Q : Y, + d = s(a), + p = c + ? React.createElement(q, { fill: '#d82000' }) + : React.createElement(q, { fill: '#dbc900' }), v = c ? 'validation-api-block-indicator validation-api-block-indicator--error' : 'validation-api-block-indicator validation-api-block-indicator--warning'; @@ -1295,14 +1272,14 @@ return l(!0); }, className: 'validation-api-block-indicator-button', - 'aria-label': (0, Z.__)('View block issues or concerns', 'validation-api'), + 'aria-label': (0, U.__)('View block issues or concerns', 'validation-api'), }) ), o && React.createElement( F.Modal, { - title: (0, Z.__)('Issues or Concerns', 'validation-api'), + title: (0, U.__)('Issues or Concerns', 'validation-api'), onRequestClose: function () { return l(!1); }, @@ -1328,7 +1305,7 @@ className: 'validation-api-indicator-section-title-circle', }), - (0, Z.__)('Errors', 'validation-api') + (0, U.__)('Errors', 'validation-api') ) ), React.createElement( @@ -1343,7 +1320,7 @@ }) ) ), - f.length > 0 && + d.length > 0 && React.createElement( 'div', { @@ -1360,13 +1337,13 @@ className: 'validation-api-indicator-section-title-circle', }), - (0, Z.__)('Warnings', 'validation-api') + (0, U.__)('Warnings', 'validation-api') ) ), React.createElement( 'ul', null, - f.map(function (e, t) { + d.map(function (e, t) { return React.createElement( 'li', { key: 'warning-'.concat(t) }, @@ -1379,14 +1356,14 @@ ) ); } - function re(e, t) { + function X(e, t) { (null == t || t > e.length) && (t = e.length); for (var r = 0, n = Array(t); r < t; r++) n[r] = e[r]; return n; } - function ne(e) { + function Y(e) { return ( - (ne = + (Y = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (e) { return typeof e; @@ -1399,10 +1376,10 @@ ? 'symbol' : typeof e; }), - ne(e) + Y(e) ); } - function ae(e, t) { + function ee(e, t) { var r = Object.keys(e); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); @@ -1414,35 +1391,35 @@ } return r; } - function ie(e) { + function te(e) { for (var t = 1; t < arguments.length; t++) { var r = null != arguments[t] ? arguments[t] : {}; t % 2 - ? ae(Object(r), !0).forEach(function (t) { - oe(e, t, r[t]); + ? ee(Object(r), !0).forEach(function (t) { + re(e, t, r[t]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) - : ae(Object(r)).forEach(function (t) { + : ee(Object(r)).forEach(function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)); }); } return e; } - function oe(e, t, r) { + function re(e, t, r) { return ( (t = (function (e) { var t = (function (e) { - if ('object' != ne(e) || !e) return e; + if ('object' != Y(e) || !e) return e; var t = e[Symbol.toPrimitive]; if (void 0 !== t) { var r = t.call(e, 'string'); - if ('object' != ne(r)) return r; + if ('object' != Y(r)) return r; throw new TypeError('@@toPrimitive must return a primitive value.'); } return String(e); })(e); - return 'symbol' == ne(t) ? t : t + ''; + return 'symbol' == Y(t) ? t : t + ''; })(t)) in e ? Object.defineProperty(e, t, { value: r, @@ -1454,7 +1431,17 @@ e ); } - var le = (0, J.createHigherOrderComponent)(function (e) { + (0, e.registerPlugin)('validation-api', { + render: function () { + return React.createElement( + React.Fragment, + null, + React.createElement(x, null), + React.createElement(z, null) + ); + }, + }); + var ne = (0, window.wp.compose.createHigherOrderComponent)(function (e) { return function (t) { var a = t.clientId, i = t.attributes, @@ -1523,7 +1510,7 @@ })(r, a) || (function (e, t) { if (e) { - if ('string' == typeof e) return re(e, t); + if ('string' == typeof e) return X(e, t); var r = {}.toString.call(e).slice(8, -1); return ( 'Object' === r && @@ -1535,7 +1522,7 @@ /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test( r ) - ? re(e, t) + ? X(e, t) : void 0 ); } @@ -1548,11 +1535,11 @@ c = l[0], u = l[1], s = (0, n.useRef)(null), - d = (0, n.useRef)(!0); + f = (0, n.useRef)(!0); return ( (0, n.useEffect)(function () { - return d.current - ? ((d.current = !1), void u(e())) + return f.current + ? ((f.current = !1), void u(e())) : (s.current && clearTimeout(s.current), (s.current = setTimeout(function () { u(e()); @@ -1566,7 +1553,7 @@ })( function () { if (!o) return { isValid: !0, issues: [], mode: 'none' }; - var e = ie(ie({}, o), {}, { attributes: i || o.attributes }); + var e = te(te({}, o), {}, { attributes: i || o.attributes }); return g(e); }, [o, i], @@ -1582,14 +1569,14 @@ 'div', { className: c }, React.createElement(e, t), - !l.isValid && React.createElement(te, { mode: l.mode, issues: l.issues }) + !l.isValid && React.createElement(Q, { mode: l.mode, issues: l.issues }) ) ); }; }, 'withErrorHandling'); - function ce(e) { + function ae(e) { return ( - (ce = + (ae = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (e) { return typeof e; @@ -1602,10 +1589,10 @@ ? 'symbol' : typeof e; }), - ce(e) + ae(e) ); } - function ue(e, t) { + function ie(e, t) { var r = Object.keys(e); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); @@ -1617,35 +1604,35 @@ } return r; } - function se(e) { + function oe(e) { for (var t = 1; t < arguments.length; t++) { var r = null != arguments[t] ? arguments[t] : {}; t % 2 - ? ue(Object(r), !0).forEach(function (t) { - de(e, t, r[t]); + ? ie(Object(r), !0).forEach(function (t) { + le(e, t, r[t]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) - : ue(Object(r)).forEach(function (t) { + : ie(Object(r)).forEach(function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)); }); } return e; } - function de(e, t, r) { + function le(e, t, r) { return ( (t = (function (e) { var t = (function (e) { - if ('object' != ce(e) || !e) return e; + if ('object' != ae(e) || !e) return e; var t = e[Symbol.toPrimitive]; if (void 0 !== t) { var r = t.call(e, 'string'); - if ('object' != ce(r)) return r; + if ('object' != ae(r)) return r; throw new TypeError('@@toPrimitive must return a primitive value.'); } return String(e); })(e); - return 'symbol' == ce(t) ? t : t + ''; + return 'symbol' == ae(t) ? t : t + ''; })(t)) in e ? Object.defineProperty(e, t, { value: r, @@ -1657,9 +1644,9 @@ e ); } - function me(e) { + function ce(e) { return ( - (me = + (ce = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (e) { return typeof e; @@ -1672,10 +1659,10 @@ ? 'symbol' : typeof e; }), - me(e) + ce(e) ); } - (wp.hooks.addFilter('editor.BlockEdit', 'validation-api/with-error-handling', le), + (wp.hooks.addFilter('editor.BlockEdit', 'validation-api/with-error-handling', ne), void 0 === window.ValidationAPI && (window.ValidationAPI = {}), (window.ValidationAPI.useMetaField = function (e) { var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : '', @@ -1701,7 +1688,7 @@ l.hasErrors ? (c = 'validation-api-meta-error') : l.hasWarnings && (c = 'validation-api-meta-warning'), - se(se({}, l), {}, { wrapperClassName: c }) + oe(oe({}, l), {}, { wrapperClassName: c }) ); }, [e] @@ -1746,18 +1733,18 @@ (a = t), (n = (function (e) { var t = (function (e) { - if ('object' != me(e) || !e) return e; + if ('object' != ce(e) || !e) return e; var t = e[Symbol.toPrimitive]; if (void 0 !== t) { var r = t.call(e, 'string'); - if ('object' != me(r)) return r; + if ('object' != ce(r)) return r; throw new TypeError( '@@toPrimitive must return a primitive value.' ); } return String(e); })(e); - return 'symbol' == me(t) ? t : t + ''; + return 'symbol' == ce(t) ? t : t + ''; })(n)) in r ? Object.defineProperty(r, n, { value: a, diff --git a/src/admin.scss b/src/admin.scss index 00e16de..2ec5787 100644 --- a/src/admin.scss +++ b/src/admin.scss @@ -1,22 +1,22 @@ // Plugin Sidebar Icon Styles .has-meta-validation-warnings button[aria-controls="validation-api:validation-sidebar"].is-pressed { - background-color: var(--a11y-light-yellow); + background-color: var(--validaion-api-light-yellow); transition: background-color 0.2s ease; } .has-meta-validation-errors button[aria-controls="validation-api:validation-sidebar"].is-pressed { - background-color: var(--a11y-light-red); + background-color: var(--validaion-api-light-red); transition: background-color 0.2s ease; } .has-meta-validation-warnings button[aria-controls="validation-api:validation-sidebar"].is-pressed:hover { - background-color: var(--a11y-light-yellow); + background-color: var(--validaion-api-light-yellow); transition: background-color 0.2s ease; } .has-meta-validation-errors button[aria-controls="validation-api:validation-sidebar"].is-pressed:hover { - background-color: var(--a11y-light-red); + background-color: var(--validaion-api-light-red); transition: background-color 0.2s ease; } diff --git a/src/editor/components/BlockIndicator.js b/src/editor/components/BlockIndicator.js index 979dc91..a205fd2 100644 --- a/src/editor/components/BlockIndicator.js +++ b/src/editor/components/BlockIndicator.js @@ -4,11 +4,11 @@ import { useState } from '@wordpress/element'; import { Modal, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { error, caution } from '@wordpress/icons'; /** * Internal dependencies */ +import { ValidationIcon } from './ValidationIcon'; import { hasErrors, getErrors, getWarnings } from '../../shared/utils/validation'; /** @@ -38,7 +38,11 @@ export function BlockIndicator({ issues }) { const warnings = getWarnings(issues); // Set icon and CSS classes based on severity (errors take precedence) - const icon = hasBlockErrors ? error : caution; + const icon = hasBlockErrors ? ( + + ) : ( + + ); const className = hasBlockErrors ? 'validation-api-block-indicator validation-api-block-indicator--error' : 'validation-api-block-indicator validation-api-block-indicator--warning'; diff --git a/src/editor/components/ValidationIcon.js b/src/editor/components/ValidationIcon.js new file mode 100644 index 0000000..ac52adf --- /dev/null +++ b/src/editor/components/ValidationIcon.js @@ -0,0 +1,27 @@ +/** + * Validation API Sidebar Icon + * + * Renders the plugin sidebar icon at the WordPress-standard 24×24 coordinate + * grid. Path data is the original 16×16 artwork scaled by 1.5. + * + * @param {Object} props + * @param {string} [props.fill='currentColor'] - Fill colour for the icon paths. + */ +export function ValidationIcon({ fill = 'currentColor' }) { + return ( + + + + + ); +} diff --git a/src/editor/components/ValidationSidebar.js b/src/editor/components/ValidationSidebar.js index 31b3f81..422030c 100644 --- a/src/editor/components/ValidationSidebar.js +++ b/src/editor/components/ValidationSidebar.js @@ -11,6 +11,7 @@ import { getBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ +import { ValidationIcon } from './ValidationIcon'; import { GetInvalidBlocks, GetInvalidMeta, @@ -208,22 +209,8 @@ export function ValidationSidebar() { iconColor = '#dbc900'; } - // Accessibility icon SVG that changes color based on validation severity - const sidebarIcon = ( - - - - ); + // Icon that changes colour based on validation severity + const sidebarIcon = ; /** * Handle clicking on a block validation issue diff --git a/src/editor/components/index.js b/src/editor/components/index.js index 4291b4a..1d72f98 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -5,4 +5,5 @@ */ export { BlockIndicator } from './BlockIndicator'; +export { ValidationIcon } from './ValidationIcon'; export { ValidationSidebar } from './ValidationSidebar'; diff --git a/src/settings.scss b/src/settings.scss deleted file mode 100644 index 1dc2f69..0000000 --- a/src/settings.scss +++ /dev/null @@ -1,356 +0,0 @@ -@use "styles/variables"; - -/** - * Settings Styles - * - * DataViews-inspired table layout with extensible column architecture. - * Used across all settings pages (Core Blocks, Editor Validation, External Plugins). - */ - -// Admin page background -// Applied to all settings pages (core blocks, editor validation, external plugins) -body.toplevel_page_block-a11y-checks, -body.accessibility-validation_page_block-a11y-checks-post-page, -body[class*='accessibility-validation_page_block-a11y-checks-'] { - #wpcontent { - padding-left: 0; - } - - .wrap { - margin: 0; - } -} - -// Header section (React) -.validation-api-settings-header { - padding: var(--a11y-settings-space); - border-bottom: 1px solid var(--a11y-light-grey); - background: #fff; - - h1 { - margin: 0; - padding: 0; - font-size: 1.4rem; - font-weight: 500; - line-height: 1.3; - color: #1d2327; - } - - p { - font-size: 0.85rem; - color: var(--a11y-black); - margin: 5px 0 0 0; - } -} - -// Save notifications -.validation-api-settings-content .components-notice { - margin: calc(var(--a11y-settings-space) / 1.5) var(--a11y-settings-space); - background-color: var(--a11y-lightest-green); - border: 1px solid var(--a11y-green); - border-left: 5px solid var(--a11y-dark-green); - border-radius: 4px; -} - -// DataView container -.validation-api-dataview { - background: #fff; - margin: 32px 24px; - padding: 0; - border-radius: 4px; - overflow-x: auto; -} - -// Table container - using standard HTML table -.validation-api-dataview-table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - - &.widefat { - border: none; - } - - // Override WordPress widefat striped default styles - tbody tr, - tbody tr:nth-child(odd), - tbody tr:nth-child(even) { - background-color: #fff; - } - - tbody tr:hover { - background-color: var(--a11y-lightest-grey) !important; - } -} - -.validation-api-dataview-thead th, -.validation-api-dataview-table td { - padding: calc(var(--a11y-settings-space) / 2); - vertical-align: middle; - - &.validation-api-dataview-td-level { - padding-top: calc(calc(var(--a11y-settings-space) / 2) - 8px); - } -} - -// Table header -.validation-api-dataview-thead { - th { - font-size: var(--a11y-font-small); - font-weight: 500; - color: var(--a11y-black); - border-bottom: 1px solid var(--a11y-grey); - background: #fff; - text-align: left; - vertical-align: middle; - } - - // Set fixed widths for consistent column sizing across all tables - .validation-api-dataview-th-block { - min-width: 90px; - width: 10%; - } - - .validation-api-dataview-th-category { - min-width: 90px; - width: 10%; - } - - .validation-api-dataview-th-level { - min-width: 220px; - width: 220px; - } - - .validation-api-dataview-th-siteEditor { - width: 90px; - } - - // First column (check) will auto-fill remaining space - .validation-api-dataview-th-check { - min-width: 180px; - width: auto; - } -} - -.validation-api-dataview-th-content { - display: flex; - align-items: center; - gap: 2px; -} - -// Table cells -.validation-api-dataview-cell { - font-size: var(--a11y-font-small); - color: var(--a11y-black); - padding: calc(var(--a11y-settings-space) / 2); - border-bottom: 1px solid var(--a11y-light-grey); - vertical-align: middle; - text-align: left !important; - - &.validation-api-dataview-cell-level { - padding-top: calc(var(--a11y-settings-space) / 4); - } -} - -// Check description -.validation-api-check-description { - color: var(--a11y-black); -} - -// Block badge -.validation-api-block-badge, -.validation-api-category-badge { - display: inline-flex; - padding: 2px 8px; - background: var(--a11y-lightest-grey); - border: 1px solid var(--a11y-light-grey); - border-radius: 2px; - font-size: 0.65rem; - color: var(--a11y-black); - font-weight: 500; - white-space: nowrap; -} - -.validation-api-dataview-td-level { - .components-base-control { - width: 100%; - } - - .components-toggle-group-control { - border: 1px solid var(--a11y-grey); - background: #fff; - - &::before { - display: none; - } - - .components-toggle-group-control-option-base { - color: var(--a11y-black); - background: #fff; - - &:focus { - box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px #2271b1; - z-index: 1; - position: relative; - } - - &:hover:not([aria-checked='true']) { - background-color: var(--a11y-lightest-grey); - } - - &[aria-checked='true'] { - background: var(--wp-admin-theme-color); - color: #fff; - } - } - } -} - -// // Heading levels checkboxes -.validation-api-heading-levels-checkboxes { - display: flex; - gap: 20px; - justify-content: flex-end; - - .components-checkbox-control__label { - font-size: var(--a11y-font-small); - font-weight: 500; - color: var(--a11y-black); - } -} - -// // Actions footer -.validation-api-settings-actions { - display: flex; - align-items: center; - gap: 20px; - padding: 0 var(--a11y-settings-space); - - .components-button.is-primary:not(:disabled) { - background-color: #2271b1; - border-color: #2271b1; - - &:hover { - background-color: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); - } - } - - .validation-api-unsaved-notice { - font-size: var(--a11y-font-small); - color: var(--a11y-dark-red); - font-style: italic; - } -} - -// ======================================== -// Responsive Table Styles -// ======================================== - -// Tablet - reduce margins -@media screen and (max-width: 960px) { - .validation-api-settings-header, - .validation-api-settings-content .components-notice, - .validation-api-settings-actions { - margin-left: 24px; - margin-right: 24px; - padding-left: 24px; - padding-right: 24px; - } -} - -// Mobile - WordPress responsive table pattern -@media screen and (max-width: 782px) { - .validation-api-settings-header, - .validation-api-dataview, - .validation-api-settings-content .components-notice, - .validation-api-settings-actions { - margin-left: var(--a11y-settings-space-mobile); - margin-right: var(--a11y-settings-space-mobile); - padding-left: var(--a11y-settings-space-mobile); - padding-right: var(--a11y-settings-space-mobile); - } - - // Responsive table layout - .validation-api-dataview-table { - border: 0; - - thead { - display: none; - } - - tbody { - display: block; - } - - tr { - display: block; - margin-bottom: 16px; - border: 1px solid var(--a11y-light-grey); - border-radius: 4px; - background: #fff !important; - - &:last-child { - margin-bottom: 0; - } - } - - td { - display: block; - border: none; - text-align: left !important; - - &::before { - content: attr(data-colname) ": "; - font-weight: 600; - color: var(--a11y-dark-grey); - display: block; - margin-bottom: 4px; - font-size: 0.7rem; - text-transform: uppercase; - letter-spacing: 0.5px; - } - - &.validation-api-dataview-td-check { - padding-bottom: 12px; - margin-bottom: 12px; - border-bottom: 1px solid var(--a11y-light-grey); - - &::before { - margin-bottom: 6px; - } - } - - &.validation-api-dataview-td-level, - &.validation-api-dataview-td-siteEditor { - .components-toggle-group-control, - .components-toggle-control { - width: 100%; - } - } - } - } - - // Make heading levels checkboxes stack vertically - .validation-api-heading-levels-checkboxes { - flex-direction: column; - gap: 12px; - align-items: flex-start; - } - - // Settings actions stack vertically - .validation-api-settings-actions { - flex-direction: column; - align-items: stretch; - - .components-button { - width: 100%; - justify-content: center; - margin-bottom: 12px; - } - - .validation-api-unsaved-notice { - text-align: center; - } - } -} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 5c64e99..d534c01 100755 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,22 +1,22 @@ :root { - --a11y-light-blue: #dfe9ee; - --a11y-blue: #507a96; - --a11y-lightest-grey: #f7f7f7; - --a11y-light-grey: #e8e8e8; - --a11y-grey: #b9b9b9; - --a11y-medium-grey: #666; - --a11y-dark-grey: #474747; - --a11y-black: #1d2327; - --a11y-red: #d82000; - --a11y-light-red: #ffe4e0; - --a11y-dark-red: #a21800; - --a11y-yellow: #dbc900; - --a11y-light-yellow: #fffde2; - --a11y-dark-yellow: #807500; - --a11y-lightest-green: #f1fcf2; - --a11y-green: #2aad40; - --a11y-dark-green: #1b6027; - --a11y-border-width: 3px solid; - --a11y-settings-space: 32px; - --a11y-font-small: 0.8rem; + --validaion-api-light-blue: #dfe9ee; + --validaion-api-blue: #507a96; + --validaion-api-lightest-grey: #f7f7f7; + --validaion-api-light-grey: #e8e8e8; + --validaion-api-grey: #b9b9b9; + --validaion-api-medium-grey: #666; + --validaion-api-dark-grey: #474747; + --validaion-api-black: #1d2327; + --validaion-api-red: #d82000; + --validaion-api-light-red: #ffe4e0; + --validaion-api-dark-red: #a21800; + --validaion-api-yellow: #cbba00; + --validaion-api-light-yellow: #fffde2; + --validaion-api-dark-yellow: #807500; + --validaion-api-lightest-green: #f1fcf2; + --validaion-api-green: #2aad40; + --validaion-api-dark-green: #1b6027; + --validaion-api-border-width: 3px solid; + --validaion-api-settings-space: 32px; + --validaion-api-font-small: 0.8rem; } \ No newline at end of file diff --git a/src/styles/editor-validation.scss b/src/styles/editor-validation.scss index 071bbe0..3690e64 100644 --- a/src/styles/editor-validation.scss +++ b/src/styles/editor-validation.scss @@ -6,7 +6,7 @@ .validation-api-validation-item { width: 100%; padding: 12px 14px; - border-left: var(--a11y-border-width); + border-left: var(--validaion-api-border-width); margin-bottom: 12px; border-radius: 2px; @@ -16,13 +16,13 @@ } .validation-api-validation-item--error { - background-color: var(--a11y-light-red); - border-color: var(--a11y-red); + background-color: var(--validaion-api-light-red); + border-color: var(--validaion-api-red); } .validation-api-validation-item--warning { - background-color: var(--a11y-light-yellow); - border-color: var(--a11y-yellow); + background-color: var(--validaion-api-light-yellow); + border-color: var(--validaion-api-yellow); } .validation-api-validation-message { @@ -36,11 +36,11 @@ } .validation-api-validation-item--error .validation-api-validation-message { - color: var(--a11y-dark-red); + color: var(--validaion-api-dark-red); } .validation-api-validation-item--warning .validation-api-validation-message { - color: var(--a11y-dark-yellow); + color: var(--validaion-api-dark-yellow); } .validation-api-validation-description { diff --git a/src/styles/inline-indicators.scss b/src/styles/inline-indicators.scss index 0dd56e5..22392d5 100644 --- a/src/styles/inline-indicators.scss +++ b/src/styles/inline-indicators.scss @@ -8,8 +8,8 @@ .validation-api-block-indicator, .validation-api-meta-indicator { position: absolute; - bottom: 0; - left: 0; + top: -2px; + left: -2px; width: 24px; height: 24px; z-index: 20; @@ -25,21 +25,21 @@ width: 100%; height: 100%; padding: 0; - background-color: var(--a11y-light-red); - border: 1px solid var(--a11y-red); + background-color: var(--validaion-api-light-red); + border: 1px solid var(--validaion-api-red); cursor: pointer; transition: all 0.2s ease; svg { - fill: var(--a11y-dark-red); + fill: var(--validaion-api-dark-red); width: 18px; height: 18px; } &:hover { - background-color: var(--a11y-red); + background-color: var(--validaion-api-red); - svg { + svg path { fill: #fff; } } @@ -48,22 +48,22 @@ // Inline block and meta field warning buttons .validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button, .validation-api-meta-indicator--warning .validation-api-meta-indicator-button.components-button { - background-color: var(--a11y-light-yellow); - border-color: var(--a11y-yellow); - color: var(--a11y-yellow); + background-color: var(--validaion-api-light-yellow); + border-color: var(--validaion-api-yellow); + color: var(--validaion-api-yellow); // stylelint-disable-next-line no-descending-specificity svg { - fill: var(--a11y-dark-yellow); + fill: var(--validaion-api-dark-yellow); width: 20px; height: 20px; } &:hover { - background-color: var(--a11y-yellow); - border: 1px solid var(--a11y-yellow); + background-color: var(--validaion-api-yellow); + border-color: 1px solid var(--validaion-api-yellow); - svg { + svg path { fill: #fff; } } diff --git a/src/styles/inline-modal.scss b/src/styles/inline-modal.scss index 64c0f4a..4e20061 100644 --- a/src/styles/inline-modal.scss +++ b/src/styles/inline-modal.scss @@ -14,11 +14,11 @@ } .validation-api-indicator-errors .validation-api-indicator-section-title-circle { - background-color: var(--a11y-red); + background-color: var(--validaion-api-red); } .validation-api-indicator-warnings .validation-api-indicator-section-title-circle { - background-color: var(--a11y-yellow); + background-color: var(--validaion-api-yellow); } .validation-api-indicator-section + .validation-api-indicator-section { diff --git a/src/styles/meta-validation.scss b/src/styles/meta-validation.scss index ee985cc..f8f4f5c 100644 --- a/src/styles/meta-validation.scss +++ b/src/styles/meta-validation.scss @@ -1,29 +1,29 @@ .validation-api-meta-error .components-text-control__input, .validation-api-meta-error .components-textarea-control__input, .validation-api-meta-error .components-select-control__input { - border-left: 4px solid var(--a11y-red); + border-left: 4px solid var(--validaion-api-red); } .validation-api-meta-warning .components-text-control__input, .validation-api-meta-warning .components-textarea-control__input, .validation-api-meta-warning .components-select-control__input { - border-left: 4px solid var(--a11y-yellow); + border-left: 4px solid var(--validaion-api-yellow); } .validation-api-meta-error .components-text-control__input:focus, .validation-api-meta-error .components-textarea-control__input:focus, .validation-api-meta-error .components-select-control__input:focus { border: none; - border-left: 4px solid var(--a11y-red); - box-shadow: 0 0 0 1px var(--a11y-red); + border-left: 4px solid var(--validaion-api-red); + box-shadow: 0 0 0 1px var(--validaion-api-red); } .validation-api-meta-warning .components-text-control__input:focus, .validation-api-meta-warning .components-textarea-control__input:focus, .validation-api-meta-warning .components-select-control__input:focus { border: none; - border-left: 4px solid var(--a11y-yellow); - box-shadow: 0 0 0 1px var(--a11y-yellow); + border-left: 4px solid var(--validaion-api-yellow); + box-shadow: 0 0 0 1px var(--validaion-api-yellow); } .validation-api-error-text, @@ -34,9 +34,9 @@ } .validation-api-error-text { - color: var(--a11y-dark-red); + color: var(--validaion-api-dark-red); } .validation-api-warning-text { - color: var(--a11y-dark-yellow); + color: var(--validaion-api-dark-yellow); } \ No newline at end of file diff --git a/src/styles/validation-sidebar.scss b/src/styles/validation-sidebar.scss index a2aac02..90416aa 100644 --- a/src/styles/validation-sidebar.scss +++ b/src/styles/validation-sidebar.scss @@ -1,3 +1,7 @@ +.components-button.is-pressed .validation-api-sidebar-icon path { + fill: #fff; +} + .validation-api-errors-panel .components-panel__row + .components-panel__row, .validation-api-warnings-panel .components-panel__row + .components-panel__row { margin-top: 20px; @@ -15,11 +19,11 @@ } .validation-api-error-group .validation-api-indicator-circle { - background-color: var(--a11y-red); + background-color: var(--validaion-api-red); } .validation-api-warning-group .validation-api-indicator-circle { - background-color: var(--a11y-yellow); + background-color: var(--validaion-api-yellow); } .validation-api-error-group,