Post editor: apply space below content using a pseudo-element instead…

… of padding-bottom (#64639)

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: PC888 <kracked888@git.wordpress.org>

packages/edit-post/src/components/layout/index.js

@@ -74,7 +74,6 @@ function useEditorStyles() {
 		hasThemeStyleSupport,
 		editorSettings,
 		isZoomedOutView,
-		hasMetaBoxes,
 		renderingMode,
 		postType,
 	} = useSelect( ( select ) => {
@@ -86,7 +85,6 @@ function useEditorStyles() {
 				select( editPostStore ).isFeatureActive( 'themeStyles' ),
 			editorSettings: select( editorStore ).getEditorSettings(),
 			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
-			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
 			renderingMode: getRenderingMode(),
 			postType: _postType,
 		};
@@ -132,16 +130,13 @@ function useEditorStyles() {
 		// bottom, there needs to be room to scroll up.
 		if (
 			! isZoomedOutView &&
-			! hasMetaBoxes &&
 			renderingMode === 'post-only' &&
 			! DESIGN_POST_TYPES.includes( postType )
 		) {
 			return [
 				...baseStyles,
 				{
-					// Should override global styles padding, so ensure 0-1-0
-					// specificity.
-					css: ':root :where(body){padding-bottom: 40vh}',
+					css: ':root :where(.editor-styles-wrapper)::after {content: ""; display: block; height: 40vh;}',
 				},
 			];
 		}