Gutenberg: start editor shell in Calypso #26438
Conversation
vindl
added
[Status] In Progress
[Goal] Gutenberg
webpack.config.js
Outdated
| @@ -247,7 +247,7 @@ if ( calypsoEnv === 'desktop' ) { | |||
| } else { | |||
| // jquery is only needed in the build for the desktop app | |||
| // see electron bug: https://github.com/atom/electron/issues/254 | |||
| webpackConfig.externals.push( 'jquery' ); | |||
| // webpackConfig.externals.push( 'jquery' ); | |||
There was a problem hiding this comment.
I'm running into:
ReferenceError: jquery is not defined
at eval (external_"jquery":1)
at Object.jquery (build.js:14586)
at __webpack_require__ (manifest.js:788)
at fn (manifest.js:151)
at eval (nonce.js:4)
at Module../node_modules/@wordpress/api-fetch/build-module/middlewares/nonce.js (vendors~gutenberg-editor.js:249)
at __webpack_require__ (manifest.js:788)
at fn (manifest.js:151)
at eval (index.js:11)
at Module../node_modules/@wordpress/api-fetch/build-module/index.js (vendors~gutenberg-editor.js:213)
There was a problem hiding this comment.
That's right, some of the Gutenberg packages (e.g. @wordpress/api-fetch) still depend on jQuery.
There was a problem hiding this comment.
See related work in WordPress/gutenberg#8311 to remove it
There was a problem hiding this comment.
I should test, land and publish new version which is jquery free later today.
There was a problem hiding this comment.
I removed this after updating to latest package version.
vindl
force-pushed
the
try/wordpress-editor
branch
5 times, most recently
from
c2c5fd8
to
b7e02b2
Compare
|
Yay no console errors at least 🎉 Some high level notes:
registerBlockType( myTestBlock, settings );
setDefaultBlockName( myTestBlock.name );
setUnknownTypeHandlerName( myTestBlock.name );Feel free to DM me if you need any more detail on these 👍 |
|
@gwwar when not sure, it is always the best to look at the following scripts and styles setup logic: In particular, this part is something that you are looking for: $init_script = <<<JS
( function() {
var editorSettings = %s;
window._wpLoadGutenbergEditor = new Promise( function( resolve ) {
wp.api.init().then( function() {
wp.domReady( function() {
resolve( wp.editPost.initializeEditor( 'editor', "%s", %d, editorSettings, window._wpGutenbergDefaultPost ) );
} );
} );
} );
} )();
JS;I think, you nedd to replicate what https://github.com/WordPress/gutenberg/blob/master/edit-post/index.js#L58-L89 in fact the only thing which is mandaroty is render in there. I'm sure you don't need metaboxes, nux is also optional. You can't register core blocks because they aren't published to npm so using test blocks is enough. |
client/gutenberg/editor/main.jsx
Outdated
|
|
||
| const editorSettings = {}; | ||
|
|
||
| const wpApiSettings = { |
There was a problem hiding this comment.
You no longer need to pass wpApiSettings variable.
@gziolo With limited time, I'm not afraid of asking for help 😄 Thanks, I think this is a good starting point for us. Another quick question though, it sounds like we can skip the
|
vindl
force-pushed
the
try/wordpress-editor
branch
3 times, most recently
from
4f8f83b
to
0ef7b71
Compare
|
I don't know about your use case if you need |
@gwwar That's the whole REST API initialization done by core, it doesn't have anything to do with Gutenberg. |
vindl
force-pushed
the
try/wordpress-editor
branch
from
0ef7b71
to
1f6dc42
Compare
|
Thanks for the extra context @Copons! |
vindl
force-pushed
the
try/wordpress-editor
branch
3 times, most recently
from
e0c79fb
to
55f455e
Compare
|
@vindl I dug a bit further, and it looks like the following stores are registered, in the current sequence, so we are missing
Next steps would be to compare the store registration sequence in Gutenberg master, and try to mirror that here. |
vindl
force-pushed
the
try/wordpress-editor
branch
4 times, most recently
from
2fa6510
to
de33f4c
Compare
|
After some latest fixes I managed to get past the blank screen and display the UI elements, although the styling seems broken. I updated the PR summary with additional details and remaining tasks. |
vindl
force-pushed
the
try/wordpress-editor
branch
2 times, most recently
from
6aa9c78
to
361da77
Compare
There was a problem hiding this comment.
@vindl nice work! This is a good start, and it's exciting to see brand new errors. Let's land this piece and we can create follow up issues to tackle issues like API authentication, styling, squashing misc bugs etc.
This is good to 🚢 after we verify that prod bundles aren't affected too much.
vindl
force-pushed
the
try/wordpress-editor
branch
from
7fcdf62
to
d02743a
Compare
| @import 'gutenberg/editor/core-blocks/heading/editor'; | ||
|
|
||
| // Edit-post components styles | ||
| @import 'gutenberg/editor/edit-post/assets/stylesheets/colors'; |
There was a problem hiding this comment.
SCSS variables and helpers from the assets folder could probably be published to npm as its own package. What do you think?
There was a problem hiding this comment.
It would probably help us in the short term, but given that we are supposed to re-implement Calypso specific versions of edit post components, I'm not sure if we'll be reusing them in the long run.
There was a problem hiding this comment.
Depends on if core wants to eventually publish edit-post we'll untangle this in a bit otherwise in follow up PRs.
| */ | ||
| import MetaBoxesArea from './meta-boxes-area'; | ||
|
|
||
| function MetaBoxes( { location, isActive } ) { |
There was a problem hiding this comment.
I'm wondering if we want to support meta boxes in Calypso at all :)
There was a problem hiding this comment.
Most likely not, I'm leaving the detailed clean up of the edit-post folder for the follow-up. :)
|
|
||
| const replaceMediaUpload = () => null; | ||
|
|
||
| addFilter( |
There was a problem hiding this comment.
This is going to be the way to hook in Calypso's custom Media Gallery implementation.
There was a problem hiding this comment.
There is a similar hook for Featured Image, however I guess you won't need it since you will build your own sidebar
Override the root URL in order to point it to public-api.wordpress.com. Also overwrites the paths to conform to wpcom v2 API site specific ones.
vindl
force-pushed
the
try/wordpress-editor
branch
from
d02743a
to
a11e6fd
Compare
matticbot
removed
the
[Status] Needs Review
Part of #26180
Sets up a Calypso test branch for
@wordpress/editorpackage and starts a Gutenberg editor shell in the new/gutenbergsection.Folders in this PR that, for the most part, don't need to be reviewed (copied code from Gutenberg editor):
edit-post- In order to replicate the functionality in initializeEditor, I copied over most of the components from Gutenberg'sedit-postfolder (won't be exposed as a package in the future).core-blocks- Sincecore-blockspackage is not published yet, some of thecore-blocksfrom Gutenberg have been ported here in order to supportregisterCoreBlocksfunctionality. This is a temporary addition that will be removed once the package is published.Remaining tasks
noop-ed. We'll probably need to sort out authorization for this to work. You can addlocalStorage.setItem( 'debug', 'calypso:gutenberg' );to see which API requests are attempted now. (Gutenberg: enable v2 API requests #26639)core-blockspackage has been published. (Gutenberg: replace core blocks with package components #26622)edit-postwe want to keep and remove the rest. (Gutenberg: clean up edit-post folder #26642)Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>). (Gutenberg: fix console errors and warnings #26643)@wordpress/editorsub-dependencies:@wordpress/a11y@wordpress/api-fetch@wordpress/blob@wordpress/blocks@wordpress/components@wordpress/compose@wordpress/core-data@wordpress/data@wordpress/date@wordpress/deprecated@wordpress/dom@wordpress/element@wordpress/hooks@wordpress/html-entities@wordpress/i18n@wordpress/is-shallow-equal@wordpress/keycodes@wordpress/nux@wordpress/url@wordpress/viewport@wordpress/wordcountBundle sizes delta
Testing instructions
localStorage.setItem( 'debug', 'calypso:gutenberg' );http://calypso.localhost:3000/gutenberg/