Add block attributes PHP definitions and UI

WordPress · Nov 1, 2019 · be27caa · be27caa
1 parent 7531800
commit be27caa
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 35 deletions.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -53,6 +53,7 @@ function gutenberg_reregister_core_block_types() {
 		'social-link.php'     => gutenberg_get_registered_social_link_blocks(),
 		'tag-cloud.php'       => 'core/tag-cloud',
 		'site-title.php'      => 'core/site-title',
+		'site-description.php'=> 'core/site-description',
 	);
 
 	$registry = WP_Block_Type_Registry::get_instance();

diff --git a/packages/block-library/src/site-description/block.json b/packages/block-library/src/site-description/block.json
@@ -3,37 +3,6 @@
 	"category": "layout",
 	"supports": {
 		"align": [ "wide", "full" ],
-		"html": false,
-		"multiple": false,
-		"reusable": 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"
-		}
+		"html": false
 	}
 }
diff --git a/packages/block-library/src/site-description/edit.js b/packages/block-library/src/site-description/edit.js
@@ -5,21 +5,45 @@ import {
 	useEntityProp,
 	__experimentalUseEntitySaving,
 } from '@wordpress/core-data';
-import { Button } from '@wordpress/components';
+import { Button, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { PlainText } from '@wordpress/block-editor';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	ContrastChecker,
+	FontSizePicker,
+	InspectorControls,
+	PanelColorSettings,
+	PlainText,
+	withColors,
+	withFontSizes,
+} from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ENTER } from '@wordpress/keycodes';
 
-function SiteDescriptionEdit( { insertDefaultBlock } ) {
+function SiteDescriptionEdit( {
+	attributes,
+	backgroundColor,
+	fontSize,
+	insertDefaultBlock,
+	setAttributes,
+	setBackgroundColor,
+	setFontSize,
+	setTextColor,
+	textColor,
+
+} ) {
 	const [ description, setDescription ] = useEntityProp( 'root', 'site', 'description' );
 	const [ isDirty, isSaving, save ] = __experimentalUseEntitySaving(
 		'root',
 		'site',
 		'description'
 	);
 
+	const { customFontSize, textAlign } = attributes;
+	const actualFontSize = customFontSize || fontSize.size;
+
 	const preventNewlines = ( event ) => {
 		if ( event.keyCode === ENTER ) {
 			event.preventDefault();
@@ -29,6 +53,41 @@ function SiteDescriptionEdit( { insertDefaultBlock } ) {
 
 	return (
 		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextAlign ) => setAttributes( { textAlign: nextAlign } ) }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody className="blocks-font-size" title={ __( 'Text Settings' ) }>
+					<FontSizePicker onChange={ setFontSize } value={ actualFontSize } />
+				</PanelBody>
+				<PanelColorSettings
+					title={ __( 'Color Settings' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: backgroundColor.color,
+							onChange: setBackgroundColor,
+							label: __( 'Background Color' ),
+						},
+						{
+							value: textColor.color,
+							onChange: setTextColor,
+							label: __( 'Text Color' ),
+						},
+					] }
+				>
+					<ContrastChecker
+						{ ...{
+							textColor: textColor.color,
+							backgroundColor: backgroundColor.color,
+						} }
+						fontSize={ actualFontSize }
+					/>
+				</PanelColorSettings>
+			</InspectorControls>
 			<Button
 				isPrimary
 				className="wp-block-site-description__save-button"
@@ -50,6 +109,8 @@ function SiteDescriptionEdit( { insertDefaultBlock } ) {
 }
 
 export default compose( [
+	withColors( 'backgroundColor', { textColor: 'color' } ),
+	withFontSizes( 'fontSize' ),
 	withSelect( ( select, { clientId } ) => {
 		const { getBlockIndex, getBlockRootClientId } = select( 'core/block-editor' );
 		const rootClientId = getBlockRootClientId( clientId );

diff --git a/packages/block-library/src/site-description/index.php b/packages/block-library/src/site-description/index.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * Server-side rendering of the `core/site-description` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/site-description` block on the server.
+ *
+ * @return string The render.
+ */
+function render_block_core_site_description() {
+	return sprintf( '<p>%s</p>', get_bloginfo( 'description' ) );
+}
+
+/**
+ * Registers the `core/site-description` block on the server.
+ */
+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',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_site_description' );