Restore json attributes and add classes and styles to the editor comp…

…onent
WordPress · Nov 1, 2019 · a8207d3 · a8207d3
1 parent be27caa
commit a8207d3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/packages/block-library/src/site-description/block.json b/packages/block-library/src/site-description/block.json
@@ -4,5 +4,34 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false
+	},
+	"attributes": {
+		"align": {
+			"type": "string",
+			"default": "wide"
+		},
+		"textAlign": {
+			"type": "string",
+			"default": "center"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
+		},
+		"customFontSize": {
+			"type": "number"
+		}
 	}
 }
diff --git a/packages/block-library/src/site-description/edit.js b/packages/block-library/src/site-description/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -25,6 +30,7 @@ import { ENTER } from '@wordpress/keycodes';
 function SiteDescriptionEdit( {
 	attributes,
 	backgroundColor,
+	className,
 	fontSize,
 	insertDefaultBlock,
 	setAttributes,
@@ -98,11 +104,24 @@ function SiteDescriptionEdit( {
 				{ __( 'Update' ) }
 			</Button>
 			<PlainText
-				placeholder={ __( 'Site Description' ) }
-				value={ description }
-				onChange={ setDescription }
+				className={ classNames( 'site-description', className, {
+					'has-text-color': textColor.color,
+					'has-background': backgroundColor.color,
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+					[ backgroundColor.class ]: backgroundColor.class,
+					[ textColor.class ]: textColor.class,
+					[ fontSize.class ]: ! customFontSize && fontSize.class,
+				} ) }
 				isStylable
+				onChange={ setDescription }
 				onKeyDown={ preventNewlines }
+				placeholder={ __( 'Site Description' ) }
+				style={ {
+					backgroundColor: backgroundColor.color,
+					color: textColor.color,
+					fontSize: actualFontSize ? actualFontSize + 'px' : undefined,
+				} }
+				value={ description }
 			/>
 		</>
 	);

diff --git a/packages/block-library/src/site-description/index.php b/packages/block-library/src/site-description/index.php
@@ -21,38 +21,7 @@ function register_block_core_site_description() {
 	register_block_type(
 		'core/site-description',
 		array(
-			'attributes'      => array(
-				'className'             => array(
-					'type'    => 'string',
-					'default' => '',
-				),
-				'align'                 => array(
-					'type'    => 'string',
-				),
-				'textAlign'             => array(
-					'type'    => 'string',
-					'default' => 'center',
-				),
-				'textColor'             => array(
-					'type' => 'string',
-				),
-				'customTextColor'       => array(
-					'type' => 'string',
-				),
-				'backgroundColor'       => array(
-					'type' => 'string',
-				),
-				'customBackgroundColor' => array(
-					'type' => 'string',
-				),
-				'fontSize'              => array(
-					'type'    => 'string',
-				),
-				'customFontSize'        => array(
-					'type' => 'number',
-				),
-			),
-		'render_callback' => 'render_block_core_site_description',
+			'render_callback' => 'render_block_core_site_description',
 		)
 	);
 }