Classic editor and Cloudflare notification modals improvements.

lib/compat.php

@@ -183,17 +183,22 @@ function gutenberg_warn_classic_about_blocks() {
 		<style type="text/css">
 			#blocks-in-post-dialog .notification-dialog {
 				padding: 25px;
+				top: 50%;
+				margin: 0;
+				transform: translate(-50%, -50%);
 			}
 
 			@media only screen and (max-height: 480px), screen and (max-width: 450px) {
 				#blocks-in-post-dialog .notification-dialog {
 					width: 100%;
 					height: 100%;
+					box-sizing: border-box;
 					max-height: 100%;
 					position: fixed;
 					top: 0;
 					margin: 0;
 					left: 0;
+					transform: none;
 				}
 			}
 		</style>
@@ -307,6 +312,9 @@ function gutenberg_warn_classic_about_cloudflare() {
 		<style type="text/css">
 			#cloudflare-block-dialog .notification-dialog {
 				padding: 25px;
+				top: 50%;
+				margin: 0;
+				transform: translate(-50%, -50%);
 			}
 
 			#cloudflare-block-dialog ul {
@@ -318,11 +326,13 @@ function gutenberg_warn_classic_about_cloudflare() {
 				#cloudflare-block-dialog .notification-dialog {
 					width: 100%;
 					height: 100%;
+					box-sizing: border-box;
 					max-height: 100%;
 					position: fixed;
 					top: 0;
 					margin: 0;
 					left: 0;
+					transform: none;
 				}
 			}
 		</style>
@@ -331,7 +341,7 @@ function gutenberg_warn_classic_about_cloudflare() {
 			<div class="notification-dialog-background"></div>
 			<div class="notification-dialog">
 				<div class="cloudflare-block-message">
-					<h2><?php _e( 'Cloudflare is blocking REST API requests.', 'gutenberg' ); ?></h2>
+					<h2><?php _e( 'Cloudflare is blocking REST API requests', 'gutenberg' ); ?></h2>
 					<p><?php _e( 'Your site uses Cloudflare, which provides a Web Application Firewall (WAF) to secure your site against attacks. Unfortunately, some of these WAF rules are incorrectly blocking legitimate access to your site, preventing Gutenberg from functioning correctly.', 'gutenberg' ); ?></p>
 					<p><?php _e( "We're working closely with Cloudflare to fix this issue, but in the mean time, you can work around it in one of two ways:", 'gutenberg' ); ?></p>
 					<ul>
@@ -387,7 +397,7 @@ function gutenberg_warn_classic_about_cloudflare() {
 					// Reveal the modal and set focus on the Gutenberg button.
 					dialog.warning
 						.removeClass( 'hidden' )
-						.find( '.cloudflare-block-gutenberg-button' ).focus();
+						.find( '.cloudflare-block-classic-button' ).focus();
 
 					// Attach event handlers.
 					dialog.warningTabbables.on( 'keydown', dialog.constrainTabbing );