From d7dc10826c4c7469416c9a48409eedb1e892a371 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 4 Apr 2026 00:04:37 -0400 Subject: [PATCH 1/3] refactored notification display --- build/validation-api-rtl.css | 2 +- build/validation-api.asset.php | 2 +- build/validation-api.css | 2 +- build/validation-api.js | 333 ++++++++++------ ...ndicator.js => ValidationToolbarButton.js} | 40 +- src/editor/components/index.js | 2 +- src/editor/hoc/withBlockValidationClasses.js | 43 +++ src/editor/hoc/withErrorHandling.js | 53 ++- src/editor/store/blockValidationStore.js | 43 +++ src/editor/store/index.js | 11 + src/script.js | 1 + src/settings.scss | 356 ++++++++++++++++++ src/styles/_variables.scss | 3 +- src/styles/inline-indicators.scss | 34 +- 14 files changed, 748 insertions(+), 177 deletions(-) rename src/editor/components/{BlockIndicator.js => ValidationToolbarButton.js} (66%) create mode 100644 src/editor/hoc/withBlockValidationClasses.js create mode 100644 src/editor/store/blockValidationStore.js create mode 100644 src/editor/store/index.js create mode 100644 src/settings.scss diff --git a/build/validation-api-rtl.css b/build/validation-api-rtl.css index 87a7a4d..ef8baf3 100644 --- a/build/validation-api-rtl.css +++ b/build/validation-api-rtl.css @@ -1 +1 @@ -: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} +:root{--validaion-api-white:#fff9ef;--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:#f0dc00;--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-error:before,.validation-api-block-warning:before{border-radius:50%;content:"";height:10px;right:0;pointer-events:none;position:absolute;top:-8px;width:10px;z-index:20}.validation-api-block-error:before{background-color:var(--validaion-api-red);border:3px solid var(--validaion-api-white)}.validation-api-block-warning:before{background-color:var(--validaion-api-yellow);border:2px solid var(--validaion-api-light-yellow)}.validation-api-meta-indicator{height:24px;right:-2px;pointer-events:none;position:absolute;top:-2px;width:24px;z-index:20}.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-meta-indicator-button.components-button.has-icon svg{fill:var(--validaion-api-dark-red);height:18px;width:18px}.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--validaion-api-red)}.validation-api-meta-indicator-button.components-button.has-icon:hover svg path{fill:#fff}.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-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--validaion-api-dark-yellow);height:20px;width:20px}.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-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 e8eeb96..a5b4fd0 100644 --- a/build/validation-api.asset.php +++ b/build/validation-api.asset.php @@ -1 +1 @@ - array('wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '28273b41ee73fa8d23e0'); + array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => 'cfe495b6d5b7b58ca777'); diff --git a/build/validation-api.css b/build/validation-api.css index 75b01b6..41c75c0 100644 --- a/build/validation-api.css +++ b/build/validation-api.css @@ -1 +1 @@ -: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} +:root{--validaion-api-white:#fff9ef;--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:#f0dc00;--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-error:before,.validation-api-block-warning:before{border-radius:50%;content:"";height:10px;left:0;pointer-events:none;position:absolute;top:-8px;width:10px;z-index:20}.validation-api-block-error:before{background-color:var(--validaion-api-red);border:3px solid var(--validaion-api-white)}.validation-api-block-warning:before{background-color:var(--validaion-api-yellow);border:2px solid var(--validaion-api-light-yellow)}.validation-api-meta-indicator{height:24px;left:-2px;pointer-events:none;position:absolute;top:-2px;width:24px;z-index:20}.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-meta-indicator-button.components-button.has-icon svg{fill:var(--validaion-api-dark-red);height:18px;width:18px}.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--validaion-api-red)}.validation-api-meta-indicator-button.components-button.has-icon:hover svg path{fill:#fff}.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-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--validaion-api-dark-yellow);height:20px;width:20px}.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-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 7a59b36..03cff24 100644 --- a/build/validation-api.js +++ b/build/validation-api.js @@ -335,7 +335,7 @@ } return null; } - function R() { + function j() { var e, t = (null === (e = window.ValidationAPI) || void 0 === e ? void 0 : e.editorContext) || @@ -412,7 +412,7 @@ })(e, t) || (function (e, t) { if (e) { - if ('string' == typeof e) return j(e, t); + if ('string' == typeof e) return R(e, t); var r = {}.toString.call(e).slice(8, -1); return ( 'Object' === r && e.constructor && (r = e.constructor.name), @@ -420,7 +420,7 @@ ? Array.from(e) : 'Arguments' === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) - ? j(e, t) + ? R(e, t) : void 0 ); } @@ -432,7 +432,7 @@ })() ); } - function j(e, t) { + function R(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; @@ -541,7 +541,7 @@ e ); } - function V() { + function T() { for ( var e, t = (0, r.useSelect)(function (e) { @@ -569,7 +569,7 @@ } return o; } - function T(e, t) { + function B(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 B(e, t); + if ('string' == typeof e) return V(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) - ? B(e, t) + ? V(e, t) : void 0 ); } @@ -632,15 +632,15 @@ })() ); } - function B(e, t) { + function V(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 M = + var D = (null === (P = window.ValidationAPI) || void 0 === P ? void 0 : P.editorValidationRules) || {}; - function D() { + function M() { var e = (0, r.useSelect)(function (e) { var t = e('core/editor'), r = e('core/block-editor'); @@ -654,8 +654,8 @@ a = e.postType; if (!a || !n) return []; var i = (function (e, r) { - for (var n = M[e] || {}, a = [], i = 0, o = Object.entries(n); i < o.length; i++) { - var l = T(o[i], 2), + for (var n = D[e] || {}, a = [], i = 0, o = Object.entries(n); i < o.length; i++) { + var l = B(o[i], 2), c = l[0], u = l[1]; if ( @@ -684,9 +684,9 @@ i = 'core/editor', o = (0, r.useDispatch)(i), l = wp.data && wp.data.select && wp.data.select(i), - c = R(), - u = V(), - s = D(), + c = j(), + u = T(), + s = M(), d = o || {}, p = d.lockPostSaving, v = d.unlockPostSaving, @@ -759,8 +759,8 @@ null ); } - const W = window.wp.editor, - F = window.wp.components, + const F = window.wp.editor, + W = window.wp.components, U = window.wp.i18n, $ = window.wp.blocks; function q(e) { @@ -845,9 +845,9 @@ ); } function z() { - var e = R() || [], - t = V() || [], - a = D() || [], + var e = j() || [], + t = T() || [], + a = M() || [], i = (0, r.useDispatch)('core/block-editor').selectBlock, o = (0, n.useRef)(null), l = c(a, 'error'), @@ -889,7 +889,7 @@ 0 === y && 0 === b ? null : React.createElement( - W.PluginSidebar, + F.PluginSidebar, { name: 'validation-sidebar', title: (0, U.__)('Validation', 'validation-api'), @@ -898,7 +898,7 @@ }, y > 0 && React.createElement( - F.PanelBody, + W.PanelBody, { title: (0, U.sprintf)( /* translators: %d: number of errors */ /* translators: %d: number of errors */ @@ -910,7 +910,7 @@ }, s.length > 0 && React.createElement( - F.PanelRow, + W.PanelRow, null, React.createElement( 'div', @@ -959,7 +959,7 @@ ), m.length > 0 && React.createElement( - F.PanelRow, + W.PanelRow, null, React.createElement( 'div', @@ -992,7 +992,7 @@ ), p.length > 0 && React.createElement( - F.PanelRow, + W.PanelRow, null, React.createElement( 'div', @@ -1026,7 +1026,7 @@ ), b > 0 && React.createElement( - F.PanelBody, + W.PanelBody, { title: (0, U.sprintf)( /* translators: %d: number of warnings */ /* translators: %d: number of warnings */ @@ -1038,7 +1038,7 @@ }, f.length > 0 && React.createElement( - F.PanelRow, + W.PanelRow, null, React.createElement( 'div', @@ -1087,7 +1087,7 @@ ), d.length > 0 && React.createElement( - F.PanelRow, + W.PanelRow, null, React.createElement( 'div', @@ -1120,7 +1120,7 @@ ), v.length > 0 && React.createElement( - F.PanelRow, + W.PanelRow, null, React.createElement( 'div', @@ -1171,12 +1171,24 @@ }, } ); - function J(e, t) { + (0, e.registerPlugin)('validation-api', { + render: function () { + return React.createElement( + React.Fragment, + null, + React.createElement(x, null), + React.createElement(z, null) + ); + }, + }); + const J = window.wp.compose, + Q = window.wp.blockEditor; + 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 Q(e) { + function Y(e) { var t, r, a = e.issues, @@ -1230,7 +1242,7 @@ })(t, r) || (function (e, t) { if (e) { - if ('string' == typeof e) return J(e, t); + if ('string' == typeof e) return X(e, t); var r = {}.toString.call(e).slice(8, -1); return ( 'Object' === r && e.constructor && (r = e.constructor.name), @@ -1238,7 +1250,7 @@ ? Array.from(e) : 'Arguments' === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) - ? J(e, t) + ? X(e, t) : void 0 ); } @@ -1256,28 +1268,22 @@ 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'; + : React.createElement(q, { fill: '#d8c600' }); return React.createElement( React.Fragment, null, - React.createElement( - 'div', - { className: v }, - React.createElement(F.Button, { - icon: p, - onClick: function () { - return l(!0); - }, - className: 'validation-api-block-indicator-button', - 'aria-label': (0, U.__)('View block issues or concerns', 'validation-api'), - }) - ), + React.createElement(W.ToolbarButton, { + icon: p, + onClick: function () { + return l(!0); + }, + label: (0, U.__)('View block issues or concerns', 'validation-api'), + className: 'validation-api-toolbar-button', + isCompact: !0, + }), o && React.createElement( - F.Modal, + W.Modal, { title: (0, U.__)('Issues or Concerns', 'validation-api'), onRequestClose: function () { @@ -1356,14 +1362,16 @@ ) ); } - function X(e, t) { + function ee(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 Y(e) { + var te = new Map(), + re = Object.freeze({ mode: 'none', issues: [] }); + function ne(e) { return ( - (Y = + (ne = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (e) { return typeof e; @@ -1376,10 +1384,10 @@ ? 'symbol' : typeof e; }), - Y(e) + ne(e) ); } - function ee(e, t) { + function ae(e, t) { var r = Object.keys(e); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); @@ -1391,35 +1399,35 @@ } return r; } - function te(e) { + function ie(e) { for (var t = 1; t < arguments.length; t++) { var r = null != arguments[t] ? arguments[t] : {}; t % 2 - ? ee(Object(r), !0).forEach(function (t) { - re(e, t, r[t]); + ? ae(Object(r), !0).forEach(function (t) { + oe(e, t, r[t]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) - : ee(Object(r)).forEach(function (t) { + : ae(Object(r)).forEach(function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)); }); } return e; } - function re(e, t, r) { + function oe(e, t, r) { return ( (t = (function (e) { var t = (function (e) { - if ('object' != Y(e) || !e) return e; + if ('object' != ne(e) || !e) return e; var t = e[Symbol.toPrimitive]; if (void 0 !== t) { var r = t.call(e, 'string'); - if ('object' != Y(r)) return r; + if ('object' != ne(r)) return r; throw new TypeError('@@toPrimitive must return a primitive value.'); } return String(e); })(e); - return 'symbol' == Y(t) ? t : t + ''; + return 'symbol' == ne(t) ? t : t + ''; })(t)) in e ? Object.defineProperty(e, t, { value: r, @@ -1431,17 +1439,7 @@ 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) { + var le = (0, J.createHigherOrderComponent)(function (e) { return function (t) { var a = t.clientId, i = t.attributes, @@ -1510,7 +1508,7 @@ })(r, a) || (function (e, t) { if (e) { - if ('string' == typeof e) return X(e, t); + if ('string' == typeof e) return ee(e, t); var r = {}.toString.call(e).slice(8, -1); return ( 'Object' === r && @@ -1522,7 +1520,7 @@ /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test( r ) - ? X(e, t) + ? ee(e, t) : void 0 ); } @@ -1553,30 +1551,45 @@ })( function () { if (!o) return { isValid: !0, issues: [], mode: 'none' }; - var e = te(te({}, o), {}, { attributes: i || o.attributes }); + var e = ie(ie({}, o), {}, { attributes: i || o.attributes }); return g(e); }, [o, i], { delay: 300 } - ), - c = 'validation-api-block-wrapper'; + ); return ( - l.isValid || - ('error' === l.mode - ? (c += ' validation-api-block-error') - : 'warning' === l.mode && (c += ' validation-api-block-warning')), + (0, n.useEffect)( + function () { + return ( + (function (e, t) { + te.set(e, t); + })(a, l), + function () { + return (function (e) { + te.delete(e); + })(a); + } + ); + }, + [a, l] + ), React.createElement( - 'div', - { className: c }, + React.Fragment, + null, React.createElement(e, t), - !l.isValid && React.createElement(Q, { mode: l.mode, issues: l.issues }) + !l.isValid && + React.createElement( + Q.BlockControls, + { group: 'other' }, + React.createElement(Y, { issues: l.issues }) + ) ) ); }; }, 'withErrorHandling'); - function ae(e) { + function ce(e) { return ( - (ae = + (ce = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (e) { return typeof e; @@ -1589,10 +1602,24 @@ ? 'symbol' : typeof e; }), - ae(e) + ce(e) ); } - function ie(e, t) { + function ue() { + return ( + (ue = Object.assign + ? Object.assign.bind() + : function (e) { + for (var t = 1; t < arguments.length; t++) { + var r = arguments[t]; + for (var n in r) ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]); + } + return e; + }), + ue.apply(null, arguments) + ); + } + function se(e, t) { var r = Object.keys(e); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); @@ -1604,35 +1631,35 @@ } return r; } - function oe(e) { + function fe(e) { for (var t = 1; t < arguments.length; t++) { var r = null != arguments[t] ? arguments[t] : {}; t % 2 - ? ie(Object(r), !0).forEach(function (t) { - le(e, t, r[t]); + ? se(Object(r), !0).forEach(function (t) { + me(e, t, r[t]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) - : ie(Object(r)).forEach(function (t) { + : se(Object(r)).forEach(function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)); }); } return e; } - function le(e, t, r) { + function me(e, t, r) { return ( (t = (function (e) { var t = (function (e) { - if ('object' != ae(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' != ae(r)) return r; + if ('object' != ce(r)) return r; throw new TypeError('@@toPrimitive must return a primitive value.'); } return String(e); })(e); - return 'symbol' == ae(t) ? t : t + ''; + return 'symbol' == ce(t) ? t : t + ''; })(t)) in e ? Object.defineProperty(e, t, { value: r, @@ -1644,9 +1671,9 @@ e ); } - function ce(e) { + function de(e) { return ( - (ce = + (de = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (e) { return typeof e; @@ -1659,10 +1686,102 @@ ? 'symbol' : typeof e; }), - ce(e) + de(e) ); } - (wp.hooks.addFilter('editor.BlockEdit', 'validation-api/with-error-handling', ne), + function pe(e, t) { + var r = Object.keys(e); + if (Object.getOwnPropertySymbols) { + var n = Object.getOwnPropertySymbols(e); + (t && + (n = n.filter(function (t) { + return Object.getOwnPropertyDescriptor(e, t).enumerable; + })), + r.push.apply(r, n)); + } + return r; + } + function ve(e) { + for (var t = 1; t < arguments.length; t++) { + var r = null != arguments[t] ? arguments[t] : {}; + t % 2 + ? pe(Object(r), !0).forEach(function (t) { + ye(e, t, r[t]); + }) + : Object.getOwnPropertyDescriptors + ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) + : pe(Object(r)).forEach(function (t) { + Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)); + }); + } + return e; + } + function ye(e, t, r) { + return ( + (t = (function (e) { + var t = (function (e) { + if ('object' != de(e) || !e) return e; + var t = e[Symbol.toPrimitive]; + if (void 0 !== t) { + var r = t.call(e, 'string'); + if ('object' != de(r)) return r; + throw new TypeError('@@toPrimitive must return a primitive value.'); + } + return String(e); + })(e); + return 'symbol' == de(t) ? t : t + ''; + })(t)) in e + ? Object.defineProperty(e, t, { + value: r, + enumerable: !0, + configurable: !0, + writable: !0, + }) + : (e[t] = r), + e + ); + } + function be(e) { + return ( + (be = + 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator + ? function (e) { + return typeof e; + } + : function (e) { + return e && + 'function' == typeof Symbol && + e.constructor === Symbol && + e !== Symbol.prototype + ? 'symbol' + : typeof e; + }), + be(e) + ); + } + (wp.hooks.addFilter('editor.BlockEdit', 'validation-api/with-error-handling', le), + wp.hooks.addFilter( + 'editor.BlockListBlock', + 'validation-api/with-block-validation-classes', + function (e) { + return function (t) { + var r, + n = ((r = t.clientId), te.get(r) || re); + if ('none' === n.mode) return React.createElement(e, t); + var a = + 'error' === n.mode + ? 'validation-api-block-error' + : 'validation-api-block-warning', + i = t.wrapperProps || {}, + o = fe( + fe({}, i), + {}, + { className: [i.className, a].filter(Boolean).join(' ') } + ); + return React.createElement(e, ue({}, t, { wrapperProps: o })); + }; + } + ), void 0 === window.ValidationAPI && (window.ValidationAPI = {}), (window.ValidationAPI.useMetaField = function (e) { var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : '', @@ -1688,7 +1807,7 @@ l.hasErrors ? (c = 'validation-api-meta-error') : l.hasWarnings && (c = 'validation-api-meta-warning'), - oe(oe({}, l), {}, { wrapperClassName: c }) + ve(ve({}, l), {}, { wrapperClassName: c }) ); }, [e] @@ -1733,18 +1852,18 @@ (a = t), (n = (function (e) { var t = (function (e) { - if ('object' != ce(e) || !e) return e; + if ('object' != be(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' != be(r)) return r; throw new TypeError( '@@toPrimitive must return a primitive value.' ); } return String(e); })(e); - return 'symbol' == ce(t) ? t : t + ''; + return 'symbol' == be(t) ? t : t + ''; })(n)) in r ? Object.defineProperty(r, n, { value: a, diff --git a/src/editor/components/BlockIndicator.js b/src/editor/components/ValidationToolbarButton.js similarity index 66% rename from src/editor/components/BlockIndicator.js rename to src/editor/components/ValidationToolbarButton.js index a205fd2..ce3f275 100644 --- a/src/editor/components/BlockIndicator.js +++ b/src/editor/components/ValidationToolbarButton.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useState } from '@wordpress/element'; -import { Modal, Button } from '@wordpress/components'; +import { ToolbarButton, Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -12,54 +12,44 @@ import { ValidationIcon } from './ValidationIcon'; import { hasErrors, getErrors, getWarnings } from '../../shared/utils/validation'; /** - * Block Indicator Component + * Validation Toolbar Button * - * Displays a visual indicator icon in the upper-left corner of blocks with - * validation issues. The indicator shows an error or warning icon based on - * issue severity. Clicking the indicator opens a modal displaying all - * validation issues grouped by type and category. + * Renders a button in the block toolbar that opens a modal displaying + * all validation issues grouped by severity. The button icon color + * reflects the highest severity level (red for errors, yellow for warnings). * * @param {Object} props - The component props. * @param {Array} props.issues - Array of validation issues to display. */ -export function BlockIndicator({ issues }) { +export function ValidationToolbarButton({ issues }) { const [isModalOpen, setIsModalOpen] = useState(false); - // Don't render indicator if there are no issues if (!issues || issues.length === 0) { return null; } - // Check issue severity to determine which icon to display const hasBlockErrors = hasErrors(issues); - - // Separate issues by severity type const errors = getErrors(issues); const warnings = getWarnings(issues); - // Set icon and CSS classes based on severity (errors take precedence) const icon = hasBlockErrors ? ( ) : ( - + ); - const className = hasBlockErrors - ? 'validation-api-block-indicator validation-api-block-indicator--error' - : 'validation-api-block-indicator validation-api-block-indicator--warning'; const openModal = () => setIsModalOpen(true); const closeModal = () => setIsModalOpen(false); return ( <> -
-
+ {isModalOpen && (
- {/* Errors Section */} {errors.length > 0 && (

@@ -84,7 +73,6 @@ export function BlockIndicator({ issues }) {

)} - {/* Warnings Section */} {warnings.length > 0 && (

diff --git a/src/editor/components/index.js b/src/editor/components/index.js index 1d72f98..324ae23 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -4,6 +4,6 @@ * Barrel export for editor UI components. */ -export { BlockIndicator } from './BlockIndicator'; export { ValidationIcon } from './ValidationIcon'; export { ValidationSidebar } from './ValidationSidebar'; +export { ValidationToolbarButton } from './ValidationToolbarButton'; diff --git a/src/editor/hoc/withBlockValidationClasses.js b/src/editor/hoc/withBlockValidationClasses.js new file mode 100644 index 0000000..45a1565 --- /dev/null +++ b/src/editor/hoc/withBlockValidationClasses.js @@ -0,0 +1,43 @@ +/** + * Internal dependencies + */ +import { getBlockValidation } from '../store'; + +/** + * Adds validation CSS classes to the block's own wrapper element. + * + * Uses the editor.BlockListBlock filter with wrapperProps to inject + * classes directly onto the block's native DOM element, avoiding + * the need for an extra wrapper div. + * + * @param {Function} BlockListBlock The original BlockListBlock component. + * @return {Function} Wrapped component with validation classes. + */ +function withBlockValidationClasses(BlockListBlock) { + return props => { + const validation = getBlockValidation(props.clientId); + + if (validation.mode === 'none') { + return ; + } + + const validationClass = + validation.mode === 'error' + ? 'validation-api-block-error' + : 'validation-api-block-warning'; + + const existingWrapperProps = props.wrapperProps || {}; + const newWrapperProps = { + ...existingWrapperProps, + className: [existingWrapperProps.className, validationClass].filter(Boolean).join(' '), + }; + + return ; + }; +} + +wp.hooks.addFilter( + 'editor.BlockListBlock', + 'validation-api/with-block-validation-classes', + withBlockValidationClasses +); diff --git a/src/editor/hoc/withErrorHandling.js b/src/editor/hoc/withErrorHandling.js index ec107b6..2dd3d57 100644 --- a/src/editor/hoc/withErrorHandling.js +++ b/src/editor/hoc/withErrorHandling.js @@ -3,44 +3,42 @@ */ import { createHigherOrderComponent } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; +import { BlockControls } from '@wordpress/block-editor'; /** * Internal dependencies */ import { validateBlock } from '../validation/blocks'; -import { BlockIndicator as Indicator } from '../components/BlockIndicator'; +import { ValidationToolbarButton } from '../components/ValidationToolbarButton'; import { useDebouncedValidation } from '../../shared/hooks'; +import { setBlockValidation, clearBlockValidation } from '../store'; /** * Higher-order component that adds validation indicators to blocks. * - * Wraps the block editor component to display validation errors and warnings - * based on registered block validation rules. Uses debounced validation to - * prevent focus loss during typing. Always renders the same DOM structure - * to avoid React unmount/remount cycles. + * Runs debounced validation on each block and: + * - Syncs the result to the shared validation store so the + * editor.BlockListBlock filter can apply CSS classes. + * - Renders a toolbar button (via BlockControls) when issues exist, + * allowing users to view the full issue list in a modal. */ const withErrorHandling = createHigherOrderComponent(BlockEdit => { return props => { const { clientId, attributes } = props; - // Get the block data from the store - // The block object is needed for validation, including name, innerBlocks, etc. const block = useSelect( select => { return select('core/block-editor').getBlock(clientId); }, - [clientId] // Dependencies: only clientId needed as attributes from props trigger re-render + [clientId] ); - // Debounced validation prevents rapid re-renders during typing. - // Runs immediately on mount, then debounces subsequent changes. const validationResult = useDebouncedValidation( () => { if (!block) { return { isValid: true, issues: [], mode: 'none' }; } - // Use attributes from props for validation responsiveness. - // Props attributes update before the store. const blockToValidate = { ...block, attributes: attributes || block.attributes, @@ -51,33 +49,24 @@ const withErrorHandling = createHigherOrderComponent(BlockEdit => { { delay: 300 } ); - // Always render the same DOM structure to prevent focus loss. - // Toggling between and

causes - // React to unmount and remount BlockEdit, stealing keyboard focus. - let wrapperClass = 'validation-api-block-wrapper'; - if (!validationResult.isValid) { - if (validationResult.mode === 'error') { - wrapperClass += ' validation-api-block-error'; - } else if (validationResult.mode === 'warning') { - wrapperClass += ' validation-api-block-warning'; - } - } + // Sync validation state to the shared store so the + // editor.BlockListBlock filter can read it for CSS classes. + useEffect(() => { + setBlockValidation(clientId, validationResult); + return () => clearBlockValidation(clientId); + }, [clientId, validationResult]); return ( -
+ <> {!validationResult.isValid && ( - + + + )} -
+ ); }; }, 'withErrorHandling'); -/** - * Register the HOC with WordPress block editor - * - * This filter intercepts all block editor components and wraps them - * with our validation and error handling functionality. - */ wp.hooks.addFilter('editor.BlockEdit', 'validation-api/with-error-handling', withErrorHandling); diff --git a/src/editor/store/blockValidationStore.js b/src/editor/store/blockValidationStore.js new file mode 100644 index 0000000..337696e --- /dev/null +++ b/src/editor/store/blockValidationStore.js @@ -0,0 +1,43 @@ +/** + * Block Validation Store + * + * Module-level Map that shares validation state between the + * editor.BlockEdit filter (writes) and editor.BlockListBlock filter (reads). + * This avoids the overhead of a full WordPress data store while keeping + * both filters in sync. + */ + +const validationMap = new Map(); + +const defaultResult = Object.freeze({ mode: 'none', issues: [] }); + +/** + * Store a block's validation result. + * + * @param {string} clientId Block client ID. + * @param {Object} result Validation result. + * @param {string} result.mode 'none' | 'error' | 'warning' + * @param {Array} result.issues Array of issue objects. + */ +export function setBlockValidation(clientId, result) { + validationMap.set(clientId, result); +} + +/** + * Read a block's validation result. + * + * @param {string} clientId Block client ID. + * @return {Object} Validation result or default (mode: 'none', issues: []). + */ +export function getBlockValidation(clientId) { + return validationMap.get(clientId) || defaultResult; +} + +/** + * Remove a block's validation result (call on unmount). + * + * @param {string} clientId Block client ID. + */ +export function clearBlockValidation(clientId) { + validationMap.delete(clientId); +} diff --git a/src/editor/store/index.js b/src/editor/store/index.js new file mode 100644 index 0000000..a963a86 --- /dev/null +++ b/src/editor/store/index.js @@ -0,0 +1,11 @@ +/** + * Store + * + * Barrel export for editor store utilities. + */ + +export { + setBlockValidation, + getBlockValidation, + clearBlockValidation, +} from './blockValidationStore'; diff --git a/src/script.js b/src/script.js index df08b4c..080e785 100644 --- a/src/script.js +++ b/src/script.js @@ -4,6 +4,7 @@ import './editor/register'; // Validate blocks import './editor/validation/blocks/validateBlock'; import './editor/hoc/withErrorHandling'; +import './editor/hoc/withBlockValidationClasses'; // Editor Validation import './editor/validation/editor/validateEditor'; diff --git a/src/settings.scss b/src/settings.scss new file mode 100644 index 0000000..1dc2f69 --- /dev/null +++ b/src/settings.scss @@ -0,0 +1,356 @@ +@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 d534c01..2ba606a 100755 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,4 +1,5 @@ :root { + --validaion-api-white: #fff9ef; --validaion-api-light-blue: #dfe9ee; --validaion-api-blue: #507a96; --validaion-api-lightest-grey: #f7f7f7; @@ -10,7 +11,7 @@ --validaion-api-red: #d82000; --validaion-api-light-red: #ffe4e0; --validaion-api-dark-red: #a21800; - --validaion-api-yellow: #cbba00; + --validaion-api-yellow: #f0dc00; --validaion-api-light-yellow: #fffde2; --validaion-api-dark-yellow: #807500; --validaion-api-lightest-green: #f1fcf2; diff --git a/src/styles/inline-indicators.scss b/src/styles/inline-indicators.scss index 22392d5..e356c89 100644 --- a/src/styles/inline-indicators.scss +++ b/src/styles/inline-indicators.scss @@ -1,11 +1,33 @@ -// Block wrapper needs relative positioning for absolute indicator +// Block validation indicator — CSS-only colored dot +// Classes are applied to the block's own element via editor.BlockListBlock wrapperProps .validation-api-block-error, .validation-api-block-warning { position: relative; + + &::before { + content: ''; + position: absolute; + top: -8px; + left: 0; + width: 10px; + height: 10px; + border-radius: 50%; + z-index: 20; + pointer-events: none; + } +} + +.validation-api-block-error::before { + background-color: var(--validaion-api-red); + border: 3px solid var(--validaion-api-white); +} + +.validation-api-block-warning::before { + background-color: var(--validaion-api-yellow); + border: 2px solid var(--validaion-api-light-yellow); } -// Inline block and meta field indicators -.validation-api-block-indicator, +// Inline meta field indicators .validation-api-meta-indicator { position: absolute; top: -2px; @@ -16,8 +38,7 @@ pointer-events: none; } -// Inline block and meta field indicator buttons -.validation-api-block-indicator-button.components-button.has-icon, +// Inline meta field indicator buttons .validation-api-meta-indicator-button.components-button.has-icon { pointer-events: all; position: absolute; @@ -45,8 +66,7 @@ } } -// Inline block and meta field warning buttons -.validation-api-block-indicator--warning .validation-api-block-indicator-button.components-button, +// Inline meta field warning buttons .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); From ecb31b6f82185f194f183ed006ef7b2583647ad3 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 4 Apr 2026 09:16:41 -0400 Subject: [PATCH 2/3] change editor styles --- build/validation-api-rtl.css | 2 +- build/validation-api.asset.php | 2 +- build/validation-api.css | 2 +- build/validation-api.js | 36 +++----- src/admin.scss | 8 +- .../components/ValidationToolbarButton.js | 20 ++-- src/editor/hoc/withErrorHandling.js | 2 +- src/styles.scss | 2 +- src/styles/_variables.scss | 42 ++++----- src/styles/editor-validation.scss | 14 +-- src/styles/inline-indicators.scss | 92 ++++--------------- src/styles/inline-modal.scss | 37 ++++---- src/styles/meta-validation.scss | 14 ++- src/styles/validation-sidebar.scss | 84 ++++++++--------- 14 files changed, 143 insertions(+), 214 deletions(-) diff --git a/build/validation-api-rtl.css b/build/validation-api-rtl.css index ef8baf3..f01039a 100644 --- a/build/validation-api-rtl.css +++ b/build/validation-api-rtl.css @@ -1 +1 @@ -:root{--validaion-api-white:#fff9ef;--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:#f0dc00;--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-error:before,.validation-api-block-warning:before{border-radius:50%;content:"";height:10px;right:0;pointer-events:none;position:absolute;top:-8px;width:10px;z-index:20}.validation-api-block-error:before{background-color:var(--validaion-api-red);border:3px solid var(--validaion-api-white)}.validation-api-block-warning:before{background-color:var(--validaion-api-yellow);border:2px solid var(--validaion-api-light-yellow)}.validation-api-meta-indicator{height:24px;right:-2px;pointer-events:none;position:absolute;top:-2px;width:24px;z-index:20}.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-meta-indicator-button.components-button.has-icon svg{fill:var(--validaion-api-dark-red);height:18px;width:18px}.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--validaion-api-red)}.validation-api-meta-indicator-button.components-button.has-icon:hover svg path{fill:#fff}.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-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--validaion-api-dark-yellow);height:20px;width:20px}.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-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} +:root{--validation-api-white:#fff;--validation-api-light-blue:#dfe9ee;--validation-api-blue:#507a96;--validation-api-lightest-grey:#f7f7f7;--validation-api-light-grey:#e8e8e8;--validation-api-grey:#b9b9b9;--validation-api-medium-grey:#666;--validation-api-dark-grey:#474747;--validation-api-black:#1d2327;--validation-api-red:#d82000;--validation-api-light-red:#ffe4e0;--validation-api-dark-red:#a21800;--validation-api-yellow:#f0dc00;--validation-api-light-yellow:#fffde2;--validation-api-dark-yellow:#807500;--validation-api-lightest-green:#f1fcf2;--validation-api-green:#2aad40;--validation-api-dark-green:#1b6027;--validation-api-border-width:3px solid;--validation-api-settings-space:32px;--validation-api-font-small:0.8rem}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-error:before,.validation-api-block-warning:before{clip-path:polygon(0 0,100% 0,0 100%);content:"";height:15px;right:-1px;pointer-events:none;position:absolute;top:-1px;width:15px;z-index:20}.validation-api-block-error:after,.validation-api-block-warning:after{box-shadow:0 0 0 2px var(--validation-api-white)}.validation-api-block-error:before{background-color:var(--validation-api-red)}.validation-api-block-warning:before{background-color:var(--validation-api-yellow)}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-left:8px;vertical-align:middle;width:10px}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validation-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validation-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:20px}h2.validation-api-indicator-section-title{font-size:14px;line-height:1.3;margin:0 0 10px}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{font-size:12px;margin:0 3px 0 0;padding:0 28px 0 0}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{list-style-type:disc;margin:0;padding:0 0 4px}.validation-api-indicator-modal-content .validation-api-indicator-errors li:last-child,.validation-api-indicator-modal-content .validation-api-indicator-warnings li:last-child{padding-bottom: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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validation-api-dark-red)}.validation-api-warning-text{color:var(--validation-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-left:6px;vertical-align:middle;width:10px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--validation-api-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--validation-api-yellow)} diff --git a/build/validation-api.asset.php b/build/validation-api.asset.php index a5b4fd0..4e447c7 100644 --- a/build/validation-api.asset.php +++ b/build/validation-api.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => 'cfe495b6d5b7b58ca777'); + array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '5430810632f67c90abea'); diff --git a/build/validation-api.css b/build/validation-api.css index 41c75c0..1648e43 100644 --- a/build/validation-api.css +++ b/build/validation-api.css @@ -1 +1 @@ -:root{--validaion-api-white:#fff9ef;--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:#f0dc00;--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-error:before,.validation-api-block-warning:before{border-radius:50%;content:"";height:10px;left:0;pointer-events:none;position:absolute;top:-8px;width:10px;z-index:20}.validation-api-block-error:before{background-color:var(--validaion-api-red);border:3px solid var(--validaion-api-white)}.validation-api-block-warning:before{background-color:var(--validaion-api-yellow);border:2px solid var(--validaion-api-light-yellow)}.validation-api-meta-indicator{height:24px;left:-2px;pointer-events:none;position:absolute;top:-2px;width:24px;z-index:20}.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-meta-indicator-button.components-button.has-icon svg{fill:var(--validaion-api-dark-red);height:18px;width:18px}.validation-api-meta-indicator-button.components-button.has-icon:hover{background-color:var(--validaion-api-red)}.validation-api-meta-indicator-button.components-button.has-icon:hover svg path{fill:#fff}.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-meta-indicator--warning .validation-api-meta-indicator-button.components-button svg{fill:var(--validaion-api-dark-yellow);height:20px;width:20px}.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-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} +:root{--validation-api-white:#fff;--validation-api-light-blue:#dfe9ee;--validation-api-blue:#507a96;--validation-api-lightest-grey:#f7f7f7;--validation-api-light-grey:#e8e8e8;--validation-api-grey:#b9b9b9;--validation-api-medium-grey:#666;--validation-api-dark-grey:#474747;--validation-api-black:#1d2327;--validation-api-red:#d82000;--validation-api-light-red:#ffe4e0;--validation-api-dark-red:#a21800;--validation-api-yellow:#f0dc00;--validation-api-light-yellow:#fffde2;--validation-api-dark-yellow:#807500;--validation-api-lightest-green:#f1fcf2;--validation-api-green:#2aad40;--validation-api-dark-green:#1b6027;--validation-api-border-width:3px solid;--validation-api-settings-space:32px;--validation-api-font-small:0.8rem}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-error:before,.validation-api-block-warning:before{clip-path:polygon(0 0,100% 0,0 100%);content:"";height:15px;left:-1px;pointer-events:none;position:absolute;top:-1px;width:15px;z-index:20}.validation-api-block-error:after,.validation-api-block-warning:after{box-shadow:0 0 0 2px var(--validation-api-white)}.validation-api-block-error:before{background-color:var(--validation-api-red)}.validation-api-block-warning:before{background-color:var(--validation-api-yellow)}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-right:8px;vertical-align:middle;width:10px}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validation-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validation-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:20px}h2.validation-api-indicator-section-title{font-size:14px;line-height:1.3;margin:0 0 10px}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{font-size:12px;margin:0 0 0 3px;padding:0 0 0 28px}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{list-style-type:disc;margin:0;padding:0 0 4px}.validation-api-indicator-modal-content .validation-api-indicator-errors li:last-child,.validation-api-indicator-modal-content .validation-api-indicator-warnings li:last-child{padding-bottom: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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validation-api-dark-red)}.validation-api-warning-text{color:var(--validation-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-right:6px;vertical-align:middle;width:10px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--validation-api-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--validation-api-yellow)} diff --git a/build/validation-api.js b/build/validation-api.js index 03cff24..1d3b284 100644 --- a/build/validation-api.js +++ b/build/validation-api.js @@ -1302,17 +1302,12 @@ 'validation-api-indicator-section validation-api-indicator-errors', }, React.createElement( - 'p', - null, - React.createElement( - 'strong', - { className: 'validation-api-indicator-section-title' }, - React.createElement('span', { - className: - 'validation-api-indicator-section-title-circle', - }), - (0, U.__)('Errors', 'validation-api') - ) + 'h2', + { className: 'validation-api-indicator-section-title' }, + React.createElement('span', { + className: 'validation-api-indicator-section-title-circle', + }), + (0, U.__)('Errors', 'validation-api') ), React.createElement( 'ul', @@ -1334,17 +1329,12 @@ 'validation-api-indicator-section validation-api-indicator-warnings', }, React.createElement( - 'p', - null, - React.createElement( - 'strong', - { className: 'validation-api-indicator-section-title' }, - React.createElement('span', { - className: - 'validation-api-indicator-section-title-circle', - }), - (0, U.__)('Warnings', 'validation-api') - ) + 'h2', + { className: 'validation-api-indicator-section-title' }, + React.createElement('span', { + className: 'validation-api-indicator-section-title-circle', + }), + (0, U.__)('Warnings', 'validation-api') ), React.createElement( 'ul', @@ -1580,7 +1570,7 @@ !l.isValid && React.createElement( Q.BlockControls, - { group: 'other' }, + { group: 'block' }, React.createElement(Y, { issues: l.issues }) ) ) diff --git a/src/admin.scss b/src/admin.scss index 2ec5787..84fb2e4 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(--validaion-api-light-yellow); + background-color: var(--validation-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(--validaion-api-light-red); + background-color: var(--validation-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(--validaion-api-light-yellow); + background-color: var(--validation-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(--validaion-api-light-red); + background-color: var(--validation-api-light-red); transition: background-color 0.2s ease; } diff --git a/src/editor/components/ValidationToolbarButton.js b/src/editor/components/ValidationToolbarButton.js index ce3f275..4e55cf1 100644 --- a/src/editor/components/ValidationToolbarButton.js +++ b/src/editor/components/ValidationToolbarButton.js @@ -59,12 +59,10 @@ export function ValidationToolbarButton({ issues }) {
{errors.length > 0 && (
-

- - - {__('Errors', 'validation-api')} - -

+

+ + {__('Errors', 'validation-api')} +

    {errors.map((issue, index) => (
  • {issue.error_msg}
    • @@ -75,12 +73,10 @@ export function ValidationToolbarButton({ issues }) { {warnings.length > 0 && (
    -

    - - - {__('Warnings', 'validation-api')} - -

    +

    + + {__('Warnings', 'validation-api')} +

      {warnings.map((warning, index) => (
    • diff --git a/src/editor/hoc/withErrorHandling.js b/src/editor/hoc/withErrorHandling.js index 2dd3d57..a05a06a 100644 --- a/src/editor/hoc/withErrorHandling.js +++ b/src/editor/hoc/withErrorHandling.js @@ -60,7 +60,7 @@ const withErrorHandling = createHigherOrderComponent(BlockEdit => { <> {!validationResult.isValid && ( - + )} diff --git a/src/styles.scss b/src/styles.scss index 7437271..376885c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,5 @@ @use "./styles/variables"; -@use './styles/editor-validation'; +// @use './styles/editor-validation'; @use './styles/inline-indicators'; @use './styles/inline-modal'; @use './styles/meta-validation'; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 2ba606a..732b725 100755 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,23 +1,23 @@ :root { - --validaion-api-white: #fff9ef; - --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: #f0dc00; - --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-white: #fff; + --validation-api-light-blue: #dfe9ee; + --validation-api-blue: #507a96; + --validation-api-lightest-grey: #f7f7f7; + --validation-api-light-grey: #e8e8e8; + --validation-api-grey: #b9b9b9; + --validation-api-medium-grey: #666; + --validation-api-dark-grey: #474747; + --validation-api-black: #1d2327; + --validation-api-red: #d82000; + --validation-api-light-red: #ffe4e0; + --validation-api-dark-red: #a21800; + --validation-api-yellow: #f0dc00; + --validation-api-light-yellow: #fffde2; + --validation-api-dark-yellow: #807500; + --validation-api-lightest-green: #f1fcf2; + --validation-api-green: #2aad40; + --validation-api-dark-green: #1b6027; + --validation-api-border-width: 3px solid; + --validation-api-settings-space: 32px; + --validation-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 3690e64..c818b64 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(--validaion-api-border-width); + border-left: var(--validation-api-border-width); margin-bottom: 12px; border-radius: 2px; @@ -16,13 +16,13 @@ } .validation-api-validation-item--error { - background-color: var(--validaion-api-light-red); - border-color: var(--validaion-api-red); + background-color: var(--validation-api-light-red); + border-color: var(--validation-api-red); } .validation-api-validation-item--warning { - background-color: var(--validaion-api-light-yellow); - border-color: var(--validaion-api-yellow); + background-color: var(--validation-api-light-yellow); + border-color: var(--validation-api-yellow); } .validation-api-validation-message { @@ -36,11 +36,11 @@ } .validation-api-validation-item--error .validation-api-validation-message { - color: var(--validaion-api-dark-red); + color: var(--validation-api-dark-red); } .validation-api-validation-item--warning .validation-api-validation-message { - color: var(--validaion-api-dark-yellow); + color: var(--validation-api-dark-yellow); } .validation-api-validation-description { diff --git a/src/styles/inline-indicators.scss b/src/styles/inline-indicators.scss index e356c89..c744473 100644 --- a/src/styles/inline-indicators.scss +++ b/src/styles/inline-indicators.scss @@ -3,88 +3,28 @@ .validation-api-block-error, .validation-api-block-warning { position: relative; - - &::before { - content: ''; - position: absolute; - top: -8px; - left: 0; - width: 10px; - height: 10px; - border-radius: 50%; + + &::before { + content: ''; + position: absolute; + top: -1px; + left: -1px; + width: 15px; + height: 15px; + clip-path: polygon(0 0, 100% 0, 0 100%); z-index: 20; pointer-events: none; - } + } + + &::after { + box-shadow: 0 0 0 2px var(--validation-api-white); + } } .validation-api-block-error::before { - background-color: var(--validaion-api-red); - border: 3px solid var(--validaion-api-white); + background-color: var(--validation-api-red); } .validation-api-block-warning::before { - background-color: var(--validaion-api-yellow); - border: 2px solid var(--validaion-api-light-yellow); -} - -// Inline meta field indicators -.validation-api-meta-indicator { - position: absolute; - top: -2px; - left: -2px; - width: 24px; - height: 24px; - z-index: 20; - pointer-events: none; -} - -// Inline meta field indicator buttons -.validation-api-meta-indicator-button.components-button.has-icon { - pointer-events: all; - position: absolute; - min-width: 0; - width: 100%; - height: 100%; - padding: 0; - background-color: var(--validaion-api-light-red); - border: 1px solid var(--validaion-api-red); - cursor: pointer; - transition: all 0.2s ease; - - svg { - fill: var(--validaion-api-dark-red); - width: 18px; - height: 18px; - } - - &:hover { - background-color: var(--validaion-api-red); - - svg path { - fill: #fff; - } - } -} - -// Inline meta field warning buttons -.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); - - // stylelint-disable-next-line no-descending-specificity - svg { - fill: var(--validaion-api-dark-yellow); - width: 20px; - height: 20px; - } - - &:hover { - background-color: var(--validaion-api-yellow); - border-color: 1px solid var(--validaion-api-yellow); - - svg path { - fill: #fff; - } - } + background-color: var(--validation-api-yellow); } diff --git a/src/styles/inline-modal.scss b/src/styles/inline-modal.scss index 4e20061..c4fa8fd 100644 --- a/src/styles/inline-modal.scss +++ b/src/styles/inline-modal.scss @@ -1,43 +1,48 @@ .validation-api-indicator-errors .validation-api-indicator-section-title-circle, .validation-api-indicator-warnings .validation-api-indicator-section-title-circle { - width: 8px; - height: 8px; - border-radius: 50%; + width: 10px; + height: 10px; + border-radius: 2px; display: inline-block; margin-right: 8px; vertical-align: middle; margin-bottom: 2px; } -.validation-api-indicator-category-label { - font-style: italic; -} - .validation-api-indicator-errors .validation-api-indicator-section-title-circle { - background-color: var(--validaion-api-red); + background-color: var(--validation-api-red); } .validation-api-indicator-warnings .validation-api-indicator-section-title-circle { - background-color: var(--validaion-api-yellow); + background-color: var(--validation-api-yellow); } .validation-api-indicator-section + .validation-api-indicator-section { - margin-top: 24px; + margin-top: 20px; +} + +h2.validation-api-indicator-section-title { + font-size: 14px; + line-height: 1.3; + margin: 0 0 10px 0; } .validation-api-indicator-modal-content .validation-api-indicator-errors, .validation-api-indicator-modal-content .validation-api-indicator-warnings { - p, ul { - margin: 0; - } - ul { + font-size: 12px; + margin: 0; margin-left: 3px; - padding: 4px 0 2px 14px; + padding: 0 0 0 28px; } li { - padding: 4px 0 4px 0; + padding: 0 0 4px 0; margin: 0; + list-style-type: disc; + + &:last-child { + padding-bottom: 0; + } } } diff --git a/src/styles/meta-validation.scss b/src/styles/meta-validation.scss index f8f4f5c..8ddfbaf 100644 --- a/src/styles/meta-validation.scss +++ b/src/styles/meta-validation.scss @@ -1,29 +1,27 @@ .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(--validaion-api-red); + border-left: 3px solid var(--validation-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(--validaion-api-yellow); + border-left: 3px solid var(--validation-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(--validaion-api-red); - box-shadow: 0 0 0 1px var(--validaion-api-red); + border-left: 3px solid var(--validation-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(--validaion-api-yellow); - box-shadow: 0 0 0 1px var(--validaion-api-yellow); + border-left: 3px solid var(--validation-api-yellow); } .validation-api-error-text, @@ -34,9 +32,9 @@ } .validation-api-error-text { - color: var(--validaion-api-dark-red); + color: var(--validation-api-dark-red); } .validation-api-warning-text { - color: var(--validaion-api-dark-yellow); + color: var(--validation-api-dark-yellow); } \ No newline at end of file diff --git a/src/styles/validation-sidebar.scss b/src/styles/validation-sidebar.scss index 90416aa..7c56ebf 100644 --- a/src/styles/validation-sidebar.scss +++ b/src/styles/validation-sidebar.scss @@ -2,64 +2,64 @@ 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-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 { - width: 8px; - height: 8px; - border-radius: 50%; + width: 10px; + height: 10px; + border-radius: 2px; display: inline-block; - margin-right: 8px; + margin-right: 6px; vertical-align: middle; margin-bottom: 2px; } .validation-api-error-group .validation-api-indicator-circle { - background-color: var(--validaion-api-red); + background-color: var(--validation-api-red); } .validation-api-warning-group .validation-api-indicator-circle { - background-color: var(--validaion-api-yellow); + background-color: var(--validation-api-yellow); } -.validation-api-error-group, -.validation-api-warning-group { - p, ul { - line-height: 1.4; - margin: 0; - } +// .validation-api-error-group, +// .validation-api-warning-group { +// p, ul { +// line-height: 1.4; +// margin: 0; +// } - ul { - margin-left: 3px; - padding: 4px 0 2px 14px; - } +// ul { +// margin-left: 3px; +// padding: 4px 0 2px 14px; +// } - li { - padding: 4px 0; - margin: 0; +// li { +// padding: 4px 0; +// margin: 0; - &:last-child { - padding-bottom: 0; - } - } -} +// &:last-child { +// padding-bottom: 0; +// } +// } +// } -.validation-api-error-group .validation-api-issue-link, -.validation-api-warning-group .validation-api-issue-link { - cursor: pointer; - font-weight: 400; - text-decoration: underline; - padding: 0; - margin: 0; - border: none; - background: none; - color: var(--wp-admin-theme-color); +// .validation-api-error-group .validation-api-issue-link, +// .validation-api-warning-group .validation-api-issue-link { +// cursor: pointer; +// font-weight: 400; +// text-decoration: underline; +// padding: 0; +// margin: 0; +// border: none; +// background: none; +// color: var(--wp-admin-theme-color); - &:hover { - color: #135e96; - } -} \ No newline at end of file +// &:hover { +// color: #135e96; +// } +// } \ No newline at end of file From df70f2d3d7885cc794ec0757d7d1301e3c01dbd4 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 4 Apr 2026 09:51:27 -0400 Subject: [PATCH 3/3] update indicator styles --- build/validation-api-rtl.css | 2 +- build/validation-api.asset.php | 2 +- build/validation-api.css | 2 +- build/validation-api.js | 148 +++++++-------------- src/editor/components/ValidationSidebar.js | 30 +---- src/styles.scss | 1 - src/styles/editor-validation.scss | 51 ------- src/styles/validation-sidebar.scss | 95 ++++++------- 8 files changed, 107 insertions(+), 224 deletions(-) delete mode 100644 src/styles/editor-validation.scss diff --git a/build/validation-api-rtl.css b/build/validation-api-rtl.css index f01039a..6165f60 100644 --- a/build/validation-api-rtl.css +++ b/build/validation-api-rtl.css @@ -1 +1 @@ -:root{--validation-api-white:#fff;--validation-api-light-blue:#dfe9ee;--validation-api-blue:#507a96;--validation-api-lightest-grey:#f7f7f7;--validation-api-light-grey:#e8e8e8;--validation-api-grey:#b9b9b9;--validation-api-medium-grey:#666;--validation-api-dark-grey:#474747;--validation-api-black:#1d2327;--validation-api-red:#d82000;--validation-api-light-red:#ffe4e0;--validation-api-dark-red:#a21800;--validation-api-yellow:#f0dc00;--validation-api-light-yellow:#fffde2;--validation-api-dark-yellow:#807500;--validation-api-lightest-green:#f1fcf2;--validation-api-green:#2aad40;--validation-api-dark-green:#1b6027;--validation-api-border-width:3px solid;--validation-api-settings-space:32px;--validation-api-font-small:0.8rem}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-error:before,.validation-api-block-warning:before{clip-path:polygon(0 0,100% 0,0 100%);content:"";height:15px;right:-1px;pointer-events:none;position:absolute;top:-1px;width:15px;z-index:20}.validation-api-block-error:after,.validation-api-block-warning:after{box-shadow:0 0 0 2px var(--validation-api-white)}.validation-api-block-error:before{background-color:var(--validation-api-red)}.validation-api-block-warning:before{background-color:var(--validation-api-yellow)}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-left:8px;vertical-align:middle;width:10px}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validation-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validation-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:20px}h2.validation-api-indicator-section-title{font-size:14px;line-height:1.3;margin:0 0 10px}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{font-size:12px;margin:0 3px 0 0;padding:0 28px 0 0}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{list-style-type:disc;margin:0;padding:0 0 4px}.validation-api-indicator-modal-content .validation-api-indicator-errors li:last-child,.validation-api-indicator-modal-content .validation-api-indicator-warnings li:last-child{padding-bottom: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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validation-api-dark-red)}.validation-api-warning-text{color:var(--validation-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-left:6px;vertical-align:middle;width:10px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--validation-api-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--validation-api-yellow)} +:root{--validation-api-white:#fff;--validation-api-light-blue:#dfe9ee;--validation-api-blue:#507a96;--validation-api-lightest-grey:#f7f7f7;--validation-api-light-grey:#e8e8e8;--validation-api-grey:#b9b9b9;--validation-api-medium-grey:#666;--validation-api-dark-grey:#474747;--validation-api-black:#1d2327;--validation-api-red:#d82000;--validation-api-light-red:#ffe4e0;--validation-api-dark-red:#a21800;--validation-api-yellow:#f0dc00;--validation-api-light-yellow:#fffde2;--validation-api-dark-yellow:#807500;--validation-api-lightest-green:#f1fcf2;--validation-api-green:#2aad40;--validation-api-dark-green:#1b6027;--validation-api-border-width:3px solid;--validation-api-settings-space:32px;--validation-api-font-small:0.8rem}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-error:before,.validation-api-block-warning:before{clip-path:polygon(0 0,100% 0,0 100%);content:"";height:15px;right:-1px;pointer-events:none;position:absolute;top:-1px;width:15px;z-index:20}.validation-api-block-error:after,.validation-api-block-warning:after{box-shadow:0 0 0 2px var(--validation-api-white)}.validation-api-block-error:before{background-color:var(--validation-api-red)}.validation-api-block-warning:before{background-color:var(--validation-api-yellow)}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-left:8px;vertical-align:middle;width:10px}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validation-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validation-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:20px}h2.validation-api-indicator-section-title{font-size:14px;line-height:1.3;margin:0 0 10px}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{font-size:12px;margin:0 3px 0 0;padding:0 28px 0 0}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{list-style-type:disc;margin:0;padding:0 0 4px}.validation-api-indicator-modal-content .validation-api-indicator-errors li:last-child,.validation-api-indicator-modal-content .validation-api-indicator-warnings li:last-child{padding-bottom: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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validation-api-dark-red)}.validation-api-warning-text{color:var(--validation-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-errors-panel>.components-panel__body-title button:before,.validation-api-warnings-panel>.components-panel__body-title button:before{border-radius:2px;content:"";flex-shrink:0;height:14px;margin-left:8px;width:14px}.validation-api-errors-panel>.components-panel__body-title button:before{background-color:var(--validation-api-red)}.validation-api-warnings-panel>.components-panel__body-title button:before{background-color:var(--validation-api-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 p,.validation-api-warning-group p{font-weight:500;margin:0 0 6px}.validation-api-error-group ul,.validation-api-warning-group ul{margin:0 20px 0 0;padding:0}.validation-api-error-group li,.validation-api-warning-group li{list-style-type:disc;margin:0;padding:0 0 6px}.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:500;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:color-mix(in srgb,var(--wp-admin-theme-color) 60%,#000)} diff --git a/build/validation-api.asset.php b/build/validation-api.asset.php index 4e447c7..e0b9ab6 100644 --- a/build/validation-api.asset.php +++ b/build/validation-api.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '5430810632f67c90abea'); + array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '1629071f5778bb3a44b5'); diff --git a/build/validation-api.css b/build/validation-api.css index 1648e43..1dcb5c0 100644 --- a/build/validation-api.css +++ b/build/validation-api.css @@ -1 +1 @@ -:root{--validation-api-white:#fff;--validation-api-light-blue:#dfe9ee;--validation-api-blue:#507a96;--validation-api-lightest-grey:#f7f7f7;--validation-api-light-grey:#e8e8e8;--validation-api-grey:#b9b9b9;--validation-api-medium-grey:#666;--validation-api-dark-grey:#474747;--validation-api-black:#1d2327;--validation-api-red:#d82000;--validation-api-light-red:#ffe4e0;--validation-api-dark-red:#a21800;--validation-api-yellow:#f0dc00;--validation-api-light-yellow:#fffde2;--validation-api-dark-yellow:#807500;--validation-api-lightest-green:#f1fcf2;--validation-api-green:#2aad40;--validation-api-dark-green:#1b6027;--validation-api-border-width:3px solid;--validation-api-settings-space:32px;--validation-api-font-small:0.8rem}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-error:before,.validation-api-block-warning:before{clip-path:polygon(0 0,100% 0,0 100%);content:"";height:15px;left:-1px;pointer-events:none;position:absolute;top:-1px;width:15px;z-index:20}.validation-api-block-error:after,.validation-api-block-warning:after{box-shadow:0 0 0 2px var(--validation-api-white)}.validation-api-block-error:before{background-color:var(--validation-api-red)}.validation-api-block-warning:before{background-color:var(--validation-api-yellow)}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-right:8px;vertical-align:middle;width:10px}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validation-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validation-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:20px}h2.validation-api-indicator-section-title{font-size:14px;line-height:1.3;margin:0 0 10px}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{font-size:12px;margin:0 0 0 3px;padding:0 0 0 28px}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{list-style-type:disc;margin:0;padding:0 0 4px}.validation-api-indicator-modal-content .validation-api-indicator-errors li:last-child,.validation-api-indicator-modal-content .validation-api-indicator-warnings li:last-child{padding-bottom: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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validation-api-dark-red)}.validation-api-warning-text{color:var(--validation-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-error-group .validation-api-indicator-circle,.validation-api-warning-group .validation-api-indicator-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-right:6px;vertical-align:middle;width:10px}.validation-api-error-group .validation-api-indicator-circle{background-color:var(--validation-api-red)}.validation-api-warning-group .validation-api-indicator-circle{background-color:var(--validation-api-yellow)} +:root{--validation-api-white:#fff;--validation-api-light-blue:#dfe9ee;--validation-api-blue:#507a96;--validation-api-lightest-grey:#f7f7f7;--validation-api-light-grey:#e8e8e8;--validation-api-grey:#b9b9b9;--validation-api-medium-grey:#666;--validation-api-dark-grey:#474747;--validation-api-black:#1d2327;--validation-api-red:#d82000;--validation-api-light-red:#ffe4e0;--validation-api-dark-red:#a21800;--validation-api-yellow:#f0dc00;--validation-api-light-yellow:#fffde2;--validation-api-dark-yellow:#807500;--validation-api-lightest-green:#f1fcf2;--validation-api-green:#2aad40;--validation-api-dark-green:#1b6027;--validation-api-border-width:3px solid;--validation-api-settings-space:32px;--validation-api-font-small:0.8rem}.validation-api-block-error,.validation-api-block-warning{position:relative}.validation-api-block-error:before,.validation-api-block-warning:before{clip-path:polygon(0 0,100% 0,0 100%);content:"";height:15px;left:-1px;pointer-events:none;position:absolute;top:-1px;width:15px;z-index:20}.validation-api-block-error:after,.validation-api-block-warning:after{box-shadow:0 0 0 2px var(--validation-api-white)}.validation-api-block-error:before{background-color:var(--validation-api-red)}.validation-api-block-warning:before{background-color:var(--validation-api-yellow)}.validation-api-indicator-errors .validation-api-indicator-section-title-circle,.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{border-radius:2px;display:inline-block;height:10px;margin-bottom:2px;margin-right:8px;vertical-align:middle;width:10px}.validation-api-indicator-errors .validation-api-indicator-section-title-circle{background-color:var(--validation-api-red)}.validation-api-indicator-warnings .validation-api-indicator-section-title-circle{background-color:var(--validation-api-yellow)}.validation-api-indicator-section+.validation-api-indicator-section{margin-top:20px}h2.validation-api-indicator-section-title{font-size:14px;line-height:1.3;margin:0 0 10px}.validation-api-indicator-modal-content .validation-api-indicator-errors ul,.validation-api-indicator-modal-content .validation-api-indicator-warnings ul{font-size:12px;margin:0 0 0 3px;padding:0 0 0 28px}.validation-api-indicator-modal-content .validation-api-indicator-errors li,.validation-api-indicator-modal-content .validation-api-indicator-warnings li{list-style-type:disc;margin:0;padding:0 0 4px}.validation-api-indicator-modal-content .validation-api-indicator-errors li:last-child,.validation-api-indicator-modal-content .validation-api-indicator-warnings li:last-child{padding-bottom: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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-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:3px solid var(--validation-api-yellow)}.validation-api-error-text,.validation-api-warning-text{display:block;font-weight:500;margin-top:4px}.validation-api-error-text{color:var(--validation-api-dark-red)}.validation-api-warning-text{color:var(--validation-api-dark-yellow)}.components-button.is-pressed .validation-api-sidebar-icon path{fill:#fff}.validation-api-errors-panel>.components-panel__body-title button:before,.validation-api-warnings-panel>.components-panel__body-title button:before{border-radius:2px;content:"";flex-shrink:0;height:14px;margin-right:8px;width:14px}.validation-api-errors-panel>.components-panel__body-title button:before{background-color:var(--validation-api-red)}.validation-api-warnings-panel>.components-panel__body-title button:before{background-color:var(--validation-api-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 p,.validation-api-warning-group p{font-weight:500;margin:0 0 6px}.validation-api-error-group ul,.validation-api-warning-group ul{margin:0 0 0 20px;padding:0}.validation-api-error-group li,.validation-api-warning-group li{list-style-type:disc;margin:0;padding:0 0 6px}.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:500;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:color-mix(in srgb,var(--wp-admin-theme-color) 60%,#000)} diff --git a/build/validation-api.js b/build/validation-api.js index 1d3b284..36cfd02 100644 --- a/build/validation-api.js +++ b/build/validation-api.js @@ -240,7 +240,7 @@ for (var r = 0, n = Array(t); r < t; r++) n[r] = e[r]; return n; } - function E(e) { + function O(e) { return e.flatMap(function (e) { var t, r = g(e), @@ -252,7 +252,7 @@ n, (function (e) { if (Array.isArray(e)) return h(e); - })((t = E(e.innerBlocks))) || + })((t = O(e.innerBlocks))) || (function (e) { if ( ('undefined' != typeof Symbol && @@ -272,7 +272,7 @@ ); }); } - function O(e) { + function E(e) { var t, r = (function (e) { var t = ('undefined' != typeof Symbol && e[Symbol.iterator]) || e['@@iterator']; @@ -324,7 +324,7 @@ var n = t.value; if ('core/post-content' === n.name) return n; if (n.innerBlocks && n.innerBlocks.length > 0) { - var a = O(n.innerBlocks); + var a = E(n.innerBlocks); if (a) return a; } } @@ -341,13 +341,13 @@ (null === (e = window.ValidationAPI) || void 0 === e ? void 0 : e.editorContext) || 'none', n = 'post-editor' === t || 'post-editor-template' === t; - return E( + return O( (0, r.useSelect)( function (e) { var t = e('core/block-editor'), r = t.getBlocks(); if (n) { - var a = O(r); + var a = E(r); if (a) { var i = t.getBlock(a.clientId), o = t @@ -412,7 +412,7 @@ })(e, t) || (function (e, t) { if (e) { - if ('string' == typeof e) return R(e, t); + if ('string' == typeof e) return P(e, t); var r = {}.toString.call(e).slice(8, -1); return ( 'Object' === r && e.constructor && (r = e.constructor.name), @@ -420,7 +420,7 @@ ? Array.from(e) : 'Arguments' === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) - ? R(e, t) + ? P(e, t) : void 0 ); } @@ -432,12 +432,12 @@ })() ); } - function R(e, t) { + function P(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 P, + var R, k = (null === (b = window.ValidationAPI) || void 0 === b ? void 0 @@ -455,7 +455,7 @@ (0, t.applyFilters)('validation_api_validate_meta', l, n, e, r, a) ); } - function _(e, t, r) { + function I(e, t, r) { for ( var n = (k[e] || {})[t] || {}, a = [], i = 0, o = Object.entries(n); i < o.length; @@ -471,9 +471,9 @@ } return v(a); } - function N(e) { + function _(e) { return ( - (N = + (_ = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (e) { return typeof e; @@ -486,10 +486,10 @@ ? 'symbol' : typeof e; }), - N(e) + _(e) ); } - function I(e, t) { + function N(e, t) { var r = Object.keys(e); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); @@ -505,12 +505,12 @@ for (var t = 1; t < arguments.length; t++) { var r = null != arguments[t] ? arguments[t] : {}; t % 2 - ? I(Object(r), !0).forEach(function (t) { + ? N(Object(r), !0).forEach(function (t) { L(e, t, r[t]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) - : I(Object(r)).forEach(function (t) { + : N(Object(r)).forEach(function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)); }); } @@ -520,16 +520,16 @@ return ( (t = (function (e) { var t = (function (e) { - if ('object' != N(e) || !e) return e; + if ('object' != _(e) || !e) return e; var t = e[Symbol.toPrimitive]; if (void 0 !== t) { var r = t.call(e, 'string'); - if ('object' != N(r)) return r; + if ('object' != _(r)) return r; throw new TypeError('@@toPrimitive must return a primitive value.'); } return String(e); })(e); - return 'symbol' == N(t) ? t : t + ''; + return 'symbol' == _(t) ? t : t + ''; })(t)) in e ? Object.defineProperty(e, t, { value: r, @@ -564,7 +564,7 @@ l++ ) { var u = c[l], - s = _(n, u, null == a ? void 0 : a[u]); + s = I(n, u, null == a ? void 0 : a[u]); s.isValid || o.push(C(C({}, s), {}, { metaKey: u })); } return o; @@ -638,7 +638,7 @@ return n; } var D = - (null === (P = window.ValidationAPI) || void 0 === P ? void 0 : P.editorValidationRules) || + (null === (R = window.ValidationAPI) || void 0 === R ? void 0 : R.editorValidationRules) || {}; function M() { var e = (0, r.useSelect)(function (e) { @@ -760,8 +760,8 @@ ); } const F = window.wp.editor, - W = window.wp.components, - U = window.wp.i18n, + U = window.wp.components, + W = window.wp.i18n, $ = window.wp.blocks; function q(e) { var t = e.fill, @@ -892,17 +892,17 @@ F.PluginSidebar, { name: 'validation-sidebar', - title: (0, U.__)('Validation', 'validation-api'), + title: (0, W.__)('Validation', 'validation-api'), icon: w, className: 'validation-api-validation-sidebar', }, y > 0 && React.createElement( - W.PanelBody, + U.PanelBody, { - title: (0, U.sprintf)( + title: (0, W.sprintf)( /* translators: %d: number of errors */ /* translators: %d: number of errors */ - (0, U.__)('Errors (%d)', 'validation-api'), + (0, W.__)('Errors (%d)', 'validation-api'), y ), initialOpen: !0, @@ -910,7 +910,7 @@ }, s.length > 0 && React.createElement( - W.PanelRow, + U.PanelRow, null, React.createElement( 'div', @@ -918,15 +918,7 @@ React.createElement( 'p', { className: 'validation-api-error-subheading' }, - React.createElement( - 'strong', - null, - React.createElement('span', { - className: - 'validation-api-indicator-circle', - }), - (0, U.__)('Block Errors', 'validation-api') - ) + (0, W.__)('Block Issues', 'validation-api') ), React.createElement( 'ul', @@ -959,7 +951,7 @@ ), m.length > 0 && React.createElement( - W.PanelRow, + U.PanelRow, null, React.createElement( 'div', @@ -967,15 +959,7 @@ React.createElement( 'p', { className: 'validation-api-error-subheading' }, - React.createElement( - 'strong', - null, - React.createElement('span', { - className: - 'validation-api-indicator-circle', - }), - (0, U.__)('Meta Errors', 'validation-api') - ) + (0, W.__)('Field Issues', 'validation-api') ), React.createElement( 'ul', @@ -992,7 +976,7 @@ ), p.length > 0 && React.createElement( - W.PanelRow, + U.PanelRow, null, React.createElement( 'div', @@ -1000,15 +984,7 @@ React.createElement( 'p', { className: 'validation-api-error-subheading' }, - React.createElement( - 'strong', - null, - React.createElement('span', { - className: - 'validation-api-indicator-circle', - }), - (0, U.__)('Editor Errors', 'validation-api') - ) + (0, W.__)('Editor Issues', 'validation-api') ), React.createElement( 'ul', @@ -1026,11 +1002,11 @@ ), b > 0 && React.createElement( - W.PanelBody, + U.PanelBody, { - title: (0, U.sprintf)( + title: (0, W.sprintf)( /* translators: %d: number of warnings */ /* translators: %d: number of warnings */ - (0, U.__)('Warnings (%d)', 'validation-api'), + (0, W.__)('Warnings (%d)', 'validation-api'), b ), initialOpen: !0, @@ -1038,7 +1014,7 @@ }, f.length > 0 && React.createElement( - W.PanelRow, + U.PanelRow, null, React.createElement( 'div', @@ -1046,15 +1022,7 @@ React.createElement( 'p', { className: 'validation-api-warning-subheading' }, - React.createElement( - 'strong', - null, - React.createElement('span', { - className: - 'validation-api-indicator-circle', - }), - (0, U.__)('Block Warnings', 'validation-api') - ) + (0, W.__)('Block Issues', 'validation-api') ), React.createElement( 'ul', @@ -1087,7 +1055,7 @@ ), d.length > 0 && React.createElement( - W.PanelRow, + U.PanelRow, null, React.createElement( 'div', @@ -1095,15 +1063,7 @@ React.createElement( 'p', { className: 'validation-api-warning-subheading' }, - React.createElement( - 'strong', - null, - React.createElement('span', { - className: - 'validation-api-indicator-circle', - }), - (0, U.__)('Meta Warnings', 'validation-api') - ) + (0, W.__)('Field Issues', 'validation-api') ), React.createElement( 'ul', @@ -1120,7 +1080,7 @@ ), v.length > 0 && React.createElement( - W.PanelRow, + U.PanelRow, null, React.createElement( 'div', @@ -1128,15 +1088,7 @@ React.createElement( 'p', { className: 'validation-api-warning-subheading' }, - React.createElement( - 'strong', - null, - React.createElement('span', { - className: - 'validation-api-indicator-circle', - }), - (0, U.__)('Editor Warnings', 'validation-api') - ) + (0, W.__)('Editor Issues', 'validation-api') ), React.createElement( 'ul', @@ -1272,20 +1224,20 @@ return React.createElement( React.Fragment, null, - React.createElement(W.ToolbarButton, { + React.createElement(U.ToolbarButton, { icon: p, onClick: function () { return l(!0); }, - label: (0, U.__)('View block issues or concerns', 'validation-api'), + label: (0, W.__)('View block issues or concerns', 'validation-api'), className: 'validation-api-toolbar-button', isCompact: !0, }), o && React.createElement( - W.Modal, + U.Modal, { - title: (0, U.__)('Issues or Concerns', 'validation-api'), + title: (0, W.__)('Issues or Concerns', 'validation-api'), onRequestClose: function () { return l(!1); }, @@ -1307,7 +1259,7 @@ React.createElement('span', { className: 'validation-api-indicator-section-title-circle', }), - (0, U.__)('Errors', 'validation-api') + (0, W.__)('Errors', 'validation-api') ), React.createElement( 'ul', @@ -1334,7 +1286,7 @@ React.createElement('span', { className: 'validation-api-indicator-section-title-circle', }), - (0, U.__)('Warnings', 'validation-api') + (0, W.__)('Warnings', 'validation-api') ), React.createElement( 'ul', @@ -1791,7 +1743,7 @@ issues: [], wrapperClassName: '', }; - var l = _(a, e, o), + var l = I(a, e, o), c = ''; return ( l.hasErrors diff --git a/src/editor/components/ValidationSidebar.js b/src/editor/components/ValidationSidebar.js index 422030c..bb9fc5a 100644 --- a/src/editor/components/ValidationSidebar.js +++ b/src/editor/components/ValidationSidebar.js @@ -318,10 +318,7 @@ export function ValidationSidebar() {

      - - - {__('Block Errors', 'validation-api')} - + {__('Block Issues', 'validation-api')}

        {deduplicatedBlockErrors.map((issue, index) => { @@ -353,10 +350,7 @@ export function ValidationSidebar() {

        - - - {__('Meta Errors', 'validation-api')} - + {__('Field Issues', 'validation-api')}

          {deduplicatedMetaErrors.map((issue, index) => ( @@ -372,10 +366,7 @@ export function ValidationSidebar() {

          - - - {__('Editor Errors', 'validation-api')} - + {__('Editor Issues', 'validation-api')}

            {deduplicatedEditorErrors.map((issue, index) => ( @@ -404,10 +395,7 @@ export function ValidationSidebar() {

            - - - {__('Block Warnings', 'validation-api')} - + {__('Block Issues', 'validation-api')}

              {deduplicatedBlockWarnings.map((issue, index) => { @@ -439,10 +427,7 @@ export function ValidationSidebar() {

              - - - {__('Meta Warnings', 'validation-api')} - + {__('Field Issues', 'validation-api')}

                {deduplicatedMetaWarnings.map((issue, index) => ( @@ -458,10 +443,7 @@ export function ValidationSidebar() {

                - - - {__('Editor Warnings', 'validation-api')} - + {__('Editor Issues', 'validation-api')}

                  {deduplicatedEditorWarnings.map((issue, index) => ( diff --git a/src/styles.scss b/src/styles.scss index 376885c..e41de6a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,4 @@ @use "./styles/variables"; -// @use './styles/editor-validation'; @use './styles/inline-indicators'; @use './styles/inline-modal'; @use './styles/meta-validation'; diff --git a/src/styles/editor-validation.scss b/src/styles/editor-validation.scss deleted file mode 100644 index c818b64..0000000 --- a/src/styles/editor-validation.scss +++ /dev/null @@ -1,51 +0,0 @@ -.validation-api-validation-list { - margin: 0; - padding: 0; -} - -.validation-api-validation-item { - width: 100%; - padding: 12px 14px; - border-left: var(--validation-api-border-width); - margin-bottom: 12px; - border-radius: 2px; - - &:last-child { - margin-bottom: 0; - } -} - -.validation-api-validation-item--error { - background-color: var(--validation-api-light-red); - border-color: var(--validation-api-red); -} - -.validation-api-validation-item--warning { - background-color: var(--validation-api-light-yellow); - border-color: var(--validation-api-yellow); -} - -.validation-api-validation-message { - font-size: 13px; - line-height: 1.5; - margin: 0; - - strong { - font-weight: 600; - } -} - -.validation-api-validation-item--error .validation-api-validation-message { - color: var(--validation-api-dark-red); -} - -.validation-api-validation-item--warning .validation-api-validation-message { - color: var(--validation-api-dark-yellow); -} - -.validation-api-validation-description { - font-size: 12px; - line-height: 1.4; - margin-top: 8px; - color: #636363; -} \ No newline at end of file diff --git a/src/styles/validation-sidebar.scss b/src/styles/validation-sidebar.scss index 7c56ebf..cf22764 100644 --- a/src/styles/validation-sidebar.scss +++ b/src/styles/validation-sidebar.scss @@ -2,64 +2,65 @@ 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 { - width: 10px; - height: 10px; +// Colored circle in PanelBody titles (Errors / Warnings) +.validation-api-errors-panel > .components-panel__body-title button::before, +.validation-api-warnings-panel > .components-panel__body-title button::before { + content: ''; + width: 14px; + height: 14px; border-radius: 2px; - display: inline-block; - margin-right: 6px; - vertical-align: middle; - margin-bottom: 2px; + flex-shrink: 0; + margin-right: 8px; } -.validation-api-error-group .validation-api-indicator-circle { +.validation-api-errors-panel > .components-panel__body-title button::before { background-color: var(--validation-api-red); } -.validation-api-warning-group .validation-api-indicator-circle { +.validation-api-warnings-panel > .components-panel__body-title button::before { background-color: var(--validation-api-yellow); } -// .validation-api-error-group, -// .validation-api-warning-group { -// p, ul { -// line-height: 1.4; -// margin: 0; -// } +.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-warning-group { + p { + font-weight: 500; + margin: 0 0 6px 0; + } -// ul { -// margin-left: 3px; -// padding: 4px 0 2px 14px; -// } + ul { + margin: 0 0 0 20px; + padding: 0; + } -// li { -// padding: 4px 0; -// margin: 0; + li { + padding: 0 0 6px 0; + margin: 0; + list-style-type: disc; -// &:last-child { -// padding-bottom: 0; -// } -// } -// } + &:last-child { + padding-bottom: 0; + } + } +} -// .validation-api-error-group .validation-api-issue-link, -// .validation-api-warning-group .validation-api-issue-link { -// cursor: pointer; -// font-weight: 400; -// text-decoration: underline; -// padding: 0; -// margin: 0; -// border: none; -// background: none; -// color: var(--wp-admin-theme-color); +.validation-api-error-group .validation-api-issue-link, +.validation-api-warning-group .validation-api-issue-link { + cursor: pointer; + font-weight: 500; + text-decoration: underline; + padding: 0; + margin: 0; + border: none; + background: none; + color: var(--wp-admin-theme-color); -// &:hover { -// color: #135e96; -// } -// } \ No newline at end of file + &:hover { + color: color-mix(in srgb, var(--wp-admin-theme-color) 60%, #000); + } +} \ No newline at end of file