Add sizes attribute for responsive images markup

functions.php

@@ -147,7 +147,12 @@ function twentynineteen_content_width() {
 	// This variable is intended to be overruled from themes.
 	// Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}.
 	// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
-	$GLOBALS['content_width'] = apply_filters( 'twentynineteen_content_width', 640 );
+	$GLOBALS['content_width'] = apply_filters( 'twentynineteen_content_width', 740 );
+	$GLOBALS['block_width'] = array(
+		'default' => 723,
+		'wide'    => 800,
+		'full'    => 1024,
+	);
 }
 add_action( 'after_setup_theme', 'twentynineteen_content_width', 0 );
 

inc/template-functions.php

@@ -112,6 +112,28 @@ function twentynineteen_image_filters_enabled() {
 	return true;
 }
 
+/**
+ * Add custom image sizes attribute to enhance responsive image functionality
+ * for content images.
+ *
+ * @since Twenty Nineteen 1.0
+ *
+ * @param string $sizes A source size value for use in a 'sizes' attribute.
+ * @param array  $size  Image size. Accepts an array of width and height
+ *                      values in pixels (in that order).
+ * @return string A source size value for use in a content image 'sizes' attribute.
+ */
+function twentynineteen_content_image_sizes_attr( $sizes, $size ) {
+	$width = $size[0];
+
+	if ( 723 <= $width ) {
+		$sizes = '(max-width: 767px) 723px, (max-width: 1167px) calc(8 * (100vw / 12)), (min-width: 1168px) calc(6 * (100vw / 12)), 100vw';
+	}
+
+	return $sizes;
+}
+add_filter( 'wp_calculate_image_sizes', 'twentynineteen_content_image_sizes_attr', 10, 2 );
+
 /**
  * Returns the size for avatars used in the theme.
  */