Add editor in reader behind a feature flag #76035

creativecoder · 2023-04-20T14:08:46Z

Proposed Changes

Adds an instance of isolated-block-editor behind a feature flag, reader/editor.

This is meant to be a starting point that we can build on. See pe7F0s-Kk-p2

Testing Instructions

Open /read on calypso.localhost
Click on the editor and create a post.
Click publish to publish the post on your primary site.

matticbot · 2023-04-20T14:11:40Z

	https://calypso.live?image=registry.a8c.com/calypso/app:build-72240

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-72240&env=jetpack

matticbot · 2023-04-20T14:15:48Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~5153 bytes removed 📉 [gzipped])

Details

name                   parsed_size           gzip_size
entry-login               -14241 B  (-1.0%)    -4054 B  (-1.0%)
entry-subscriptions       -14071 B  (-0.9%)    -3822 B  (-0.9%)
entry-main                -13866 B  (-0.8%)    -4006 B  (-0.8%)
entry-stepper             -13503 B  (-0.6%)    -3758 B  (-0.6%)
entry-domains-landing       +444 B  (+0.1%)      +33 B  (+0.0%)
entry-browsehappy           +444 B  (+0.4%)      +33 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~22778 bytes added 📈 [gzipped])

Details

name                             parsed_size           gzip_size
pattern-assembler-step              +52763 B  (+3.7%)   +12312 B  (+3.0%)
import-flow                         +52088 B  (+1.8%)   +12183 B  (+1.5%)
reader                               +1970 B  (+0.3%)     +421 B  (+0.2%)
theme                                 +216 B  (+0.0%)      +47 B  (+0.0%)
people                                -171 B  (-0.0%)      -43 B  (-0.0%)
themes                                +129 B  (+0.0%)      +42 B  (+0.0%)
with-theme-assembler-flow             +108 B  (+1.7%)      +13 B  (+0.6%)
site-setup-flow                       +108 B  (+0.0%)     +150 B  (+0.0%)
site-logs                             -103 B  (-0.0%)       -8 B  (-0.0%)
settings-writing                      -103 B  (-0.0%)      -25 B  (-0.0%)
settings-security                     -103 B  (-0.0%)      -13 B  (-0.0%)
settings-reading                      -103 B  (-0.0%)      -13 B  (-0.0%)
settings-performance                  -103 B  (-0.0%)      -13 B  (-0.0%)
settings-discussion                   -103 B  (-0.0%)      -13 B  (-0.0%)
settings                              -103 B  (-0.0%)       +8 B  (+0.0%)
marketing                             -103 B  (-0.0%)      -13 B  (-0.0%)
earn                                  -103 B  (-0.0%)      -13 B  (-0.0%)
newsletter-flow                        -95 B  (-1.1%)      -33 B  (-1.2%)
update-design-flow                     +72 B  (+0.0%)       -1 B  (-0.0%)
signup                                 +72 B  (+0.0%)       -1 B  (-0.0%)
jetpack-connect                        +72 B  (+0.0%)       -1 B  (-0.0%)
home                                   +72 B  (+0.0%)       -1 B  (-0.0%)
accept-invite                          +72 B  (+0.0%)       -1 B  (-0.0%)
jetpack-cloud-plugin-management        +67 B  (+0.0%)     +699 B  (+0.2%)
subscribers                            +65 B  (+0.0%)      -59 B  (-0.1%)
write-flow                             +60 B  (+0.0%)       -4 B  (-0.0%)
videopress-flow                        +60 B  (+0.0%)       -4 B  (-0.0%)
link-in-bio-tld-flow                   +60 B  (+0.0%)       -4 B  (-0.0%)
free-flow                              +60 B  (+0.0%)       -4 B  (-0.0%)
build-flow                             +60 B  (+0.0%)       -4 B  (-0.0%)
plugins                                +39 B  (+0.0%)     +200 B  (+0.0%)
newsletter-post-setup-flow             +39 B  (+0.0%)     -153 B  (-0.2%)
domains                                +26 B  (+0.0%)     +235 B  (+0.1%)
devdocs                                +18 B  (+0.0%)       +4 B  (+0.0%)
bulk-domain-transfer                   +18 B  (+0.7%)      +12 B  (+1.1%)
add-ons                                +18 B  (+0.0%)      +56 B  (+0.1%)
site-purchases                         -13 B  (-0.0%)      +37 B  (+0.0%)
purchases                              -13 B  (-0.0%)      +35 B  (+0.0%)
plugin-bundle-flow                     -13 B  (-0.0%)     +103 B  (+0.3%)
promote-post                           -12 B  (-0.0%)       -3 B  (-0.0%)
posts-custom                           -12 B  (-0.0%)       -3 B  (-0.0%)
posts                                  -12 B  (-0.0%)       -3 B  (-0.0%)
marketplace                            -12 B  (-0.0%)       -3 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~216489 bytes added 📈 [gzipped])

Details

name                                                                         parsed_size            gzip_size
async-load-calypso-reader-post-editor                                         +2313204 B     (new)  +636151 B     (new)
async-load-animate-list                                                        -116190 B  (-98.0%)   -37409 B  (-97.9%)
async-load-automattic-global-styles-src-components-global-styles-variations     +53020 B   (+4.0%)   +12892 B   (+3.4%)
async-load-automattic-design-preview                                            +52969 B   (+3.9%)   +13316 B   (+3.5%)
async-load-automattic-help-center                                                 +148 B   (+0.0%)     +110 B   (+0.1%)
async-load-calypso-layout-masterbar-checkout-tsx                                  +131 B   (+0.1%)      +17 B   (+0.0%)
async-load-design                                                                 -116 B   (-0.0%)     +362 B   (+0.1%)
async-load-design-wordpress-components-gallery                                    +110 B   (+0.0%)     -101 B   (-0.1%)
async-load-signup-steps-theme-selection                                            -39 B   (-0.0%)     +443 B   (+1.0%)
async-load-signup-steps-domains                                                    +39 B   (+0.0%)     +196 B   (+0.2%)
async-load-design-blocks                                                           +27 B   (+0.0%)     +274 B   (+0.1%)
async-load-signup-steps-add-ons                                                    +18 B   (+0.0%)      +56 B   (+0.2%)
async-load-signup-steps-woocommerce-install-step-business-info                     -13 B   (-0.0%)      -24 B   (-0.1%)
async-load-quick-language-switcher                                                 -13 B   (-0.0%)      +44 B   (+0.1%)
async-load-design-playground                                                       -13 B   (-0.0%)     +240 B   (+0.1%)
async-load-calypso-components-web-preview-component                                -12 B   (-0.0%)       -3 B   (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

matticbot · 2023-04-20T14:24:55Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/editor-in-reader-behind-flag on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

package.json

config/production.json

client/reader/post-editor/index.jsx

client/data/posts/use-create-new-post.js

client/reader/post-editor/index.jsx

client/data/posts/use-create-new-post.js

tyxla · 2023-04-21T06:43:08Z

client/package.json

@@ -40,6 +40,7 @@
 		"@automattic/happychat-connection": "workspace:^",
 		"@automattic/help-center": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
+		"@automattic/isolated-block-editor": "2.22.0",


Is there a need to pin it like that, or could we make it less specific with a ^?

^ doesn't work, since 0.23.0 updates to React 18 and so is incompatible. But I changed it to 0.22.x.

client/reader/post-editor/index.jsx

tyxla · 2023-04-21T06:45:53Z

client/reader/post-editor/index.jsx

+							className="reader-post-editor__publish-button"
+							isPrimary="true"
+							onClick={ publishPost }
+							disabled={ isLoading }


Should it also be disabled when there are no blocks?

I had the same idea, but found this surprisingly tricky because select( 'core/block-editor' ).getBlocks() seems to only work if run within the scope of IsolatedBlockEditor, rather than within the parent component.

I didn't see an immediate way to pass a function that the button component runs to determine if it's disabled, rather than passing it a predetermined value.

I'll plan to address this in a follow-up, though!

client/reader/following/main.jsx

creativecoder · 2023-06-07T02:52:57Z

I've rebased this branch off of try-react-18 and updated isolated-block-editor to the latest version. It's not working yet, but there's less version forcing needed than before: pe7F0s-Vt-p2

bogiii · 2023-06-15T10:51:05Z

I've reviewed and tested the part of the code that owns the @Automattic/caribou team; it works as expected without regression.

creativecoder · 2023-06-30T22:58:07Z

I've rebased this branch off of trunk. I wouldn't say the editor works, as there are some UI/style issues, but it builds and you can interact with it without errors.

worldomonation

I am not 100% sure why @Automattic/kitkat was tagged for review, but my concern is that this PR completely breaks Unit Tests.

noahtallen · 2023-07-06T21:20:04Z

my concern is that this PR completely breaks Unit Tests.

I think this will get resolved after this can be rebased with #78711

github-actions · 2025-07-23T06:43:49Z

This PR has been marked as stale. This happened because:

It has been inactive for the past 3 months.
It hasn't been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Status] Keep Open`, etc.

If this PR is still useful, please do a trunk merge or rebase and otherwise make sure it's up to date and has clear testing instructions. You may also want to ping possible reviewers in case they've forgotten about it. Please close this PR if you think it's not valid anymore — if you do, please add a brief explanation.

If the PR is not updated (or at least commented on) in another month, it will be automatically closed.

github-actions · 2025-08-26T06:42:22Z

This PR has been automatically closed as it has not been updated in some time. If you want to resume work on the PR, feel free to restore the branch and reopen the PR.

creativecoder self-assigned this Apr 20, 2023

creativecoder requested a review from a team as a code owner April 20, 2023 14:08

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Apr 20, 2023

creativecoder force-pushed the add/editor-in-reader-behind-flag branch from 1d181cc to 83a02cd Compare April 20, 2023 14:09

creativecoder mentioned this pull request Apr 20, 2023

Reader: add an editor for creating new posts #75475

Closed

tyxla reviewed Apr 21, 2023

View reviewed changes

creativecoder force-pushed the add/editor-in-reader-behind-flag branch from bc19c8c to 715a36d Compare April 26, 2023 16:01

creativecoder added the [Status] Blocked / Hold label Apr 26, 2023

creativecoder force-pushed the add/editor-in-reader-behind-flag branch from 715a36d to 79c2767 Compare June 7, 2023 02:46

creativecoder requested review from a team and worldomonation as code owners June 7, 2023 02:46

creativecoder requested review from razvanpapadopol and removed request for a team June 7, 2023 02:46

creativecoder changed the base branch from trunk to try-react-18 June 7, 2023 02:47

jessie-ross removed the request for review from razvanpapadopol June 7, 2023 12:52

sirbrillig removed the request for review from a team June 10, 2023 14:31

noahtallen force-pushed the try-react-18 branch 2 times, most recently from f7be757 to 0a0bbb5 Compare June 13, 2023 20:40

noahtallen requested a review from a team as a June 13, 2023 20:40

bogiii approved these changes Jun 15, 2023

View reviewed changes

noahtallen force-pushed the try-react-18 branch 3 times, most recently from 03a2c58 to 911478e Compare June 27, 2023 18:32

Base automatically changed from try-react-18 to trunk June 27, 2023 19:15

Reader: adds editor at top of feed behind a feature flag

e77f6d9

creativecoder force-pushed the add/editor-in-reader-behind-flag branch from ec2ea4f to e77f6d9 Compare June 30, 2023 22:55

creativecoder removed the [Status] Blocked / Hold label Jun 30, 2023

worldomonation suggested changes Jul 4, 2023

View reviewed changes

github-actions bot added the [Status] Stale label Jul 23, 2025

github-actions bot closed this Aug 26, 2025

github-actions bot deleted the add/editor-in-reader-behind-flag branch August 26, 2025 06:42

Add editor in reader behind a feature flag #76035

Add editor in reader behind a feature flag #76035

Uh oh!

Conversation

creativecoder commented Apr 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Testing Instructions

Uh oh!

matticbot commented Apr 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Apr 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Apr 20, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tyxla Apr 21, 2023

Choose a reason for hiding this comment

Uh oh!

creativecoder Apr 26, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tyxla Apr 21, 2023

Choose a reason for hiding this comment

Uh oh!

creativecoder Apr 26, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

creativecoder commented Jun 7, 2023

Uh oh!

bogiii commented Jun 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

creativecoder commented Jun 30, 2023

Uh oh!

worldomonation left a comment

Choose a reason for hiding this comment

Uh oh!

noahtallen commented Jul 6, 2023

Uh oh!

github-actions bot commented Jul 23, 2025

Uh oh!

github-actions bot commented Aug 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

creativecoder commented Apr 20, 2023 •

edited

Loading

matticbot commented Apr 20, 2023 •

edited

Loading

matticbot commented Apr 20, 2023 •

edited

Loading

bogiii commented Jun 15, 2023 •

edited

Loading