diff --git a/css/src/metabox.css b/css/src/metabox.css
index af7c3ce3f78..a59447ab6da 100644
--- a/css/src/metabox.css
+++ b/css/src/metabox.css
@@ -42,8 +42,8 @@
   display: none;
   max-width: 600px;
   width: 100%;
-  min-height: 100%;
   height: auto;
+  min-height: 100%;
   vertical-align: top;
   border: 1px solid rgba( 0,0,0,0.2 );
 }
@@ -74,10 +74,38 @@
   padding-top: 16px;
 }
 
+/* Target only the block-editor. */
+.edit-post-meta-boxes-area__container {
+  .wpseo-metabox {
+    .postbox-header {
+      border-bottom: 1px solid #ddd;
+    }
+
+    .inside {
+      background-color: #f1f5f9;
+    }
+
+    .wpseo-metabox-content {
+      max-width: none;
+      padding-top: 32px;
+      padding-right: 8px;
+      padding-bottom: 8px;
+      padding-left: 8px;
+    }
+
+    .wpseo-metabox-menu, .wpseo-meta-section {
+      margin: 0 auto;
+    }
+
+    .wpseo-meta-section.active {
+      display: block;
+    }
+  }
+}
+
 .wpseo-metabox-menu {
   max-width: 600px;
   padding: 0;
-  background-color: #fff;
 }
 
 .wpseo-metabox-menu ul {
diff --git a/packages/search-metadata-previews/package.json b/packages/search-metadata-previews/package.json
index da761a996f8..fd9b7f2ee60 100644
--- a/packages/search-metadata-previews/package.json
+++ b/packages/search-metadata-previews/package.json
@@ -17,6 +17,7 @@
   "scripts": {
     "build": "yarn clean && yarn build:js",
     "build:js": "babel src --out-dir build",
+    "watch": "yarn build:js --watch",
     "clean": "rm -rf build",
     "test": "jest",
     "lint": "eslint . --max-warnings=7"
diff --git a/packages/search-metadata-previews/src/snippet-preview/FixedWidthContainer.js b/packages/search-metadata-previews/src/snippet-preview/FixedWidthContainer.js
index e75343ca15e..20417f27e2c 100644
--- a/packages/search-metadata-previews/src/snippet-preview/FixedWidthContainer.js
+++ b/packages/search-metadata-previews/src/snippet-preview/FixedWidthContainer.js
@@ -5,6 +5,8 @@ import PropTypes from "prop-types";
 import debounce from "lodash/debounce";
 import { __ } from "@wordpress/i18n";
 
+const isMobileUserAgentRegExp = /mobi/i;
+
 const FixedWidth = styled.div`
 	overflow: auto;
 	width: ${ ( props ) => props.widthValue }px;
@@ -19,7 +21,7 @@ const Inner = styled.div`
 
 const ScrollHintContainer = styled.div`
 	text-align: center;
-	margin: 1em 0 5px;
+	margin: 1rem 0 0.5rem;
 `;
 
 const ScrollHint = styled.div`
@@ -30,7 +32,7 @@ const ScrollHint = styled.div`
 		display: inline-block;
 		margin-right: 10px;
 		font-size: 20px;
-		line-height: inherit;
+		line-height: 20px;
 		vertical-align: text-top;
 		content: "\\21c4";
 		box-sizing: border-box;
@@ -58,6 +60,7 @@ export default class FixedWidthContainer extends Component {
 
 		this.state = {
 			showScrollHint: false,
+			isMobileUserAgent: false,
 		};
 
 		this.setContainerRef = this.setContainerRef.bind( this );
@@ -89,10 +92,9 @@ export default class FixedWidthContainer extends Component {
 	 * @returns {void}
 	 */
 	determineSize() {
-		const width = this._container.offsetWidth;
-
 		this.setState( {
-			showScrollHint: width < this.props.width,
+			showScrollHint: this._container?.offsetWidth !== this._container?.scrollWidth,
+			isMobileUserAgent: isMobileUserAgentRegExp.test( window?.navigator?.userAgent ),
 		} );
 	}
 
@@ -111,12 +113,13 @@ export default class FixedWidthContainer extends Component {
 	render() {
 		const { width, padding, children, className, id } = this.props;
 
+		const classNameOrId = className || id;
 		const innerWidth = width - 2 * padding;
 
-		return <React.Fragment>
+		return <div className={ `${ classNameOrId }__wrapper` }>
 			<FixedWidth
 				id={ id }
-				className={ className }
+				className={ classNameOrId }
 				widthValue={ width }
 				paddingValue={ padding }
 				ref={ this.setContainerRef }
@@ -130,11 +133,14 @@ export default class FixedWidthContainer extends Component {
 			{ this.state.showScrollHint &&
 				<ScrollHintContainer>
 					<ScrollHint>
-						{ __( "Scroll to see the preview content.", "wordpress-seo" ) }
+						{ this.state.isMobileUserAgent
+							? __( "Drag to view the full preview.", "wordpress-seo" )
+							: __( "Scroll to see the preview content.", "wordpress-seo" )
+						}
 					</ScrollHint>
 				</ScrollHintContainer>
 			}
-		</React.Fragment>;
+		</div>;
 	}
 }
 
diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index 24368cb26c4..18a2ea54e71 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -266,8 +266,8 @@ const MobilePartContainer = styled.div`
 `;
 
 const SiteName = styled.div`
-	line-height: 18x; 
-	font-size: 14px; 
+	line-height: 18x;
+	font-size: 14px;
 	color: black;
 	max-width: ${ props => props.screenMode === MODE_DESKTOP ? "100%" : MOBILE_SITENAME_LIMIT };
 	overflow: hidden;
@@ -891,9 +891,10 @@ export default class SnippetPreview extends PureComponent {
 		 */
 		/* eslint-disable jsx-a11y/mouse-events-have-key-events */
 		return (
-			<section>
+			<section className="yoast-snippet-preview-section">
 				<Container
 					id="yoast-snippet-preview-container"
+					className="yoast-snippet-preview-container"
 					/*
 					 * MobileContainer doesn't use the width prop: avoid to
 					 * render an invalid `width` HTML attribute on the DOM node.
diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
index fbfb1a025d3..62de3953cb7 100644
--- a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
+++ b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
@@ -77,7 +77,7 @@ exports[`SnippetEditor Desktop mode and should switch to mobile 1`] = `
   align-self: center;
 }
 
-.c5 {
+.c6 {
   overflow: auto;
   width: 640px;
   padding: 0 20px;
@@ -89,7 +89,7 @@ exports[`SnippetEditor Desktop mode and should switch to mobile 1`] = `
   width: 600px;
 }
 
-.c6 {
+.c5 {
   background-color: #fff;
   font-family: arial,sans-serif;
   box-sizing: border-box;
@@ -339,108 +339,114 @@ exports[`SnippetEditor Desktop mode and should switch to mobile 1`] = `
         Desktop result
       </label>
     </fieldset>
-    <section>
+    <section
+      class="yoast-snippet-preview-section"
+    >
       <div
-        class="c5 c6"
-        id="yoast-snippet-preview-container"
+        class="c5 yoast-snippet-preview-container__wrapper"
       >
         <div
-          class="c7"
+          class="c6 c5 yoast-snippet-preview-container"
+          id="yoast-snippet-preview-container"
         >
           <div
-            class="SnippetPreview__DesktopPartContainer-sc-1hxg8jo-20"
+            class="c7"
           >
-            <span
-              class="screen-reader-text"
-              style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;"
-            >
-              Url preview:
-            </span>
             <div
-              class="c8"
+              class="SnippetPreview__DesktopPartContainer-sc-1hxg8jo-20"
             >
+              <span
+                class="screen-reader-text"
+                style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;"
+              >
+                Url preview:
+              </span>
               <div
-                class="c8 c9"
+                class="c8"
               >
                 <div
-                  class="c10"
-                >
-                  <img
-                    alt=""
-                    class="c11"
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                  />
-                </div>
-                <span
-                  class="c12"
+                  class="c8 c9"
                 >
                   <div
-                    class="c13"
+                    class="c10"
                   >
-                    Test site name
+                    <img
+                      alt=""
+                      class="c11"
+                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
+                    />
                   </div>
                   <span
-                    class="c14"
+                    class="c12"
                   >
-                    example.org
-                  </span>
-                  <span
-                    class="c15"
-                  >
-                     › test-slug
+                    <div
+                      class="c13"
+                    >
+                      Test site name
+                    </div>
+                    <span
+                      class="c14"
+                    >
+                      example.org
+                    </span>
+                    <span
+                      class="c15"
+                    >
+                       › test-slug
+                    </span>
+                    <span
+                      class="c16"
+                    >
+                      <svg
+                        fill="#4d5156"
+                        style="width: 18px;"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                        />
+                      </svg>
+                    </span>
                   </span>
+                </div>
+              </div>
+              <span
+                class="screen-reader-text"
+                style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;"
+              >
+                SEO title preview:
+              </span>
+              <div
+                class="c17"
+              >
+                <div
+                  class="c18 c19"
+                >
                   <span
-                    class="c16"
+                    class="c20"
                   >
-                    <svg
-                      fill="#4d5156"
-                      style="width: 18px;"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      />
-                    </svg>
+                    Test title
                   </span>
-                </span>
+                </div>
               </div>
             </div>
-            <span
-              class="screen-reader-text"
-              style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;"
-            >
-              SEO title preview:
-            </span>
             <div
-              class="c17"
+              class="SnippetPreview__DesktopPartContainer-sc-1hxg8jo-20"
             >
+              <span
+                class="screen-reader-text"
+                style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;"
+              >
+                Meta description preview:
+              </span>
               <div
-                class="c18 c19"
+                class="c21"
               >
-                <span
-                  class="c20"
-                >
-                  Test title
-                </span>
+                Test description, %%replacement_variable%%
               </div>
             </div>
           </div>
-          <div
-            class="SnippetPreview__DesktopPartContainer-sc-1hxg8jo-20"
-          >
-            <span
-              class="screen-reader-text"
-              style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;"
-            >
-              Meta description preview:
-            </span>
-            <div
-              class="c21"
-            >
-              Test description, %%replacement_variable%%
-            </div>
-          </div>
         </div>
       </div>
     </section>
@@ -809,9 +815,11 @@ exports[`SnippetEditor Mobile mode 1`] = `
         Desktop result
       </label>
     </fieldset>
-    <section>
+    <section
+      class="yoast-snippet-preview-section"
+    >
       <div
-        class="c5"
+        class="c5 yoast-snippet-preview-container"
         id="yoast-snippet-preview-container"
       >
         <div