Edit Site: Add theme exporter. #21958

epiqueras · 2020-04-28T20:02:43Z

Closes #19260

Description

This PR adds a theme exporter button to the site editor header's "More" dropdown.

The exporter uses @melchoyce's Johannes theme as the base for the theme zip file and adds the site editor's templates and template parts.

How to test this?

Try exporting templates/parts with different modifications and verify that the exported files match what you have on the editor.

Screenshots

Types of Changes

New Feature: The site editor now has a theme exporter button for exporting customized templates and template parts in a theme zip file.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-04-28T20:09:01Z

Size Change: +61.2 kB (6%) 🔍

Total Size: 877 kB

Filename	Size	Change
`build/annotations/index.js`	3.61 kB	-15 B (0%)
`build/api-fetch/index.js`	4.08 kB	-1 B
`build/autop/index.js`	2.82 kB	-2 B (0%)
`build/blob/index.js`	621 B	+1 B
`build/block-directory/index.js`	6.23 kB	-1 B
`build/block-editor/index.js`	106 kB	+182 B (0%)
`build/block-library/index.js`	114 kB	-119 B (0%)
`build/block-serialization-default-parser/index.js`	1.88 kB	-3 B (0%)
`build/blocks/index.js`	48.1 kB	+36 B (0%)
`build/components/index.js`	179 kB	+22 B (0%)
`build/compose/index.js`	6.66 kB	+1 B
`build/core-data/index.js`	11.4 kB	-20 B (0%)
`build/data-controls/index.js`	1.28 kB	-3 B (0%)
`build/data/index.js`	8.45 kB	+12 B (0%)
`build/date/index.js`	5.47 kB	-2 B (0%)
`build/dom-ready/index.js`	569 B	+1 B
`build/edit-navigation/index.js`	3.54 kB	+3 B (0%)
`build/edit-post/index.js`	27.5 kB	-126 B (0%)
`build/edit-site/index.js`	72.3 kB	+61.4 kB (84%)	🆘
`build/edit-widgets/index.js`	7.49 kB	-4 B (0%)
`build/editor/index.js`	43.6 kB	-75 B (0%)
`build/element/index.js`	4.64 kB	-3 B (0%)
`build/format-library/index.js`	7.63 kB	+1 B
`build/hooks/index.js`	2.13 kB	+1 B
`build/html-entities/index.js`	621 B	-1 B
`build/is-shallow-equal/index.js`	709 B	-1 B
`build/keyboard-shortcuts/index.js`	2.52 kB	+5 B (0%)
`build/keycodes/index.js`	1.94 kB	+1 B
`build/list-reusable-blocks/index.js`	3.13 kB	+1 B
`build/media-utils/index.js`	5.29 kB	-3 B (0%)
`build/notices/index.js`	1.79 kB	-1 B
`build/primitives/index.js`	1.49 kB	-9 B (0%)
`build/priority-queue/index.js`	790 B	+1 B
`build/redux-routine/index.js`	2.85 kB	-2 B (0%)
`build/rich-text/index.js`	14.8 kB	-18 B (0%)
`build/server-side-render/index.js`	2.67 kB	-6 B (0%)
`build/shortcode/index.js`	1.69 kB	-1 B
`build/url/index.js`	4.02 kB	+2 B (0%)
`build/viewport/index.js`	1.84 kB	+1 B
`build/warning/index.js`	1.13 kB	-6 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.02 kB	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	761 B	0 B
`build/block-editor/style-rtl.css`	10.2 kB	0 B
`build/block-editor/style.css`	10.2 kB	0 B
`build/block-library/editor-rtl.css`	7.03 kB	0 B
`build/block-library/editor.css`	7.03 kB	0 B
`build/block-library/style-rtl.css`	7.14 kB	0 B
`build/block-library/style.css`	7.14 kB	0 B
`build/block-library/theme-rtl.css`	683 B	0 B
`build/block-library/theme.css`	685 B	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/components/style-rtl.css`	16.9 kB	0 B
`build/components/style.css`	16.9 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom/index.js`	3.1 kB	0 B
`build/edit-navigation/style-rtl.css`	485 B	0 B
`build/edit-navigation/style.css`	485 B	0 B
`build/edit-post/style-rtl.css`	12.2 kB	0 B
`build/edit-post/style.css`	12.2 kB	0 B
`build/edit-site/style-rtl.css`	5.11 kB	0 B
`build/edit-site/style.css`	5.11 kB	0 B
`build/edit-widgets/style-rtl.css`	4.67 kB	0 B
`build/edit-widgets/style.css`	4.66 kB	0 B
`build/editor/editor-styles-rtl.css`	428 B	0 B
`build/editor/editor-styles.css`	431 B	0 B
`build/editor/style-rtl.css`	3.27 kB	0 B
`build/editor/style.css`	3.27 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/i18n/index.js`	3.56 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/nux/index.js`	3.4 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.67 kB	0 B
`build/token-list/index.js`	1.28 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

mtias · 2020-04-28T20:47:21Z

packages/edit-site/src/components/header/theme-exporter/index.js

+ */
+import getBaseThemeZip from './get-base-theme-zip';
+
+export default function ThemeExporter( { ids, templatePartIds } ) {


We should probably allow this to be disabled somehow and account for permissions.

disabled somehow

Through the editor settings, bootstrapped on the server? So that it can be both filtered and toggled with a store action?

account for permissions

Shouldn't anyone who can edit templates also be able to export them?

youknowriad · 2020-04-29T09:56:23Z

the bundle size increase here is not small. I believe this is better served by an export on the server instead of a JS based export.

epiqueras · 2020-04-29T17:39:36Z

Agreed, I'll move it to the server once #21959 lands.

ockham · 2020-04-29T21:05:49Z

Some more (potentially relevant) changes here: #21980 😅

mtias · 2020-05-05T18:14:36Z

@epiqueras why does it need a base theme to be set up?

epiqueras · 2020-05-05T18:32:39Z

Are you talking about https://github.com/WordPress/gutenberg/blob/0426dd2d20357cfecb1d326961e71d619a276010/packages/edit-site/src/components/header/theme-exporter/get-base-theme-zip/content.js?

For all the content a theme ZIP file needs besides the templates. E.g., the entry PHP file.

mtias · 2020-05-05T18:36:05Z

Yes, I don't think we should include anything there (no style css, no theme supports until we can support theme.json, etc) yet.

epiqueras · 2020-05-05T19:00:21Z

Yes, I don't think we should include anything there (no style css, no theme supports until we can support theme.json, etc) yet.

👍

kjellr · 2020-05-06T17:05:57Z

One thing that came up when discussing this in the #themereview channel this week: When/if we get to a point where someone can export a full iteration on an existing theme using this button, we should ensure we can bundle the original theme's credit and license information with it, so that that doesn't get lost.

skorasaurus · 2020-05-18T15:57:25Z

I tried to test this but am receiving errors:

wp db reset --yes
visit wp-admin/ which triggered install.php and created new site;
pulled your branch (then rm -rf node modules && npm install it successfully built)
enabled your plugin

go to gutenberg settings > enable Full Site Editing > save

When visiting the base_url/home of my website, I receive:
while Twenty Twenty the is being used: "no matching template found"

while johannes is being used: Uncaught ArgumentCountError: Too few arguments to function gutenberg_render_block_core_post_content(), 2 passed in /path/to/site/public_html/wp-includes/class-wp-block-type.php on line 109 and exactly 3 expected in /path/to/site/public_html/wp-content/plugins/gutenberg/build/block-library/blocks/post-content.php:16 Stack trace: #0 /path/to/site/public_html/wp-includes/class-wp-block-type.php(109): gutenberg_render_block_core_post_content(Array, '') #1 /path/to/site/public_html/wp-includes/blocks.php(487): WP_Block_Type->render(Array, '') #2 /path/to/site/public_html/wp-includes/blocks.php(537): render_block(Array) #3 /path/to/site/public_html/wp-content/plugins/gutenberg/lib/template-loader.php(297): do_blocks('<header class="...') #4 /path/to/site/public_html/wp-content/plugins/gutenberg/lib/template-canvas.php(19): gutenberg_render_the_template() #5 /path/to/site/public_html/wp-includes/template-loader.php(106): include('/path/to/site/p...') #6 /path/to/site/public_html/wp-blog-header.php(19): require_once( in /path/to/site/public_html/wp-content/plugins/gutenberg/build/block-library/blocks/post-content.php on line 16

When i visit: http://my.site/wp-admin/admin.php?page=gutenberg-edit-site ; I receive the same error uncaught argumentcounterror as above.

epiqueras · 2020-05-18T19:08:53Z

Try enabling the demo block templates experiment.

skorasaurus · 2020-05-18T19:45:01Z

nope, a similar issue:

Fatal error: Uncaught ArgumentCountError: Too few arguments to function gutenberg_render_block_core_post_title(), 2 passed in /path/to/site/public_html/wp-includes/class-wp-block-type.php on line 109 and exactly 3 expected in /path/to/site/public_html/wp-content/plugins/gutenberg/build/block-library/blocks/post-title.php:17 Stack trace: #0 /path/to/site/public_html/wp-includes/class-wp-block-type.php(109): gutenberg_render_block_core_post_title(Array, '') #1 /path/to/site/public_html/wp-includes/blocks.php(487): WP_Block_Type->render(Array, '') #2 /path/to/site/public_html/wp-includes/blocks.php(478): render_block(Array) #3 /path/to/site/public_html/wp-includes/blocks.php(537): render_block(Array) #4 /path/to/site/public_html/wp-content/plugins/gutenberg/lib/template-loader.php(297): do_blocks('<!-- wp:templat...') #5 /path/to/site/public_html/wp-content/plugins/gutenberg/lib/template-canvas.php(19): gutenberg_render_the_template() #6 /path/to/site/public_html/wp-includes/template-loader.php(106): include('/path/to/site/p in /path/to/site/public_html/wp-content/plugins/gutenberg/build/block-library/blocks/post-title.php on line 17

aduth · 2020-05-18T20:16:18Z

@skorasaurus Are you sure you're testing this branch? At the time of the most recent commit here, render_block_core_post_title accepts no arguments (source), but it does accept three (per your error) on master (source).

skorasaurus · 2020-05-19T20:42:35Z

Was once I ran a couple git clean commands and rm -rf node_modules ; ran npm install, and then npm run build, I no longer experienced the error and the exporter worked as expected.

epiqueras · 2020-06-04T23:36:24Z

Closed in favor of #22922, which creates the ZIP file on the server to avoid the bundle size increase.

epiqueras added [Feature] Full Site Editing [Type] Feature New feature to highlight in changelogs. labels Apr 28, 2020

epiqueras self-assigned this Apr 28, 2020

epiqueras requested review from vindl, noahtallen, Addison-Stavlo and a team April 28, 2020 20:03

youknowriad mentioned this pull request Apr 28, 2020

Full Site Editing Breakdown #20791

Closed

53 tasks

mtias reviewed Apr 28, 2020

View reviewed changes

vindl requested a review from ockham April 29, 2020 00:35

ockham mentioned this pull request Apr 30, 2020

Template Loader: Introduce get_template_hierarchy(), drop gutenberg_template_include_filter() #21980

Merged

6 tasks

epiqueras closed this Jun 4, 2020

epiqueras force-pushed the add/theme-exporter-to-edit-site branch from 0426dd2 to 32af450 Compare June 4, 2020 23:23

epiqueras mentioned this pull request Jun 4, 2020

Edit Site: Add theme exporter. #22922

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Edit Site: Add theme exporter. #21958

Edit Site: Add theme exporter. #21958

epiqueras commented Apr 28, 2020

github-actions bot commented Apr 28, 2020

mtias Apr 28, 2020

epiqueras Apr 28, 2020

youknowriad commented Apr 29, 2020

epiqueras commented Apr 29, 2020

ockham commented Apr 29, 2020

mtias commented May 5, 2020

epiqueras commented May 5, 2020

mtias commented May 5, 2020 •

edited

Loading

epiqueras commented May 5, 2020

kjellr commented May 6, 2020

skorasaurus commented May 18, 2020 •

edited

Loading

epiqueras commented May 18, 2020

skorasaurus commented May 18, 2020

aduth commented May 18, 2020

skorasaurus commented May 19, 2020

epiqueras commented Jun 4, 2020

Edit Site: Add theme exporter. #21958

Edit Site: Add theme exporter. #21958

Conversation

epiqueras commented Apr 28, 2020

Description

How to test this?

Screenshots

Types of Changes

Checklist:

github-actions bot commented Apr 28, 2020

mtias Apr 28, 2020

Choose a reason for hiding this comment

epiqueras Apr 28, 2020

Choose a reason for hiding this comment

youknowriad commented Apr 29, 2020

epiqueras commented Apr 29, 2020

ockham commented Apr 29, 2020

mtias commented May 5, 2020

epiqueras commented May 5, 2020

mtias commented May 5, 2020 • edited Loading

epiqueras commented May 5, 2020

kjellr commented May 6, 2020

skorasaurus commented May 18, 2020 • edited Loading

epiqueras commented May 18, 2020

skorasaurus commented May 18, 2020

aduth commented May 18, 2020

skorasaurus commented May 19, 2020

epiqueras commented Jun 4, 2020

mtias commented May 5, 2020 •

edited

Loading

skorasaurus commented May 18, 2020 •

edited

Loading