FSE: Add a site description block. #33720

kwight · 2019-06-06T23:07:26Z

Changes proposed in this Pull Request

Let's add a basic site description block, for use with Full Site Editing.

Testing instructions

Load your FSE testing environment with this branch active.
Add a "Site Description" block anywhere you like (it's not yet scoped to anything in particular).
Verify that the Edit preview represents the same data and styling as on the site's front-end.

Fixes #33107 .

matticbot · 2019-06-06T23:07:27Z

Test live: https://calypso.live/?branch=add/fse-site-description

matticbot · 2019-06-06T23:14:10Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

mmtr · 2019-06-13T05:19:23Z

...full-site-editing/full-site-editing-plugin/full-site-editing/blocks/site-description/edit.js

+				<PlainText
+					className="wp-block-a8c-site-description"
+					value={ this.state.value }
+					onChange={ value => this.setState( { value } ) }


We should also update an attribute of this block when we change the site description within the block. Otherwise, the editor won't be aware that the page content has changed and the "Update" button will remain disabled:

Oh, interesting; my Update button is always available (although that makes no sense either 🙃 ). Will dig further. But we don't want to be saving attributes for this block (we shouldn't ever see  in markup for instance) 🤔

#33761 (comment)

...l-site-editing/full-site-editing-plugin/full-site-editing/blocks/site-description/style.scss

mmtr · 2019-06-13T05:39:31Z

...full-site-editing/full-site-editing-plugin/full-site-editing/blocks/site-description/edit.js

+	componentDidUpdate( prevProps ) {
+		if (
+			prevProps.isSaving === false &&
+			this.props.isSaving === true &&


This is also updating the site description during autosaves (i.e. when clicking on the Preview button), but I think we should only update it when the user explicitly has clicked on the Publish/Update button.

mmtr · 2019-06-14T05:04:29Z

I noted you removed the previous code that was allowing to update the site description from the block. Are you planning to add that back on this PR?

gwwar · 2019-06-14T21:15:15Z

...full-site-editing/full-site-editing-plugin/full-site-editing/blocks/site-description/edit.js

+
+	componentDidMount() {
+		const { setAttributes } = this.props;
+		try {


This is equivalent to apiFetch.then( successHandler, rejectHandler ) or apiFetch.then( successHandler ).catch( anyThrownErrorsFromErrorOrSuccessHandler );

up the API call.

Publish/Update.

better cooperate with other editor UI state.

kwight · 2019-06-17T20:45:14Z

I noted you removed the previous code that was allowing to update the site description from the block. Are you planning to add that back on this PR?

I did! I stripped it out because I was getting confused while sorting the attributes. With attributes working properly, I can add it back in, yes 👍

mmtr · 2019-06-18T06:29:27Z

@kwight I committed some changes reverting the usage of attributes and moving back to a local state approach. We have #34004 in progress to determine a better way to make the Publish button clickable when there are changes in the site blocks. That means that I also added back the logic that was saving the description.

In the last commit (c2efb58) I also modified the code to align it more with the work done in #33761. Feel free to review those changes and land this PR if you're happy with them or change anything you want :)

mmtr · 2019-06-18T06:30:54Z

apps/full-site-editing/full-site-editing-plugin/full-site-editing/class-full-site-editing.php

@@ -312,7 +312,7 @@ public function enqueue_script_and_style() {
 		wp_enqueue_style(
 			'a8c-full-site-editing-style',
 			plugins_url( 'dist/' . $style_file, __FILE__ ),
-			array(),
+			'wp-edit-post',


This is to ensure that our styles are loaded after the Gutenberg styles for the editor, making easier to override a specific style.

kwight · 2019-06-18T17:03:58Z

@mmtr Ooooh, fantastic, thank you – I ❤️ it all (and you managed to get the error notices in there too!). I've added some followup questions/tasks in #34093, but I'll go ahead and merge this as-is. 🎉

gwwar · 2019-06-18T17:11:57Z

...full-site-editing/full-site-editing-plugin/full-site-editing/blocks/site-description/edit.js

+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { PlainText } from '@wordpress/block-editor';


We probably should use the older editor package until support is dropped. This will allow for Gutenberg support across more versions

Oh, will do, good idea.

yoavf · 2019-06-18T19:02:55Z

...ull-site-editing/full-site-editing-plugin/full-site-editing/blocks/site-description/index.js

+import './style.scss';
+
+registerBlockType( 'a8c/site-description', {
+	title: __( 'Site Description2' ),


@kwight Typo?

That was me trying to verify I was getting the latest build on my local environment 😅. Will prep a PR reverting this in a bit

kwight requested a review from a team June 6, 2019 23:07

kwight self-assigned this Jun 6, 2019

kwight added [Goal] Full Site Editing [Status] In Progress [Feature] Post/Page Editor The editor for editing posts and pages. labels Jun 6, 2019

kwight force-pushed the add/fse-site-description branch from 918a344 to 07d134b Compare June 11, 2019 19:56

kwight changed the title ~~FSE: Add a site description block. [WIP]~~ FSE: Add a site description block. Jun 12, 2019

kwight added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Jun 12, 2019

mmtr reviewed Jun 13, 2019

View reviewed changes

...l-site-editing/full-site-editing-plugin/full-site-editing/blocks/site-description/style.scss Outdated Show resolved Hide resolved

mmtr reviewed Jun 13, 2019

View reviewed changes

kwight requested a review from a team as a code owner June 13, 2019 18:58

kwight force-pushed the add/fse-site-description branch from 4e506cb to 6f6798b Compare June 13, 2019 20:06

gwwar reviewed Jun 14, 2019

View reviewed changes

kwight added 11 commits June 17, 2019 13:09

FSE: Add a site description block.

adce4be

Add conditional rendering in Edit view based on being selected, and wire

b221056

up the API call.

Simplify bloginfo() call and output.

5a3452a

Switch to a TextControl component.

543621c

Add the isSavingPost selector value to props.

4387726

Fetch the description value from the API on mount, and save on

5545742

Publish/Update.

Use the PlainText component instead.

18961e6

Clean up server-side callback (thanks PHPCS).

e3aad5b

Use attributes instead of local state for value tracking; this should

2c49347

better cooperate with other editor UI state.

Remove unused code for now.

a8daf91

Fix styling while editing.

6c7a1de

kwight force-pushed the add/fse-site-description branch from 5cf206b to 6c7a1de Compare June 17, 2019 20:11

kwight requested a review from a team as a code owner June 17, 2019 20:11

mmtr added 4 commits June 18, 2019 14:16

Revert to local state

c2efb58

Remove unnecessary comments

403b0da

Simplify apiFetch calls

065ca2f

Align code with work done in site title block

88f8af8

mmtr reviewed Jun 18, 2019

View reviewed changes

kwight merged commit 88abad2 into master Jun 18, 2019

kwight deleted the add/fse-site-description branch June 18, 2019 17:04

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 18, 2019

gwwar reviewed Jun 18, 2019

View reviewed changes

kwight mentioned this pull request Jun 18, 2019

FSE: Add a site title block. #33761

Merged

kwight restored the add/fse-site-description branch June 18, 2019 17:17

kwight deleted the add/fse-site-description branch June 18, 2019 17:17

kwight mentioned this pull request Jun 18, 2019

FSE: Use older editor package for better Gutenberg compatibility. #34096

Merged

yoavf reviewed Jun 18, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FSE: Add a site description block. #33720

FSE: Add a site description block. #33720

kwight commented Jun 6, 2019

matticbot commented Jun 6, 2019

matticbot commented Jun 6, 2019

mmtr Jun 13, 2019

kwight Jun 13, 2019

mmtr Jun 14, 2019

mmtr Jun 13, 2019

mmtr commented Jun 14, 2019

gwwar Jun 14, 2019

kwight commented Jun 17, 2019

mmtr commented Jun 18, 2019

mmtr Jun 18, 2019

kwight commented Jun 18, 2019 •

edited

Loading

gwwar Jun 18, 2019

kwight Jun 18, 2019

kwight Jun 18, 2019

yoavf Jun 18, 2019

mmtr Jun 19, 2019 •

edited

Loading

mmtr Jun 19, 2019

FSE: Add a site description block. #33720

FSE: Add a site description block. #33720

Conversation

kwight commented Jun 6, 2019

Changes proposed in this Pull Request

Testing instructions

matticbot commented Jun 6, 2019

matticbot commented Jun 6, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmtr commented Jun 14, 2019

Choose a reason for hiding this comment

kwight commented Jun 17, 2019

mmtr commented Jun 18, 2019

Choose a reason for hiding this comment

kwight commented Jun 18, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmtr Jun 19, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwight commented Jun 18, 2019 •

edited

Loading

mmtr Jun 19, 2019 •

edited

Loading