Test/optional ignore style validation

packages/block-library/src/spacer/index.js

@@ -20,4 +20,5 @@ export const settings = {
 	edit,
 	save,
 	deprecated,
+	validationRules: { ignoreStyles: true },
 };

packages/blocks/src/api/registration.js

@@ -265,6 +265,9 @@ export function registerBlockType( blockNameOrMetadata, settings ) {
 		supports: {},
 		styles: [],
 		variations: [],
+		validationRules: settings.validationRules
+			? settings.validationRules
+			: {},
 		save: () => null,
 		...serverSideBlockDefinitions?.[ name ],
 		...settings,

packages/blocks/src/api/test/validation.js

@@ -282,13 +282,13 @@ describe( 'validation', () => {
 				expect( isEqual ).toBe( true );
 			} );
 
-			it( 'returns false if not same style', () => {
+			it( 'returns true even if the style is different', () => {
 				const isEqual = isEqualAttributesOfName.style(
 					'background-image: url( "https://wordpress.org/img.png" ); color: red;',
 					"color: red;  font-size: 13px; background-image: url('https://wordpress.org/img.png');"
 				);
 
-				expect( isEqual ).toBe( false );
+				expect( isEqual ).toBe( true );
 			} );
 		} );
 

packages/blocks/src/api/validation/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Tokenizer } from 'simple-html-tokenizer';
-import { identity, xor, fromPairs, isEqual, includes, stubTrue } from 'lodash';
+import { identity, xor, fromPairs, includes, isEqual, stubTrue } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import { getSaveContent } from '../serializer';
 import {
 	getFreeformContentHandlerName,
 	getUnregisteredTypeHandlerName,
+	getBlockType,
 } from '../registration';
 import { normalizeBlockType } from '../utils';
 
@@ -407,8 +408,10 @@ export const isEqualAttributesOfName = {
 			...[ actual, expected ].map( getTextPiecesSplitOnWhitespace )
 		).length;
 	},
-	style: ( actual, expected ) => {
-		return isEqual( ...[ actual, expected ].map( getStyleProperties ) );
+	style: ( actual, expected, validationRules ) => {
+		return validationRules.ignoreStyles === true
+			? true
+			: isEqual( ...[ actual, expected ].map( getStyleProperties ) );
 	},
 	// For each boolean attribute, mere presence of attribute in both is enough
 	// to assume equivalence.
@@ -430,6 +433,7 @@ export const isEqualAttributesOfName = {
 export function isEqualTagAttributePairs(
 	actual,
 	expected,
+	validationRules = {},
 	logger = createLogger()
 ) {
 	// Attributes is tokenized as tuples. Their lengths should match. This also
@@ -468,7 +472,13 @@ export function isEqualTagAttributePairs(
 
 		if ( isEqualAttributes ) {
 			// Defer custom attribute equality handling.
-			if ( ! isEqualAttributes( actualValue, expectedValue ) ) {
+			if (
+				! isEqualAttributes(
+					actualValue,
+					expectedValue,
+					validationRules
+				)
+			) {
 				logger.warning(
 					'Expected attribute `%s` of value `%s`, saw `%s`.',
 					name,
@@ -498,7 +508,12 @@ export function isEqualTagAttributePairs(
  * @type {Object}
  */
 export const isEqualTokensOfType = {
-	StartTag: ( actual, expected, logger = createLogger() ) => {
+	StartTag: (
+		actual,
+		expected,
+		validationRules = {},
+		logger = createLogger()
+	) => {
 		if (
 			actual.tagName !== expected.tagName &&
 			// Optimization: Use short-circuit evaluation to defer case-
@@ -516,6 +531,7 @@ export const isEqualTokensOfType = {
 
 		return isEqualTagAttributePairs(
 			...[ actual, expected ].map( getMeaningfulAttributePairs ),
+			validationRules,
 			logger
 		);
 	},
@@ -602,7 +618,12 @@ export function isClosedByToken( currentToken, nextToken ) {
  *
  * @return {boolean} Whether HTML strings are equivalent.
  */
-export function isEquivalentHTML( actual, expected, logger = createLogger() ) {
+export function isEquivalentHTML(
+	actual,
+	expected,
+	validationRules = {},
+	logger = createLogger()
+) {
 	// Short-circuit if markup is identical.
 	if ( actual === expected ) {
 		return true;
@@ -649,7 +670,12 @@ export function isEquivalentHTML( actual, expected, logger = createLogger() ) {
 		const isEqualTokens = isEqualTokensOfType[ actualToken.type ];
 		if (
 			isEqualTokens &&
-			! isEqualTokens( actualToken, expectedToken, logger )
+			! isEqualTokens(
+				actualToken,
+				expectedToken,
+				validationRules,
+				logger
+			)
 		) {
 			return false;
 		}
@@ -728,10 +754,11 @@ export function validateBlock( block, blockTypeOrName ) {
 
 		return [ false, logger.getItems() ];
 	}
-
+	const { validationRules } = getBlockType( block.name );
 	const isValid = isEquivalentHTML(
 		block.originalContent,
 		generatedBlockContent,
+		validationRules,
 		logger
 	);
 

test/integration/fixtures/blocks/core__cover__deprecated-4.json

@@ -5,6 +5,7 @@
 		"attributes": {
 			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
 			"id": 35,
+			"isRepeated": false,
 			"hasParallax": false,
 			"dimRatio": 50,
 			"backgroundType": "image",