PRs to backport to Gutenberg 8.3 (#23026)

- Edit Site: fix template lookup. #22954 - Fix for FSE template parts: #23050 - Fix link color style rule. #23025 - Fix for link color: it needs to be opt-in. #23049 - Revert "Image Block: add caption field to placeholder" #23027 - Cover padding: reset button + hook namespace + improve visualizer #23041 - Fix failing 'Build artifacts' CI job (by updating `package-lock.json`): #23052
WordPress · Jun 10, 2020 · 17880de · 17880de
1 parent aa066b4
commit 17880de
Show file tree

Hide file tree

Showing 23 changed files with 327 additions and 163 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -703,6 +703,21 @@ function gutenberg_extend_settings_custom_spacing( $settings ) {
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_spacing' );
 
+
+/**
+ * Extends block editor settings to determine whether to use custom spacing controls.
+ * Currently experimental.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_extend_settings_link_color( $settings ) {
+	$settings['__experimentalEnableLinkColor'] = get_theme_support( 'experimental-link-color' );
+	return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_extend_settings_link_color' );
+
 /*
  * Register default patterns if not registered in Core already.
  */

diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -155,8 +155,8 @@ function gutenberg_edit_site_init( $hook ) {
 
 		$current_template = gutenberg_find_template_post_and_parts( $template_type );
 		if ( isset( $current_template ) ) {
-			$template_ids[ $current_template['template_post']->post_name ] = $current_template['template_post']->ID;
-			$template_part_ids = $template_part_ids + $current_template['template_part_ids'];
+			$template_ids[ $template_type ] = $current_template['template_post']->ID;
+			$template_part_ids              = $template_part_ids + $current_template['template_part_ids'];
 		}
 	}
 

diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -439,6 +439,16 @@ function gutenberg_experimental_global_styles_resolver( $tree ) {
 			)
 		);
 	}
+
+	if ( gutenberg_experimental_global_styles_has_theme_json_support() ) {
+		// To support all themes, we added in the block-library stylesheet
+		// a style rule such as .has-link-color a { color: var(--wp--style--color--link, #00e); }
+		// so that existing link colors themes used didn't break.
+		// We add this here to make it work for themes that opt-in to theme.json
+		// In the future, we may do this differently.
+		$stylesheet .= 'a { color: var(--wp--style--color--link, #00e); }';
+	}
+
 	return $stylesheet;
 }
 
@@ -455,15 +465,6 @@ function gutenberg_experimental_global_styles_resolver_styles( $block_selector,
 	$css_rule         = '';
 	$css_declarations = '';
 
-	if ( gutenberg_experimental_global_styles_has_theme_json_support() ) {
-		// To support all themes, we added in the block-library stylesheet
-		// a style rule such as .has-link-color a { color: var(--wp--style--color--link, #00e); }
-		// so that existing link colors themes used didn't break.
-		// We add this here to make it work for themes that opt-in to theme.json
-		// In the future, we may do this differently.
-		$css_rule = 'a { color: var(--wp--style--color--link, #00e); }';
-	}
-
 	foreach ( $block_styles as $property => $value ) {
 		// Only convert to CSS:
 		//

diff --git a/lib/template-loader.php b/lib/template-loader.php
@@ -134,68 +134,67 @@ function gutenberg_override_query_template( $template, $type, array $templates =
  * @return int[] A list of template parts IDs for the given block.
  */
 function create_auto_draft_for_template_part_block( $block ) {
-	if ( 'core/template-part' !== $block['blockName'] ) {
-		return array();
-	}
+	$template_part_ids = array();
 
-	if ( isset( $block['attrs']['postId'] ) ) {
-		// Template part is customized.
-		$template_part_id = $block['attrs']['postId'];
-	} else {
-		// A published post might already exist if this template part
-		// was customized elsewhere or if it's part of a customized
-		// template. We also check if an auto-draft was already created
-		// because preloading can make this run twice, so, different code
-		// paths can end up with different posts for the same template part.
-		// E.g. The server could send back post ID 1 to the client, preload,
-		// and create another auto-draft. So, if the client tries to resolve the
-		// post ID from the slug and theme, it won't match with what the server sent.
-		$template_part_query = new WP_Query(
-			array(
-				'post_type'      => 'wp_template_part',
-				'post_status'    => array( 'publish', 'auto-draft' ),
-				'name'           => $block['attrs']['slug'],
-				'meta_key'       => 'theme',
-				'meta_value'     => $block['attrs']['theme'],
-				'posts_per_page' => 1,
-				'no_found_rows'  => true,
-			)
-		);
-		$template_part_post  = $template_part_query->have_posts() ? $template_part_query->next_post() : null;
-		if ( $template_part_post ) {
-			$template_part_id = $template_part_post->ID;
+	if ( 'core/template-part' === $block['blockName'] ) {
+		if ( isset( $block['attrs']['postId'] ) ) {
+			// Template part is customized.
+			$template_part_id = $block['attrs']['postId'];
 		} else {
-			// Template part is not customized, get it from a file and make an auto-draft for it.
-			$template_part_file_path =
-			get_stylesheet_directory() . '/block-template-parts/' . $block['attrs']['slug'] . '.html';
-			if ( ! file_exists( $template_part_file_path ) ) {
-				if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ) ) {
-					$template_part_file_path =
-						dirname( __FILE__ ) . '/demo-block-template-parts/' . $block['attrs']['slug'] . '.html';
-					if ( ! file_exists( $template_part_file_path ) ) {
+			// A published post might already exist if this template part
+			// was customized elsewhere or if it's part of a customized
+			// template. We also check if an auto-draft was already created
+			// because preloading can make this run twice, so, different code
+			// paths can end up with different posts for the same template part.
+			// E.g. The server could send back post ID 1 to the client, preload,
+			// and create another auto-draft. So, if the client tries to resolve the
+			// post ID from the slug and theme, it won't match with what the server sent.
+			$template_part_query = new WP_Query(
+				array(
+					'post_type'      => 'wp_template_part',
+					'post_status'    => array( 'publish', 'auto-draft' ),
+					'name'           => $block['attrs']['slug'],
+					'meta_key'       => 'theme',
+					'meta_value'     => $block['attrs']['theme'],
+					'posts_per_page' => 1,
+					'no_found_rows'  => true,
+				)
+			);
+			$template_part_post  = $template_part_query->have_posts() ? $template_part_query->next_post() : null;
+			if ( $template_part_post ) {
+				$template_part_id = $template_part_post->ID;
+			} else {
+				// Template part is not customized, get it from a file and make an auto-draft for it.
+				$template_part_file_path =
+				get_stylesheet_directory() . '/block-template-parts/' . $block['attrs']['slug'] . '.html';
+				if ( ! file_exists( $template_part_file_path ) ) {
+					if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ) ) {
+						$template_part_file_path =
+							dirname( __FILE__ ) . '/demo-block-template-parts/' . $block['attrs']['slug'] . '.html';
+						if ( ! file_exists( $template_part_file_path ) ) {
+							return;
+						}
+					} else {
 						return;
 					}
-				} else {
-					return;
 				}
+				$template_part_id = wp_insert_post(
+					array(
+						'post_content' => file_get_contents( $template_part_file_path ),
+						'post_title'   => $block['attrs']['slug'],
+						'post_status'  => 'auto-draft',
+						'post_type'    => 'wp_template_part',
+						'post_name'    => $block['attrs']['slug'],
+						'meta_input'   => array(
+							'theme' => $block['attrs']['theme'],
+						),
+					)
+				);
 			}
-			$template_part_id = wp_insert_post(
-				array(
-					'post_content' => file_get_contents( $template_part_file_path ),
-					'post_title'   => $block['attrs']['slug'],
-					'post_status'  => 'auto-draft',
-					'post_type'    => 'wp_template_part',
-					'post_name'    => $block['attrs']['slug'],
-					'meta_input'   => array(
-						'theme' => $block['attrs']['theme'],
-					),
-				)
-			);
 		}
+		$template_part_ids[ $block['attrs']['slug'] ] = $template_part_id;
 	}
 
-	$template_part_ids = array( $block['attrs']['slug'] => $template_part_id );
-
 	foreach ( $block['innerBlocks'] as $inner_block ) {
 		$template_part_ids = array_merge( $template_part_ids, create_auto_draft_for_template_part_block( $inner_block ) );
 	}
@@ -319,6 +318,21 @@ function gutenberg_find_template_post_and_parts( $template_type, $template_hiera
 		}
 	}
 
+	// If we haven't found any template post by here, it means that this theme doesn't even come with a fallback
+	// `index.html` block template. We create one so that people that are trying to access the editor are greeted
+	// with a blank page rather than an error.
+	if ( ! $current_template_post && ( is_admin() || defined( 'REST_REQUEST' ) ) ) {
+		$current_template_post = array(
+			'post_title'  => 'index',
+			'post_status' => 'auto-draft',
+			'post_type'   => 'wp_template',
+			'post_name'   => 'index',
+		);
+		$current_template_post = get_post(
+			wp_insert_post( $current_template_post )
+		);
+	}
+
 	if ( $current_template_post ) {
 		$template_part_ids = array();
 		if ( is_admin() ) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -180,9 +180,13 @@ const getLinkColorFromAttributeValue = ( colors, value ) => {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const { colors, gradients } = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getSettings();
-	}, [] );
+	const { colors, gradients, __experimentalEnableLinkColor } = useSelect(
+		( select ) => {
+			return select( 'core/block-editor' ).getSettings();
+		},
+		[]
+	);
+
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
 	// synchronously causing our two callbacks to override changes
@@ -310,7 +314,8 @@ export function ColorEdit( props ) {
 						? onChangeGradient
 						: undefined,
 				},
-				...( hasLinkColorSupport( blockName )
+				...( __experimentalEnableLinkColor &&
+				hasLinkColorSupport( blockName )
 					? [
 							{
 								label: __( 'Link Color' ),

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
@@ -37,7 +37,22 @@ export function PaddingEdit( props ) {
 	const onChange = ( next ) => {
 		const newStyle = {
 			...style,
-			padding: next,
+			spacing: {
+				padding: next,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const onChangeShowVisualizer = ( next ) => {
+		const newStyle = {
+			...style,
+			visualizers: {
+				padding: next,
+			},
 		};
 
 		setAttributes( {
@@ -49,8 +64,9 @@ export function PaddingEdit( props ) {
 		web: (
 			<>
 				<BoxControl
-					values={ style?.padding }
+					values={ style?.spacing?.padding }
 					onChange={ onChange }
+					onChangeShowVisualizer={ onChangeShowVisualizer }
 					label={ __( 'Padding' ) }
 					units={ units }
 				/>
@@ -61,8 +77,8 @@ export function PaddingEdit( props ) {
 }
 
 export const paddingStyleMappings = {
-	paddingTop: [ 'padding', 'top' ],
-	paddingRight: [ 'padding', 'right' ],
-	paddingBottom: [ 'padding', 'bottom' ],
-	paddingLeft: [ 'padding', 'left' ],
+	paddingTop: [ 'spacing', 'padding', 'top' ],
+	paddingRight: [ 'spacing', 'padding', 'right' ],
+	paddingBottom: [ 'spacing', 'padding', 'bottom' ],
+	paddingLeft: [ 'spacing', 'padding', 'left' ],
 };
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -74,11 +74,17 @@ export function getInlineStyles( styles = {} ) {
 	};
 
 	const output = {};
-	Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => {
-		if ( has( styles, objectKey ) ) {
-			output[ styleKey ] = compileStyleValue( get( styles, objectKey ) );
+	Object.entries( mappings ).forEach(
+		( [ styleKey, ...otherObjectKeys ] ) => {
+			const [ objectKeys ] = otherObjectKeys;
+
+			if ( has( styles, objectKeys ) ) {
+				output[ styleKey ] = compileStyleValue(
+					get( styles, objectKeys )
+				);
+			}
 		}
-	} );
+	);
 
 	return output;
 }

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -475,7 +475,10 @@ function CoverEdit( {
 		<>
 			{ controls }
 			<Block.div className={ classes } data-url={ url } style={ style }>
-				<BoxControlVisualizer values={ styleAttribute?.padding } />
+				<BoxControlVisualizer
+					values={ styleAttribute?.spacing?.padding }
+					showValues={ styleAttribute?.visualizers?.padding }
+				/>
 				<ResizableCover
 					className="block-library-cover__resize-container"
 					onResizeStart={ () => {