Add a wrapper around the read more button and apply a 1em top margin (#…

…1003)

* Add a wrapper around the read more button and apply a 1em top margin

* Set the read more button to be centered

functions.php

@@ -570,7 +570,7 @@ function twentytwenty_block_editor_settings() {
  * @return string $html
  */
 function twentytwenty_read_more_tag( $html ) {
-	return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a>', get_the_title( get_the_ID() ) ), $html );
+	return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html );
 }
 
 add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

style-rtl.css

@@ -2969,6 +2969,10 @@ h2.entry-title {
 	padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem);
 }
 
+.read-more-button-wrap {
+	margin-top: 1em;
+}
+
 /* Block: Columns ---------------------------- */
 
 .wp-block-columns.alignfull,
@@ -3421,6 +3425,10 @@ figure.wp-block-table.is-style-stripes {
 	margin-bottom: 0;
 }
 
+.read-more-button-wrap {
+	text-align: center;
+}
+
 .entry-content a:hover,
 .entry-content a:focus {
 	text-decoration: none;

style.css

@@ -2987,6 +2987,10 @@ h2.entry-title {
 	padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem);
 }
 
+.read-more-button-wrap {
+	margin-top: 1em;
+}
+
 /* Block: Columns ---------------------------- */
 
 .wp-block-columns.alignfull,
@@ -3443,6 +3447,10 @@ figure.wp-block-table.is-style-stripes {
 	margin-bottom: 0;
 }
 
+.read-more-button-wrap {
+	text-align: center;
+}
+
 .entry-content a:hover,
 .entry-content a:focus {
 	text-decoration: none;