diff --git a/wp-admin/css/site-health-rtl.css b/wp-admin/css/site-health-rtl.css index cd319d2aac..49c2ac6356 100644 --- a/wp-admin/css/site-health-rtl.css +++ b/wp-admin/css/site-health-rtl.css @@ -119,12 +119,22 @@ .health-check-tabs-wrapper { /* IE 11 */ display: -ms-inline-grid; - -ms-grid-columns: 1fr 1fr; + -ms-grid-columns: 1fr 1fr 1fr 1fr; vertical-align: top; /* modern browsers */ display: inline-grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.health-check-tabs-wrapper.tab-count-1 { + grid-template-columns: 1fr; +} +.health-check-tabs-wrapper.tab-count-2 { grid-template-columns: 1fr 1fr; } +.health-check-tabs-wrapper.tab-count-3 { + grid-template-columns: 1fr 1fr 1fr; +} .health-check-tab { display: block; /* IE 11 */ @@ -135,6 +145,43 @@ transition: box-shadow 0.5s ease-in-out; } +.health-check-offscreen-nav-wrapper { + position: relative; + background: transparent; + border: none; +} +.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { + right: initial; +} + +.health-check-offscreen-nav { + display: none; + position: absolute; + padding-top: 10px; + left: 0; + top: 100%; + width: 13rem; +} +.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { + display: inline-block; +} +.health-check-offscreen-nav:before { + position: absolute; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 5px 10px; + border-color: transparent transparent #ffffff transparent; + left: 20px; + top: 5px; +} + +.health-check-offscreen-nav .health-check-tab { + background: #fff; + box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); +} + .health-check-tab:nth-child(1) { -ms-grid-column: 1; /* IE 11 */ } @@ -153,6 +200,10 @@ box-shadow: inset 0 -3px #3582c4; font-weight: 600; } +.health-check-offscreen-nav .health-check-tab.active { + box-shadow: inset -3px 0 #3582c4; + font-weight: 600; +} .health-check-body { max-width: 800px; diff --git a/wp-admin/css/site-health-rtl.min.css b/wp-admin/css/site-health-rtl.min.css index 5db05f4278..8f2c79976e 100644 --- a/wp-admin/css/site-health-rtl.min.css +++ b/wp-admin/css/site-health-rtl.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-right:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #dcdcde}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;right:50%;top:50%;margin-top:-40px;margin-right:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#c3c4c7;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#c3c4c7;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#d63638}.green .site-health-progress #bar{stroke:#00a32a}.green .site-health-progress .site-health-progress-label{color:#00a32a}.orange .site-health-progress #bar{stroke:#dba617}.orange .site-health-progress .site-health-progress-label{color:#dba617}.site-health-progress-label{font-weight:600;line-height:20px;margin-right:.3rem}@keyframes loadingPulse{0%{stroke:#c3c4c7}50%{stroke:#72aee6}100%{stroke:#c3c4c7}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#1d2327;outline:1px solid #787c82;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #3582c4;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#00a32a}.health-check-body .warning::before{content:"\f460";color:#dba617}.health-check-body .info::before{content:"\f348";color:#72aee6}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#d63638}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#008a20;margin-right:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #c3c4c7}.health-check-accordion-heading{margin:0;border-top:1px solid #c3c4c7;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#2c3338;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 1.5em 1em 3.5em;min-height:46px;position:relative;text-align:right;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-left:40px;padding-right:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f6f7f7}.health-check-accordion-trigger:focus{color:#1d2327;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #2271b1;background-color:#f6f7f7}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #50575e;border-width:0 0 2px 2px;height:.5rem;pointer-events:none;position:absolute;left:1.5em;top:50%;transform:translateY(-70%) rotate(-45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#2c3338;font-weight:600;margin-right:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #72aee6}.health-check-accordion-trigger .badge.orange{border:1px solid #dba617}.health-check-accordion-trigger .badge.red{border:1px solid #e65054}.health-check-accordion-trigger .badge.green{border:1px solid #00ba37}.health-check-accordion-trigger .badge.purple{border:1px solid #2271b1}.health-check-accordion-trigger .badge.gray{border:1px solid #c3c4c7}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 22px 15px 20px}.site-health .update-nag{margin-bottom:20px;margin-right:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-left:10px;margin-right:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file +.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-right:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #dcdcde}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;right:50%;top:50%;margin-top:-40px;margin-right:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#c3c4c7;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#c3c4c7;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#d63638}.green .site-health-progress #bar{stroke:#00a32a}.green .site-health-progress .site-health-progress-label{color:#00a32a}.orange .site-health-progress #bar{stroke:#dba617}.orange .site-health-progress .site-health-progress-label{color:#dba617}.site-health-progress-label{font-weight:600;line-height:20px;margin-right:.3rem}@keyframes loadingPulse{0%{stroke:#c3c4c7}50%{stroke:#72aee6}100%{stroke:#c3c4c7}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr 1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr 1fr 1fr}.health-check-tabs-wrapper.tab-count-1{grid-template-columns:1fr}.health-check-tabs-wrapper.tab-count-2{grid-template-columns:1fr 1fr}.health-check-tabs-wrapper.tab-count-3{grid-template-columns:1fr 1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-offscreen-nav-wrapper{position:relative;background:0 0;border:none}.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav{right:initial}.health-check-offscreen-nav{display:none;position:absolute;padding-top:10px;left:0;top:100%;width:13rem}.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav{display:inline-block}.health-check-offscreen-nav:before{position:absolute;content:"";width:0;height:0;border-style:solid;border-width:0 10px 5px 10px;border-color:transparent transparent #fff transparent;left:20px;top:5px}.health-check-offscreen-nav .health-check-tab{background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.75)}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#1d2327;outline:1px solid #787c82;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #3582c4;font-weight:600}.health-check-offscreen-nav .health-check-tab.active{box-shadow:inset -3px 0 #3582c4;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#00a32a}.health-check-body .warning::before{content:"\f460";color:#dba617}.health-check-body .info::before{content:"\f348";color:#72aee6}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#d63638}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#008a20;margin-right:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #c3c4c7}.health-check-accordion-heading{margin:0;border-top:1px solid #c3c4c7;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#2c3338;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 1.5em 1em 3.5em;min-height:46px;position:relative;text-align:right;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-left:40px;padding-right:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f6f7f7}.health-check-accordion-trigger:focus{color:#1d2327;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #2271b1;background-color:#f6f7f7}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #50575e;border-width:0 0 2px 2px;height:.5rem;pointer-events:none;position:absolute;left:1.5em;top:50%;transform:translateY(-70%) rotate(-45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#2c3338;font-weight:600;margin-right:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #72aee6}.health-check-accordion-trigger .badge.orange{border:1px solid #dba617}.health-check-accordion-trigger .badge.red{border:1px solid #e65054}.health-check-accordion-trigger .badge.green{border:1px solid #00ba37}.health-check-accordion-trigger .badge.purple{border:1px solid #2271b1}.health-check-accordion-trigger .badge.gray{border:1px solid #c3c4c7}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 22px 15px 20px}.site-health .update-nag{margin-bottom:20px;margin-right:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-left:10px;margin-right:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file diff --git a/wp-admin/css/site-health.css b/wp-admin/css/site-health.css index 51c6b394b0..516142c421 100644 --- a/wp-admin/css/site-health.css +++ b/wp-admin/css/site-health.css @@ -118,12 +118,22 @@ .health-check-tabs-wrapper { /* IE 11 */ display: -ms-inline-grid; - -ms-grid-columns: 1fr 1fr; + -ms-grid-columns: 1fr 1fr 1fr 1fr; vertical-align: top; /* modern browsers */ display: inline-grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.health-check-tabs-wrapper.tab-count-1 { + grid-template-columns: 1fr; +} +.health-check-tabs-wrapper.tab-count-2 { grid-template-columns: 1fr 1fr; } +.health-check-tabs-wrapper.tab-count-3 { + grid-template-columns: 1fr 1fr 1fr; +} .health-check-tab { display: block; /* IE 11 */ @@ -134,6 +144,43 @@ transition: box-shadow 0.5s ease-in-out; } +.health-check-offscreen-nav-wrapper { + position: relative; + background: transparent; + border: none; +} +.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav { + left: initial; +} + +.health-check-offscreen-nav { + display: none; + position: absolute; + padding-top: 10px; + right: 0; + top: 100%; + width: 13rem; +} +.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav { + display: inline-block; +} +.health-check-offscreen-nav:before { + position: absolute; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 5px 10px; + border-color: transparent transparent #ffffff transparent; + right: 20px; + top: 5px; +} + +.health-check-offscreen-nav .health-check-tab { + background: #fff; + box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); +} + .health-check-tab:nth-child(1) { -ms-grid-column: 1; /* IE 11 */ } @@ -152,6 +199,10 @@ box-shadow: inset 0 -3px #3582c4; font-weight: 600; } +.health-check-offscreen-nav .health-check-tab.active { + box-shadow: inset 3px 0 #3582c4; + font-weight: 600; +} .health-check-body { max-width: 800px; diff --git a/wp-admin/css/site-health.min.css b/wp-admin/css/site-health.min.css index ef8c125143..b6898d86fb 100644 --- a/wp-admin/css/site-health.min.css +++ b/wp-admin/css/site-health.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-left:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #dcdcde}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;left:50%;top:50%;margin-top:-40px;margin-left:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#c3c4c7;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#c3c4c7;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#d63638}.green .site-health-progress #bar{stroke:#00a32a}.green .site-health-progress .site-health-progress-label{color:#00a32a}.orange .site-health-progress #bar{stroke:#dba617}.orange .site-health-progress .site-health-progress-label{color:#dba617}.site-health-progress-label{font-weight:600;line-height:20px;margin-left:.3rem}@keyframes loadingPulse{0%{stroke:#c3c4c7}50%{stroke:#72aee6}100%{stroke:#c3c4c7}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#1d2327;outline:1px solid #787c82;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #3582c4;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#00a32a}.health-check-body .warning::before{content:"\f460";color:#dba617}.health-check-body .info::before{content:"\f348";color:#72aee6}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#d63638}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#008a20;margin-left:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #c3c4c7}.health-check-accordion-heading{margin:0;border-top:1px solid #c3c4c7;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#2c3338;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 3.5em 1em 1.5em;min-height:46px;position:relative;text-align:left;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-right:40px;padding-left:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f6f7f7}.health-check-accordion-trigger:focus{color:#1d2327;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #2271b1;background-color:#f6f7f7}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #50575e;border-width:0 2px 2px 0;height:.5rem;pointer-events:none;position:absolute;right:1.5em;top:50%;transform:translateY(-70%) rotate(45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#2c3338;font-weight:600;margin-left:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #72aee6}.health-check-accordion-trigger .badge.orange{border:1px solid #dba617}.health-check-accordion-trigger .badge.red{border:1px solid #e65054}.health-check-accordion-trigger .badge.green{border:1px solid #00ba37}.health-check-accordion-trigger .badge.purple{border:1px solid #2271b1}.health-check-accordion-trigger .badge.gray{border:1px solid #c3c4c7}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(-135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 20px 15px 22px}.site-health .update-nag{margin-bottom:20px;margin-left:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-right:10px;margin-left:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file +.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-left:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #dcdcde}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;left:50%;top:50%;margin-top:-40px;margin-left:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#c3c4c7;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#c3c4c7;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#d63638}.green .site-health-progress #bar{stroke:#00a32a}.green .site-health-progress .site-health-progress-label{color:#00a32a}.orange .site-health-progress #bar{stroke:#dba617}.orange .site-health-progress .site-health-progress-label{color:#dba617}.site-health-progress-label{font-weight:600;line-height:20px;margin-left:.3rem}@keyframes loadingPulse{0%{stroke:#c3c4c7}50%{stroke:#72aee6}100%{stroke:#c3c4c7}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr 1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr 1fr 1fr}.health-check-tabs-wrapper.tab-count-1{grid-template-columns:1fr}.health-check-tabs-wrapper.tab-count-2{grid-template-columns:1fr 1fr}.health-check-tabs-wrapper.tab-count-3{grid-template-columns:1fr 1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-offscreen-nav-wrapper{position:relative;background:0 0;border:none}.health-check-offscreen-nav-wrapper:focus .health-check-offscreen-nav{left:initial}.health-check-offscreen-nav{display:none;position:absolute;padding-top:10px;right:0;top:100%;width:13rem}.health-check-offscreen-nav-wrapper.visible .health-check-offscreen-nav{display:inline-block}.health-check-offscreen-nav:before{position:absolute;content:"";width:0;height:0;border-style:solid;border-width:0 10px 5px 10px;border-color:transparent transparent #fff transparent;right:20px;top:5px}.health-check-offscreen-nav .health-check-tab{background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.75)}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#1d2327;outline:1px solid #787c82;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #3582c4;font-weight:600}.health-check-offscreen-nav .health-check-tab.active{box-shadow:inset 3px 0 #3582c4;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#00a32a}.health-check-body .warning::before{content:"\f460";color:#dba617}.health-check-body .info::before{content:"\f348";color:#72aee6}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#d63638}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#008a20;margin-left:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #c3c4c7}.health-check-accordion-heading{margin:0;border-top:1px solid #c3c4c7;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#2c3338;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 3.5em 1em 1.5em;min-height:46px;position:relative;text-align:left;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-right:40px;padding-left:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f6f7f7}.health-check-accordion-trigger:focus{color:#1d2327;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #2271b1;background-color:#f6f7f7}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #50575e;border-width:0 2px 2px 0;height:.5rem;pointer-events:none;position:absolute;right:1.5em;top:50%;transform:translateY(-70%) rotate(45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#2c3338;font-weight:600;margin-left:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #72aee6}.health-check-accordion-trigger .badge.orange{border:1px solid #dba617}.health-check-accordion-trigger .badge.red{border:1px solid #e65054}.health-check-accordion-trigger .badge.green{border:1px solid #00ba37}.health-check-accordion-trigger .badge.purple{border:1px solid #2271b1}.health-check-accordion-trigger .badge.gray{border:1px solid #c3c4c7}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(-135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 20px 15px 22px}.site-health .update-nag{margin-bottom:20px;margin-left:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-right:10px;margin-left:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file diff --git a/wp-admin/includes/class-wp-site-health.php b/wp-admin/includes/class-wp-site-health.php index b614e08068..0d697e4566 100644 --- a/wp-admin/includes/class-wp-site-health.php +++ b/wp-admin/includes/class-wp-site-health.php @@ -50,6 +50,21 @@ class WP_Site_Health { add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); add_action( 'wp_site_health_scheduled_check', array( $this, 'wp_cron_scheduled_check' ) ); + + add_action( 'site_health_tab_content', array( $this, 'show_site_health_tab' ) ); + } + + /** + * Output the content of a tab in the Site Health screen. + * + * @since 5.8.0 + * + * @param string $tab Slug of the current tab being displayed. + */ + public function show_site_health_tab( $tab ) { + if ( 'debug' === $tab ) { + require_once ABSPATH . '/wp-admin/site-health-info.php'; + } } /** @@ -103,7 +118,7 @@ class WP_Site_Health { $health_check_js_variables['site_status']['issues'] = $issue_counts; } - if ( 'site-health' === $screen->id && ! isset( $_GET['tab'] ) ) { + if ( 'site-health' === $screen->id && ( ! isset( $_GET['tab'] ) || empty( $_GET['tab'] ) ) ) { $tests = WP_Site_Health::get_tests(); // Don't run https test on development environments. diff --git a/wp-admin/js/site-health.js b/wp-admin/js/site-health.js index c0e2454224..4435da215f 100644 --- a/wp-admin/js/site-health.js +++ b/wp-admin/js/site-health.js @@ -443,4 +443,9 @@ jQuery( function( $ ) { recalculateProgression(); } } + + // Trigger a class toggle when the extended menu button is clicked. + $( '.health-check-offscreen-nav-wrapper' ).on( 'click', function() { + $( this ).toggleClass( 'visible' ); + } ); } ); diff --git a/wp-admin/js/site-health.min.js b/wp-admin/js/site-health.min.js index 5dd348db0e..527589f96e 100644 --- a/wp-admin/js/site-health.min.js +++ b/wp-admin/js/site-health.min.js @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -jQuery(function(o){var a,l=wp.i18n.__,n=wp.i18n._n,r=wp.i18n.sprintf,i=new ClipboardJS(".site-health-copy-buttons .copy-button"),c=o(".health-check-body.health-check-debug-tab").length,h=o("#health-check-accordion-block-wp-paths-sizes");function d(e){var t,s,a=wp.template("health-check-issue"),i=o("#health-check-issues-"+e.status);!function(e){var t,s,a,i,n={test:"string",label:"string",description:"string"},o=!0;if("object"==typeof e){for(t in n)if("object"==typeof(s=n[t]))for(a in s)i=s[a],void 0!==e[t]&&void 0!==e[t][a]&&i===typeof e[t][a]||(o=!1);else void 0!==e[t]&&s===typeof e[t]||(o=!1);return o}}(e)||(SiteHealth.site_status.issues[e.status]++,s=SiteHealth.site_status.issues[e.status],void 0===e.test&&(e.test=e.status+s),"critical"===e.status?t=r(n("%s critical issue","%s critical issues",s),''+s+""):"recommended"===e.status?t=r(n("%s recommended improvement","%s recommended improvements",s),''+s+""):"good"===e.status&&(t=r(n("%s item with no issues detected","%s items with no issues detected",s),''+s+"")),t&&o(".site-health-issue-count-title",i).html(t),o(".issues","#health-check-issues-"+e.status).append(a(e)))}function u(){var e=o(".site-health-progress"),t=e.closest(".site-health-progress-wrapper"),s=o(".site-health-progress-label",t),a=o(".site-health-progress svg #bar"),i=parseInt(SiteHealth.site_status.issues.good,0)+parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),n=.5*parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),n=100-Math.ceil(n/i*100);0!==i?(t.removeClass("loading"),i=a.attr("r"),i=Math.PI*(2*i),a.css({strokeDashoffset:(100-(n=100<(n=n<0?0:n)?100:n))/100*i+"px"}),parseInt(SiteHealth.site_status.issues.critical,0)<1&&o("#health-check-issues-critical").addClass("hidden"),parseInt(SiteHealth.site_status.issues.recommended,0)<1&&o("#health-check-issues-recommended").addClass("hidden"),80<=n&&0===parseInt(SiteHealth.site_status.issues.critical,0)?(t.addClass("green").removeClass("orange"),s.text(l("Good")),wp.a11y.speak(l("All site health tests have finished running. Your site is looking good, and the results are now available on the page."))):(t.addClass("orange").removeClass("green"),s.text(l("Should be improved")),wp.a11y.speak(l("All site health tests have finished running. There are items that should be addressed, and the results are now available on the page."))),c||(o.post(ajaxurl,{action:"health-check-site-status-result",_wpnonce:SiteHealth.nonce.site_status_result,counts:SiteHealth.site_status.issues}),100===n&&(o(".site-status-all-clear").removeClass("hide"),o(".site-status-has-issues").addClass("hide")))):e.addClass("hidden")}function p(e,t){t={status:"recommended",label:l("A test is unavailable"),badge:{color:"red",label:l("Unavailable")},description:"

"+e+"

"+t+"

",actions:""};d(wp.hooks.applyFilters("site_status_test_result",t))}function e(){var t=(new Date).getTime(),s=window.setTimeout(function(){wp.a11y.speak(l("Please wait..."))},3e3);wp.apiRequest({path:"/wp-site-health/v1/directory-sizes"}).done(function(e){var a,s;a=e||{},e=o("button.button.copy-button"),s=e.attr("data-clipboard-text"),o.each(a,function(e,t){t=t.debug||t.size;void 0!==t&&(s=s.replace(e+": loading...",e+": "+t))}),e.attr("data-clipboard-text",s),h.find("td[class]").each(function(e,t){var s=o(t),t=s.attr("class");a.hasOwnProperty(t)&&a[t].size&&s.text(a[t].size)})}).always(function(){var e=(new Date).getTime()-t;o(".health-check-wp-paths-sizes.spinner").css("visibility","hidden"),u(),3e3'+s+""):"recommended"===e.status?t=r(n("%s recommended improvement","%s recommended improvements",s),''+s+""):"good"===e.status&&(t=r(n("%s item with no issues detected","%s items with no issues detected",s),''+s+"")),t&&o(".site-health-issue-count-title",i).html(t),o(".issues","#health-check-issues-"+e.status).append(a(e)))}function u(){var e=o(".site-health-progress"),t=e.closest(".site-health-progress-wrapper"),s=o(".site-health-progress-label",t),a=o(".site-health-progress svg #bar"),i=parseInt(SiteHealth.site_status.issues.good,0)+parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),n=.5*parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),n=100-Math.ceil(n/i*100);0!==i?(t.removeClass("loading"),i=a.attr("r"),i=Math.PI*(2*i),a.css({strokeDashoffset:(100-(n=100<(n=n<0?0:n)?100:n))/100*i+"px"}),parseInt(SiteHealth.site_status.issues.critical,0)<1&&o("#health-check-issues-critical").addClass("hidden"),parseInt(SiteHealth.site_status.issues.recommended,0)<1&&o("#health-check-issues-recommended").addClass("hidden"),80<=n&&0===parseInt(SiteHealth.site_status.issues.critical,0)?(t.addClass("green").removeClass("orange"),s.text(l("Good")),wp.a11y.speak(l("All site health tests have finished running. Your site is looking good, and the results are now available on the page."))):(t.addClass("orange").removeClass("green"),s.text(l("Should be improved")),wp.a11y.speak(l("All site health tests have finished running. There are items that should be addressed, and the results are now available on the page."))),c||(o.post(ajaxurl,{action:"health-check-site-status-result",_wpnonce:SiteHealth.nonce.site_status_result,counts:SiteHealth.site_status.issues}),100===n&&(o(".site-status-all-clear").removeClass("hide"),o(".site-status-has-issues").addClass("hide")))):e.addClass("hidden")}function p(e,t){t={status:"recommended",label:l("A test is unavailable"),badge:{color:"red",label:l("Unavailable")},description:"

"+e+"

"+t+"

",actions:""};d(wp.hooks.applyFilters("site_status_test_result",t))}function e(){var t=(new Date).getTime(),s=window.setTimeout(function(){wp.a11y.speak(l("Please wait..."))},3e3);wp.apiRequest({path:"/wp-site-health/v1/directory-sizes"}).done(function(e){var a,s;a=e||{},e=o("button.button.copy-button"),s=e.attr("data-clipboard-text"),o.each(a,function(e,t){t=t.debug||t.size;void 0!==t&&(s=s.replace(e+": loading...",e+": "+t))}),e.attr("data-clipboard-text",s),h.find("td[class]").each(function(e,t){var s=o(t),t=s.attr("class");a.hasOwnProperty(t)&&a[t].size&&s.text(a[t].size)})}).always(function(){var e=(new Date).getTime()-t;o(".health-check-wp-paths-sizes.spinner").css("visibility","hidden"),u(),3e3 -
-
-

- -

-
- -
-
- -
-
- -
-
- - -
- -

@@ -179,6 +132,3 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
- - _x( 'Status', 'Site Health' ), + /* translators: Tab heading for Site Health Info page. */ + 'debug' => _x( 'Info', 'Site Health' ), +); + +/** + * An associated array of extra tabs for the Site Health navigation bar. + * + * Add a custom page to the Site Health screen, based on a tab slug and label. + * The label you provide will also be used as part of the site title. + * + * @since 5.8.0 + * + * @param array $tabs An associated array of tab slugs and their label. + */ +$tabs = apply_filters( 'site_health_navigation_tabs', $tabs ); + +$wrapper_classes = array( + 'health-check-tabs-wrapper', + 'hide-if-no-js', + 'tab-count-' . count( $tabs ), +); + +$title = sprintf( + // translators: %s: The currently displayed tab. + __( 'Site Health %s' ), + ( isset( $_GET['tab'] ) ? esc_html( $tabs[ $_GET['tab'] ] ) : esc_html( $tabs[0] ) ) +); if ( ! current_user_can( 'view_site_health_checks' ) ) { wp_die( __( 'Sorry, you are not allowed to access site health information.' ), '', 403 ); @@ -86,25 +110,87 @@ require_once ABSPATH . 'wp-admin/admin-header.php'; -