From 7f23a920d2644b0b80bffed9d42efc32556ff0fe Mon Sep 17 00:00:00 2001 From: iandunn Date: Sat, 12 May 2018 17:29:21 +0000 Subject: [PATCH] Privacy: Reposition pointer to ensure dismiss link is always visible. r43158 introduced a new admin pointer for the privacy tools added in 4.9.6. With the previous positioning, though, sometimes the `Dismiss` link would be fixed off screen, making it impossible for the user to dismiss the pointer. This happened when there were enough extra menu items, or when the viewport height was short enough. This commit repositions the pointer to work around that problem. One down side of this workaround is that the arrow will not always be positioned next to the `Tools` menu, where it should be. That's an acceptable compromise given the current time constraints, though. A long term solution would be to make `WP_Pointer` robust enough to handle this use case. Props imath, audrasjb, desrosj. Fixes #44045. Built from https://develop.svn.wordpress.org/trunk@43246 git-svn-id: http://core.svn.wordpress.org/trunk@43075 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/includes/class-wp-internal-pointers.php | 6 ++++-- wp-includes/css/wp-pointer-rtl.css | 9 +++++++++ wp-includes/css/wp-pointer-rtl.min.css | 2 +- wp-includes/css/wp-pointer.css | 9 +++++++++ wp-includes/css/wp-pointer.min.css | 2 +- wp-includes/version.php | 2 +- 6 files changed, 25 insertions(+), 5 deletions(-) diff --git a/wp-admin/includes/class-wp-internal-pointers.php b/wp-admin/includes/class-wp-internal-pointers.php index de9c3ef8e2..f3e849d422 100644 --- a/wp-admin/includes/class-wp-internal-pointers.php +++ b/wp-admin/includes/class-wp-internal-pointers.php @@ -170,18 +170,20 @@ final class WP_Internal_Pointers { if ( is_rtl() ) { $position = array( 'edge' => 'right', - 'align' => 'left', + 'align' => 'bottom', ); } else { $position = array( 'edge' => 'left', - 'align' => 'right', + 'align' => 'bottom', ); } $js_args = array( 'content' => $content, 'position' => $position, + 'pointerClass' => 'wp-pointer arrow-bottom', + 'pointerWidth' => 420, ); self::print_js( 'wp496_privacy', '#menu-tools', $js_args ); } diff --git a/wp-includes/css/wp-pointer-rtl.css b/wp-includes/css/wp-pointer-rtl.css index dad14aa7c0..15c8a1947c 100644 --- a/wp-includes/css/wp-pointer-rtl.css +++ b/wp-includes/css/wp-pointer-rtl.css @@ -207,6 +207,15 @@ content: " "; } +.wp-pointer.arrow-bottom .wp-pointer-content { + margin-bottom: -45px; +} + +.wp-pointer.arrow-bottom .wp-pointer-arrow { + top: 100%; + margin-top: -30px; +} + /* Disable pointers at responsive sizes */ @media screen and ( max-width: 782px ) { .wp-pointer { diff --git a/wp-includes/css/wp-pointer-rtl.min.css b/wp-includes/css/wp-pointer-rtl.min.css index f7f6de673b..9fac286aef 100644 --- a/wp-includes/css/wp-pointer-rtl.min.css +++ b/wp-includes/css/wp-pointer-rtl.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #ddd;box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 60px 14px 18px;border:1px solid #3592b6;border-bottom:none;line-height:1.4em;font-size:14px;color:#fff;background:#00a0d2}.wp-pointer-content h3:before{background:#fff;border-radius:50%;color:#00a0d2;content:"\f227";font:400 20px/1.6 dashicons;position:absolute;top:8px;right:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content h4{margin:1.33em 20px 1em;font-size:1.15em}.wp-pointer-content p{padding:0 20px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:left;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-right:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#72777c;content:"\f153";display:block!important;font:400 16px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;right:-15px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{margin-top:-13px;padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{margin-left:-13px;padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{right:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer-undefined .wp-pointer-arrow-inner{top:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-bottom-color:#00a0d2;display:block;content:" "}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow-inner{bottom:1px;margin-right:-13px;margin-bottom:-13px;border:13px solid transparent;border-top-color:#fff;display:block;content:" "}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow-inner{left:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:" "}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow-inner{right:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:" "}@media screen and (max-width:782px){.wp-pointer{display:none}} \ No newline at end of file +.wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #ddd;box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 60px 14px 18px;border:1px solid #3592b6;border-bottom:none;line-height:1.4em;font-size:14px;color:#fff;background:#00a0d2}.wp-pointer-content h3:before{background:#fff;border-radius:50%;color:#00a0d2;content:"\f227";font:400 20px/1.6 dashicons;position:absolute;top:8px;right:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content h4{margin:1.33em 20px 1em;font-size:1.15em}.wp-pointer-content p{padding:0 20px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:left;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-right:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#72777c;content:"\f153";display:block!important;font:400 16px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;right:-15px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{margin-top:-13px;padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{margin-left:-13px;padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{right:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer-undefined .wp-pointer-arrow-inner{top:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-bottom-color:#00a0d2;display:block;content:" "}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow-inner{bottom:1px;margin-right:-13px;margin-bottom:-13px;border:13px solid transparent;border-top-color:#fff;display:block;content:" "}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow-inner{left:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:" "}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow-inner{right:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:" "}.wp-pointer.arrow-bottom .wp-pointer-content{margin-bottom:-45px}.wp-pointer.arrow-bottom .wp-pointer-arrow{top:100%;margin-top:-30px}@media screen and (max-width:782px){.wp-pointer{display:none}} \ No newline at end of file diff --git a/wp-includes/css/wp-pointer.css b/wp-includes/css/wp-pointer.css index f1856d995c..f8d58be9f6 100644 --- a/wp-includes/css/wp-pointer.css +++ b/wp-includes/css/wp-pointer.css @@ -207,6 +207,15 @@ content: " "; } +.wp-pointer.arrow-bottom .wp-pointer-content { + margin-bottom: -45px; +} + +.wp-pointer.arrow-bottom .wp-pointer-arrow { + top: 100%; + margin-top: -30px; +} + /* Disable pointers at responsive sizes */ @media screen and ( max-width: 782px ) { .wp-pointer { diff --git a/wp-includes/css/wp-pointer.min.css b/wp-includes/css/wp-pointer.min.css index c66c75be9e..3c047e5248 100644 --- a/wp-includes/css/wp-pointer.min.css +++ b/wp-includes/css/wp-pointer.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #ddd;box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 18px 14px 60px;border:1px solid #3592b6;border-bottom:none;line-height:1.4em;font-size:14px;color:#fff;background:#00a0d2}.wp-pointer-content h3:before{background:#fff;border-radius:50%;color:#00a0d2;content:"\f227";font:400 20px/1.6 dashicons;position:absolute;top:8px;left:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content h4{margin:1.33em 20px 1em;font-size:1.15em}.wp-pointer-content p{padding:0 20px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:right;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-left:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#72777c;content:"\f153";display:block!important;font:400 16px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;left:-15px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{margin-top:-13px;padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{margin-left:-13px;padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{left:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer-undefined .wp-pointer-arrow-inner{top:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-bottom-color:#00a0d2;display:block;content:" "}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow-inner{bottom:1px;margin-left:-13px;margin-bottom:-13px;border:13px solid transparent;border-top-color:#fff;display:block;content:" "}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow-inner{left:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:" "}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow-inner{right:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:" "}@media screen and (max-width:782px){.wp-pointer{display:none}} \ No newline at end of file +.wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #ddd;box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 18px 14px 60px;border:1px solid #3592b6;border-bottom:none;line-height:1.4em;font-size:14px;color:#fff;background:#00a0d2}.wp-pointer-content h3:before{background:#fff;border-radius:50%;color:#00a0d2;content:"\f227";font:400 20px/1.6 dashicons;position:absolute;top:8px;left:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content h4{margin:1.33em 20px 1em;font-size:1.15em}.wp-pointer-content p{padding:0 20px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:right;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-left:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#72777c;content:"\f153";display:block!important;font:400 16px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;left:-15px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{margin-top:-13px;padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{margin-left:-13px;padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{left:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer-undefined .wp-pointer-arrow-inner{top:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-bottom-color:#00a0d2;display:block;content:" "}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow-inner{bottom:1px;margin-left:-13px;margin-bottom:-13px;border:13px solid transparent;border-top-color:#fff;display:block;content:" "}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow-inner{left:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:" "}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow-inner{right:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:" "}.wp-pointer.arrow-bottom .wp-pointer-content{margin-bottom:-45px}.wp-pointer.arrow-bottom .wp-pointer-arrow{top:100%;margin-top:-30px}@media screen and (max-width:782px){.wp-pointer{display:none}} \ No newline at end of file diff --git a/wp-includes/version.php b/wp-includes/version.php index 4e71cf948b..57eb444e18 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '5.0-alpha-43245'; +$wp_version = '5.0-alpha-43246'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.