Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FSE: Update blocks categories #43670

Merged
merged 3 commits into from
Jul 15, 2020

Conversation

fullofcaffeine
Copy link
Contributor

@fullofcaffeine fullofcaffeine commented Jun 25, 2020

Changes proposed in this Pull Request

  • Update the category names for FSE blocks. More details: pc6Uok-1b-p2 and here (second task listed in the issue).
  • Adds a helper function that is used to safely update category names while still supporting old environments
  • Fix the FSE Jest configuration for TypeScript. It was needed in order for to properly transpile the test and the helper function included in the changeset when they are consumed by Jest. I decided not to split this change in another PR for two reasons: it's small and it's directly related to the change here.

Related PRs

Categories

  • Change newspack's a8c/blog-posts from layout -> widgets;
  • Change newspack's a8c/posts-carousel from layout -> widgets*[0]
  • Change a8c/template from layout -> design*[1]
  • Change a8c/navigation-menu from layout -> design*[1]
  • Change a8c/post-content from layout -> design*[1]
  • Change a8c/site-title from layout -> design*[1]
  • Changea8c/site-credit from layout -> design*[1]
  • Change a8c/site-description from layout -> design*[1]
  • Change a8c/donations from common -> widgets*[0]
  • Keep jetpack/event-countdown in the widgets category
  • Keep jetpack/timeline in the widgets category
  • Keep jetpack/timeline-item in the widgets category
  • Change premium-content/button from layout -> design
  • Change premium-content/login-button from layout -> design
  • Change premium-content/container from common -> design
  • Change premium-content/logged-out-view from common -> design
  • Change premium-content/subscriber-view from common -> design

*[0] This was a guess, let me know if this is the right category to move it to.
*[1] I did set the category name for those using our helper function, even though I understand that a migration already took care of automatically mapping layout to design if I'm not mistaken. Let me know if you think it would not be needed for those cases.

TODO

  • Unit test for the helper function: the test itself is trivial, but I didn't add because I still need to learn more about how unit testing is done within calypso. I'll have a look at it soon.
  • Add support for TS for FSE tests.
  • Should we write tests to check that each block is assigned to the right category names depending on the set of categories? Not sure what is the testing policy for Calypso and what coverage we aim for. Any insights appreciated! (Jon said it's not needed)
  • Squash and rebase from master before merging

Outstanding questions

  • Do we need to do anything with the category of the old/deprecated posts-list-block? (More details in p1593038635493700-slack-cylon)

Testing instructions

Atomated tests
  • cd to wp-calypso/apps/full-site-editing and run yarn test:js.
To manually test the changes
  1. Setup a simple FSE-enabled site and atomic ephemeral sites by following the instructions here: PCYsg-ly5-p2. Map it to your sandbox.
  2. cd to wp-calypso/apps/full-site-editing and run yarn dev --sync to sync it to your sandbox.
  3. Choose a theme that's compatible with FSE (i.e Exford)
  4. Edit your home-page
  5. Add a new block and search for the block you're testing. Verify it's in the right category.
Test the scenarios above in the following environments:**
  • Simple website in calypso
  • Simple website in wp-admin
  • Atomic website
  • Atomic website with Gutenberg plugin disabled

Note: If this PR gets approved and merged, then I'll remove the helper function and tests from here (including the installation/configuration of jest).

@matticbot
Copy link
Contributor

@matticbot
Copy link
Contributor

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.

@@ -31,7 +32,7 @@ addFilter(
registerBlockType( blockName, {
...settings,
title: __( 'Blog Posts', 'full-site-editing' ),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 80 times:
translate( 'Blog Posts' ) ES Score: 10
See 1 additional suggestions in the PR translation status page

@matticbot
Copy link
Contributor

Caution: This PR affects files in the FSE Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D45465-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing in the FSE Plugin for more info: PCYsg-ly5-p2

@fullofcaffeine fullofcaffeine changed the title FSE: Update/fse blocks categories collections FSE: Update blocks categories Jun 25, 2020
Copy link
Member

@sirreal sirreal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for starting on this! I know it's a draft, I left some early thoughts.

Comment on lines 17 to 19
export const hasLegacyCategory = getCategories().some( function ( category ) {
return category.slug === 'formatting';
} );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of a capability check you use to build conditionals, we wrap the conditional logic and accept a list of candidate categories?

function getCategoryWithFallbacks( ...requestedCategories: string[]): string {
	const knownCategories: Array< { slug: string } > = getCategories();
	for ( const requestedCategory of requestedCategories) {
		if ( knownCategories.some( ( { slug } ) => slug === requestedCategory ) ) {
			return requestedCategory;
		}
	}
	// Should we throw an error here? 🤔
	throw new Error('Terrible choice of category 🤦‍♀️');
}

// Usage:
registerBlockType( 'my-block/name', { category: getCategoryWithFallbacks( 'layout', 'widgets' ) } );

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a nice idea! Avoiding having to write a ternary expression would be nice, indeed. Just wondering how we could make this function re-usable across all packages that register blocks. We'll probably need to duplicate it for now?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, we'll need to write it once for each package (FSE, Jetpack…).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, I really like this approach as it's basically future proof. If we change categories again, then it's just a matter of passing it as the last one in the argument.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if it makes sense to move this function over to @wordpress/blocks... 🤔 this way, we'd avoid the current repetition we have across different block repos.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that idea. :-)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if it makes sense to move this function over to @wordpress/blocks... 🤔 this way, we'd avoid the current repetition we have across different block repos.

IIUC, if we need this to handle new categories on sites where Gutenberg has not been updated yet (as it handles the other way round automagically), we can't actually move it to a Gutenberg package, because on those sites that utility won't be available. AFAIR, Jetpack imports use packages that are currently available with the installed version of the Gutenberg plugin, not those that are defined in package.json (i.e. @worpdress/blocks). Pinging @jeherve here for help 🙏

If the above is true and we end up dropping the Gutenberg PR, how about we make it into a Calypso package instead?

Copy link
Contributor Author

@fullofcaffeine fullofcaffeine Jul 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IIUC, if we need this to handle new categories on sites where Gutenberg has not been updated yet (as it handles the other way round automagically), we can't actually move it to a Gutenberg package, because on those sites that utility won't be available

But isn't the @wordpress/blocks a package that can be installed separately (even though it lives within the Gutenberg repo)? Right now, we need this function in the following packages:

Wouldn't it just be a matter of publishing a new version of @wordpress/blocks and then updating it on these packages?

I'm fine abandoning that PR and moving it to a Calypso package if we find it's the best way to go, by the way :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, sorry I read too fast, you actually mention here:

AFAIR, Jetpack imports use packages that are currently available with the installed version of the Gutenberg plugin, not those that are defined in package.json (i.e. @worpdress/blocks). Pinging @jeherve here for help

Let's wait for @jeherve's insights about that, then :)

Thanks!

Copy link
Contributor

@deBhal deBhal Jul 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have we considered also adding a linting rule that checks the category in warning about new categories as well? Something like checking the category of the registerBlockType() and warning if we know it's a category that's not going to work with older gutenbergs?

@sirreal sirreal added [Goal] Gutenberg Working towards full integration with Gutenberg [Status] In Progress labels Jun 25, 2020
Copy link
Member

@sirreal sirreal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, I left a few comments.

This commit has been added but probably will not be included as part of the PR. It's not related to the changeset but was required for me to get my wp-calypso env running.

It looks like there are a few changes to the setup here, it may make sense to break those out into an independent PR. There are multiple concerns here, but the changes are small enough that it's reviewable. At your discretion either way 👍

Should we write tests to check that each block is assigned to the right category names depending on the set of categories? Not sure what is the testing policy for Calypso and what coverage we aim for.

Let's stay focused on testing just the added utility function you added. If we start testing the block registration, we quickly get outside of unit tests.

e2e test may make sense at some point to ensure blocks are in the expected categories, but that's not the scope we're looking at here.

@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch from 8308272 to f686f8c Compare June 26, 2020 23:16
@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch 2 times, most recently from a5d4c76 to a9f82b2 Compare June 27, 2020 00:57
@fullofcaffeine fullofcaffeine marked this pull request as ready for review June 29, 2020 21:37
@fullofcaffeine fullofcaffeine requested review from a team as code owners June 29, 2020 21:37
@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch from c9a4df3 to 8ba7810 Compare July 1, 2020 00:50
@fullofcaffeine
Copy link
Contributor Author

fullofcaffeine commented Jul 1, 2020

I decided to revert my changes to the premium block categories because:

  1. I wasn't able to test them, they seem to be overridden somewhere. I'm still researching about this but it seems it has to do with https://github.com/Automattic/wp-calypso/tree/master/apps/full-site-editing/full-site-editing-plugin/block-inserter-modifications (see: p1593555242136300-slack-cylon)

  2. Even if I figure out how to change them, there's an open issue here and the team seems to want to keep it in the "New" category for now and create an "Earn" collection for it. It seems there's not an agreement yet though and from what I see, it's out of the scope of this PR.

@simison
Copy link
Member

simison commented Jul 1, 2020

Yeah, I'd also just rely on stakeholder team(s) on those blocks and leave them be if they so wish. FYI @lessbloat. 👋

We can consider this unblocked and proceed with the rest of the blocks then? :-)

@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch 2 times, most recently from 94a1eea to 3089e0c Compare July 2, 2020 01:59
@fullofcaffeine
Copy link
Contributor Author

fullofcaffeine commented Jul 2, 2020

Hi Mikael 👋

We can consider this unblocked and proceed with the rest of the blocks then? :-)

I changed all the blocks under FSE I could find (the ones that use registerBlockType). Did I miss any?

The PR for Jetpack is here: Automattic/jetpack#16363.

These are the two outstanding group of blocks that need to be dealt with according to the original issue. Apart from Jetpack and FSE (and Coblocks), what other apps/libs/packages have blocks that need renaming?

@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch 2 times, most recently from 3ec65b0 to f2bf6c0 Compare July 3, 2020 02:01
@sirreal
Copy link
Member

sirreal commented Jul 10, 2020

Thanks everyone for helping out!

premium-content/buttons - design
premium-content/container - common
premium-content/logged-out-view - common
premium-content/login-button - design
premium-content/subscriber-view - common
a8c/donations - widgets

Premium content is pretty specialized but it also involves site layout, so maybe we can map "common" -> "design" here.
I think a8c/donations is a good fit for widget.

common is one of the legacy categories that needs to be replaced with a new category.

For the remaining common blocks, I'd propose design for all three. These have to do with showing a paywall or paid content, is that correct? That sounds like design more than anything else for me.

  • premium-content/container - design
  • premium-content/logged-out-view - design
  • premium-content/subscriber-view - design

For reference, the valid categories are:

[
	{ slug: 'text', title: __( 'Text' ) },
	{ slug: 'media', title: __( 'Media' ) },
	{ slug: 'design', title: __( 'Design' ) },
	{ slug: 'widgets', title: __( 'Widgets' ) },
	{ slug: 'embed', title: __( 'Embeds' ) },
]

@fullofcaffeine
Copy link
Contributor Author

Thanks everyone for helping out!

premium-content/buttons - design
premium-content/container - common
premium-content/logged-out-view - common
premium-content/login-button - design
premium-content/subscriber-view - common
a8c/donations - widgets
Premium content is pretty specialized but it also involves site layout, so maybe we can map "common" -> "design" here.
I think a8c/donations is a good fit for widget.

common is one of the legacy categories that needs to be replaced with a new category.

For the remaining common blocks, I'd propose design for all three. These have to do with showing a paywall or paid content, is that correct? That sounds like design more than anything else for me.

* `premium-content/container` - `design`

* `premium-content/logged-out-view` - `design`

* `premium-content/subscriber-view` - `design`

For reference, the valid categories are:

[
	{ slug: 'text', title: __( 'Text' ) },
	{ slug: 'media', title: __( 'Media' ) },
	{ slug: 'design', title: __( 'Design' ) },
	{ slug: 'widgets', title: __( 'Widgets' ) },
	{ slug: 'embed', title: __( 'Embeds' ) },
]

They are already mapped to these categories:

  • Change premium-content/button from layout -> design
  • Change premium-content/login-button from layout -> design
  • Change premium-content/container from common -> design
  • Change premium-content/logged-out-view from common -> design
  • Change premium-content/subscriber-view from common -> design

@sirreal
Copy link
Member

sirreal commented Jul 13, 2020

Summary of block changes mostly for myself 🙂

Block Previous New Observations
a8c/donations common widgets Replace legacy category as well (widgets already existed.
a8c/navigation-menu layout design
a8c/post-content layout design
a8c/site-credit layout design
a8c/site-description layout design
a8c/site-title layout design
a8c/template layout design
a8c/blog-posts layout widgets Replace legacy category as well (widgets already existed.
a8c/posts-carousel layout widgets Replace legacy category as well (widgets already existed.
premium-content/buttons design design Add fallback layout category (this was broken with Gutenberg < 8.4.0?)
premium-content/container common design
premium-content/logged-out-view common design
premium-content/login-button design design Add fallback layout category (this was broken with Gutenberg < 8.4.0?)
premium-content/subscriber-view common design

Copy link
Member

@sirreal sirreal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few small changes, I'll go ahead and apply these…

apps/full-site-editing/package.json Outdated Show resolved Hide resolved
apps/full-site-editing/package.json Outdated Show resolved Hide resolved
apps/full-site-editing/package.json Outdated Show resolved Hide resolved
@sirreal sirreal force-pushed the update/fse-blocks-categories-collections branch from 301b4c8 to c778506 Compare July 13, 2020 15:55
@sirreal
Copy link
Member

sirreal commented Jul 13, 2020

I applied a few changes to align dependency versions across the monorepo. I also rebased.

apps/full-site-editing/tsconfig.json Outdated Show resolved Hide resolved
apps/full-site-editing/tsconfig.json Outdated Show resolved Hide resolved
@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch from 7077925 to e043acf Compare July 13, 2020 18:09
@sirreal
Copy link
Member

sirreal commented Jul 13, 2020

@noahtallen It looks like this is getting a false negative on the phpcs action

It's trying to run phpcs on a file that was added and deleted in this PR, which errors:

ERROR: The file "apps/full-site-editing/full-site-editing-plugin/block-helpers/block-helpers.ts" does not exist.

Copy link
Member

@sirreal sirreal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on Atomic. I see the blog posts and post carousel blocks in the updated categories. I think this is good to go 👍

I'd like to get #43670 (comment) sorted out, but I think that's a false negative and unlikely to affect this after merge.

@noahtallen
Copy link
Contributor

@sirreal I think this makes sense. The issue is that we run phpcs on all "changed" files, which includes deleted files. Will have to adjust that logic to only handle added or changed files

@noahtallen
Copy link
Contributor

noahtallen commented Jul 13, 2020

This diff should do it (feel free to commit to this PR to test it)

diff --git a/.github/workflows/full-site-editing-plugin.yml b/.github/workflows/full-site-editing-plugin.yml
index c49652d16a..c794789311 100644
--- a/.github/workflows/full-site-editing-plugin.yml
+++ b/.github/workflows/full-site-editing-plugin.yml
@@ -133,11 +133,8 @@ jobs:
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Displaying changed files
-      run: echo ${{ join( fromJson( steps.changes.outputs.all ) ) }}
-
     - name: Execute phpcs on changed files
-      run: ./vendor/bin/phpcs --standard=apps/phpcs.xml ${{ join( fromJson( steps.changes.outputs.all ), ' ' ) }}
+      run: ./vendor/bin/phpcs --standard=apps/phpcs.xml ${{ join( fromJson( steps.changes.outputs.modified ), ' ' ) }} ${{ join( fromJson( steps.changes.outputs.added ), ' ' ) }}
       if: ${{ steps.changes.outputs.all != '' }}
     
     - name: No changes found
ddd

@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch from 5bd5e9e to 15992ef Compare July 13, 2020 21:22
@deBhal deBhal mentioned this pull request Jul 13, 2020
31 tasks
@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch from 15992ef to 6b2e38a Compare July 14, 2020 01:48
@fullofcaffeine
Copy link
Contributor Author

fullofcaffeine commented Jul 14, 2020

Tested on Atomic. I see the blog posts and post carousel blocks in the updated categories. I think this is good to go +1

I'd like to get #43670 (comment) sorted out, but I think that's a false negative and unlikely to affect this after merge.

@Automattic/good-mountain Fellows, I ended up getting into a 🐇 🕳️ and couldn't deploy today. But it was for a good cause (hopefully!). It's related to the previous report I made here. More details below.

It seems some earn (premium) blocks were broken for a while.While testing on Atomic sites, we've found the following:

  1. In master's FSE, when using older versions of Gutenberg, the premium-content/login-button and premium-content/buttons were not appearing in the picker's (because design category is not available there). The premium-content/content can be found and added, but one of its sub-blocks appears erro'ed.
  2. In master's FSE, when using a recent (> 8.3.0) version of Gutenberg, the blocks are shown correctly in the picker but 1) premium-content/buttons fails upon being added to the page 2) premium-content/login-button works 3) premium-content/content can be found and inserted, but one of its sub-blocks renders an error message.

The difference when testing with this branch's FSE is that in older Gutenberg versions where the design category is not available, the blocks are registered correctly in the legacy category provided so that they are found in the picker. But they err when added to the page. When using more recent versions of Gutenberg, the same behavior I described in point 2 above happens.

It seems these issues are independent of the changes added here. Still, the changes here make the two "problematic" premium blocks appear on Gutenberg versions < 8.3.0. After discussing this with @gwwar and @deBhal, I decided to postpone the deploy for now. More details here: p1594677291077000-slack-create-gardeners.

@deBhal is gardening, and this bug probably falls on gardeners' plate. We spent some time pairing on this today, and he's still looking into it as I end my day now. 🇦🇺

I could have managed to deploy this today, but I wanted to wait to understand what it's about and if we need to do anything in the category side. I'm pretty sure that this can be merged and perhaps deployed tomorrow.

*With the help of @deBhal, who kindly offered to help me deploy this PR and paired with me on this issue, thanks a lot!

@sirreal
Copy link
Member

sirreal commented Jul 14, 2020

Conversation on handling broken blocks: pbAok1-1ez-p2

@gwwar gwwar 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 Jul 14, 2020
Copy link
Contributor

@gwwar gwwar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for shepherding the update @fullofcaffeine! This tests well for Premium Content blocks on Simple Sites (edge and 8.3).

@Automattic/serenity is looking into potential breakages into Atomic from Premium Content, but it shouldn't affect this PR. We'll follow up shortly.

Screen Shot 2020-07-14 at 3 08 38 PM

Screen Shot 2020-07-14 at 3 08 43 PM

Context: #43198.

- Also add a helper function for FSE blocks that can be used to check if old category names exist in the store and fall-backs to an older version(s) otherwise. This function should be used when the updated category is a completely new category being introduced by a new version of Gutenberg. You then pass this new category + the older categorie(s) that will be tried in sequence if the previous one was not found.
- Tweaked the FSE Jest configuration to support TypeScript.
…ontent

The fallback was causing these blocks to appear in older versions of Gutenberg where the `design` category was not available. Until here, all good. However, they were all er'ing upon insertion. We thought it would be better to rollback this change for now.
@fullofcaffeine fullofcaffeine force-pushed the update/fse-blocks-categories-collections branch from 0bd07b6 to 4e0ec42 Compare July 15, 2020 00:14
@fullofcaffeine fullofcaffeine merged commit 65fe392 into master Jul 15, 2020
@fullofcaffeine fullofcaffeine deleted the update/fse-blocks-categories-collections branch July 15, 2020 01:05
@matticbot matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Goal] Gutenberg Working towards full integration with Gutenberg
Projects
None yet
Development

Successfully merging this pull request may close these issues.