Remove inline style colors atributes from paragraph.

blocks/api/index.js

@@ -1,7 +1,7 @@
 export { createBlock, switchToBlockType, createReusableBlock } from './factory';
 export { default as parse, getBlockAttributes } from './parser';
 export { default as rawHandler } from './raw-handling';
-export { default as serialize, getBlockDefaultClassname, getBlockContent } from './serializer';
+export { default as serialize, getBlockDefaultClassname, getBlockRandomAnchor, getBlockContent } from './serializer';
 export { isValidBlock } from './validation';
 export { getCategories } from './categories';
 export {

blocks/api/serializer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, reduce, isObject, castArray, compact, startsWith } from 'lodash';
+import { isEmpty, reduce, isObject, castArray, compact, startsWith, random } from 'lodash';
 import { html as beautifyHtml } from 'js-beautify';
 
 /**
@@ -15,15 +15,45 @@ import { applyFilters } from '@wordpress/hooks';
  */
 import { getBlockType, getUnknownTypeHandlerName } from './registration';
 
+/**
+ * Returns the block's name with common prefixes ('core/', 'core-') dropped
+ *
+ * @param {String}   blockName  The block name
+ * @return {string}             Friendly name
+ */
+function friendlyBlockName( blockName ) {
+	return blockName.replace( /\//, '-' ).replace( /^core-/, '' );
+}
+
 /**
  * Returns the block's default classname from its name
  *
  * @param {String}   blockName  The block name
  * @return {string}             The block's default class
  */
 export function getBlockDefaultClassname( blockName ) {
-	// Drop common prefixes: 'core/' or 'core-' (in 'core-embed/')
-	return 'wp-block-' + blockName.replace( /\//, '-' ).replace( /^core-/, '' );
+	return `wp-block-${ friendlyBlockName( blockName ) }`;
+}
+
+/**
+ * Returns a random base 36 string, 36^7 possible strings, maximum seven chars
+ * According to the birthday paradox the probability of repetition is given by 1 - e^(-k*(k-1)/(2*36^7)) where k is the number of strings generated
+ * If used to generate ids it's relatively safe as the expected number of ids we have to generate before finding the first collision is approximately 350848
+ *
+ * @return {string}             Random string
+ */
+function randomBase36String() {
+	return random( 0, Math.pow( 36, 7 ), false ).toString( 36 );
+}
+
+/**
+ * Returns random anchor for the block
+ *
+ * @param {String}   blockName  The block name
+ * @return {string}             The block's default class
+ */
+export function getBlockRandomAnchor( blockName ) {
+	return `${ friendlyBlockName( blockName ) }-${ randomBase36String() }`;
 }
 
 /**

blocks/hooks/anchor.js

@@ -36,9 +36,6 @@ export function addAttribute( settings ) {
 		settings.attributes = assign( settings.attributes, {
 			anchor: {
 				type: 'string',
-				source: 'attribute',
-				attribute: 'id',
-				selector: '*',
 			},
 		} );
 	}

blocks/hooks/custom-styles.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockRandomAnchor, hasBlockSupport } from '../api';
+
+const CUSTOM_STYLE_ATTRIBUTES = [ 'backgroundColor', 'textColor' ];
+
+const hasCustomStyleAttributes = ( attributes ) => (
+	CUSTOM_STYLE_ATTRIBUTES.some( attr => attributes[ attr ] )
+);
+
+function withCustomStylesAnchor( BlockEdit ) {
+	return class CustomStylesAnchor extends Component {
+		componentWillReceiveProps( nextProps ) {
+			if ( hasBlockSupport( nextProps.name, 'anchor' ) &&
+				hasBlockSupport( nextProps.name, 'customStyles' ) &&
+				! nextProps.attributes.anchor &&
+				hasCustomStyleAttributes( nextProps.attributes )
+			) {
+				nextProps.setAttributes( {
+					anchor: getBlockRandomAnchor( nextProps.name ),
+				} );
+			}
+		}
+
+		render() {
+			return (
+				<BlockEdit { ...this.props } />
+			);
+		}
+	};
+}
+
+export function addCustomStylesClass( extraProps, blockType, attributes ) {
+	if ( hasBlockSupport( blockType.name, 'customStyles' ) && hasCustomStyleAttributes( attributes ) ) {
+		extraProps.className = classnames( extraProps.className, 'has-custom-styles' );
+	}
+
+	return extraProps;
+}
+
+export default function customAnchorStyles() {
+	addFilter( 'blocks.BlockEdit', 'core/custom-styles/inspector-control', withCustomStylesAnchor );
+	addFilter( 'blocks.getSaveContent.extraProps', 'core/custom-styles/save-props', addCustomStylesClass );
+}

blocks/hooks/index.js

@@ -3,10 +3,12 @@
  */
 import anchor from './anchor';
 import customClassName from './custom-class-name';
+import customStyles from './custom-styles';
 import generatedClassName from './generated-class-name';
 import matchers from './matchers';
 
 anchor();
 customClassName();
+customStyles();
 generatedClassName();
 matchers();

blocks/library/paragraph/index.js

@@ -206,6 +206,8 @@ registerBlockType( 'core/paragraph', {
 
 	supports: {
 		className: false,
+		anchor: true,
+		customStyles: true,
 	},
 
 	attributes: {
@@ -267,15 +269,13 @@ registerBlockType( 'core/paragraph', {
 	edit: ParagraphBlock,
 
 	save( { attributes } ) {
-		const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
+		const { width, align, content, dropCap, backgroundColor, fontSize } = attributes;
 		const className = classnames( {
 			[ `align${ width }` ]: width,
 			'has-background': backgroundColor,
 			'has-drop-cap': dropCap,
 		} );
 		const styles = {
-			backgroundColor: backgroundColor,
-			color: textColor,
 			fontSize: fontSize,
 			textAlign: align,
 		};

lib/blocks.php

@@ -171,6 +171,39 @@ function gutenberg_render_block( $block ) {
 	return '';
 }
 
+/**
+ * Given an array of parsed blocks, returns the css styles they require.
+ *
+ * @since 1.8.1
+ *
+ * @param array $blocks Parsed block array.
+ *
+ * @return string CSS style block or empty string
+ */
+function do_blocks_styles( $blocks ) {
+	$map_attrs_styles = array(
+		'textColor'       => 'color',
+		'backgroundColor' => 'background-color',
+	);
+
+	$styles = '';
+	foreach ( $blocks as $block ) {
+		$attributes = is_array( $block['attrs'] ) ? $block['attrs'] : array();
+		if ( isset( $attributes['anchor'] ) ) {
+			$rules = '';
+			foreach ( $map_attrs_styles as $attr_key => $css_property ) {
+				if ( isset( $attributes[ $attr_key ] ) ) {
+					$rules .= "\n\t" . esc_attr( sprintf( '%1$s: %2$s;', $css_property, $attributes[ $attr_key ] ) );
+				}
+			}
+			if ( '' !== $rules ) {
+				$styles .= sprintf( "\n.has-custom-styles#%1\$s { %2\$s\n}", esc_attr( $attributes['anchor'] ), $rules );
+			}
+		}
+	}
+	return '' !== $styles ? sprintf( "<style type\"text/css\">%1\$s\n</style>", $styles ) : '';
+}
+
 /**
  * Parses dynamic blocks out of `post_content` and re-renders them.
  *
@@ -182,7 +215,7 @@ function gutenberg_render_block( $block ) {
 function do_blocks( $content ) {
 	$blocks = gutenberg_parse_blocks( $content );
 
-	$content_after_blocks = '';
+	$content_after_blocks = do_blocks_styles( $blocks );
 	foreach ( $blocks as $block ) {
 		$content_after_blocks .= gutenberg_render_block( $block );
 	}