Twenty Twenty: Update Jetpack compatibility (#14175)

* Twenty Twenty: Update Jetpack compatibility

* Fix PHPCS warnings

* Revert to click as the default Infinite Scroll behaviour


Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>

modules/theme-tools/compat/twentytwenty.css

@@ -2,6 +2,10 @@
  * Infinite scroll
  */
 
+#infinite-footer {
+	z-index: 1;
+}
+
 /* Globally hidden elements when Infinite Scroll is supported and in use. */
 .infinite-scroll .pagination-wrapper,
 .infinite-scroll.neverending .footer-nav-widgets-wrapper,
@@ -16,8 +20,12 @@
 	display: block;
 }
 
+.infinity-end.neverending #site-footer {
+	margin: 8rem 0 0;
+}
+
 .infinite-loader {
-	margin: calc(3 * 1rem) auto;
+	margin: 5rem auto;
 }
 
 .infinite-loader .spinner {
@@ -26,7 +34,7 @@
 }
 
 #site-content #infinite-handle {
-	margin: 0 auto;
+	margin: 5rem auto;
 	max-width: 58rem;
 	width: calc(100% - 8rem);
 }
@@ -102,6 +110,7 @@
 
 /* Authors widget */
 .widget_authors ul {
+	list-style: none;
 	margin-left: 0;
 }
 
@@ -114,6 +123,11 @@
 	margin-top: 2rem;
 }
 
+/* Flickr */
+.widget_flickr .flickr-size-thumbnail .flickr-images  {
+	justify-content: left;
+}
+
 /* EU cookie law */
 .widget_eu_cookie_law_widget #eu-cookie-law,
 .widget_eu_cookie_law_widget #eu-cookie-law .accept {

modules/theme-tools/compat/twentytwenty.php

@@ -8,6 +8,10 @@
 
 /**
  * Add Jetpack extra functionality to Twenty Twenty.
+ *
+ * See: https://jetpack.com/support/infinite-scroll/
+ * See: https://jetpack.com/support/responsive-videos/
+ * See: https://jetpack.com/support/content-options/
  */
 function twentytwenty_jetpack_setup() {
 	/**
@@ -16,13 +20,40 @@ function twentytwenty_jetpack_setup() {
 	add_theme_support(
 		'infinite-scroll',
 		array(
-			'type'      => 'click',
-			'container' => 'site-content',
-			'render'    => 'twentytwenty_infinite_scroll_render',
-			'footer'    => 'site-content',
+			'type'           => 'click',
+			'container'      => 'site-content',
+			'render'         => 'twentytwenty_infinite_scroll_render',
+			'footer'         => 'site-content',
+			'footer_widgets' => array(
+				'sidebar-1',
+				'sidebar-2',
+			),
+		)
+	);
+
+	// Add theme support for Content Options.
+	add_theme_support(
+		'jetpack-content-options',
+		array(
+			'post-details'    => array(
+				'stylesheet' => 'twentytwenty-style',
+				'date'       => '.post-date',
+				'categories' => '.entry-categories',
+				'tags'       => '.post-tags',
+				'author'     => '.post-author',
+			),
+			'featured-images' => array(
+				'archive'  => true,
+				'post'     => true,
+				'page'     => true,
+				'fallback' => false,
+			),
 		)
 	);
 
+	// Social Menu.
+	add_theme_support( 'jetpack-social-menu', 'svg' );
+
 	/**
 	 * Add theme support for geo-location.
 	 */
@@ -129,4 +160,3 @@ function twentytwenty_infinity_accent_color_css() {
 	wp_add_inline_style( 'twentytwenty-jetpack', $custom_css );
 }
 add_action( 'wp_enqueue_scripts', 'twentytwenty_infinity_accent_color_css' );
-