[RNMobile] Shortcode block support by chipsnyder · Pull Request #19534 · WordPress/gutenberg

chipsnyder · 2020-01-09T16:55:12Z

Description

Adds React Native support for the shortcode block and modifies the shortcode PHP registration so that attributes are exposed to both the javascript and PHP registration.

Implements: wordpress-mobile/gutenberg-mobile#690

How has this been tested?

Add New Shortcode

Open WP iOS / WP Android
Go to Site Pages / Blog Posts
Add a new page/post or open an existing page/post
Add a new block by selecting the (+) sign in the bottom left
Select Shortcode
Type Shortcode
Save

iOS	Android

Edit existing Shortcode

Open WP iOS / WP Android
Go to Site Pages / Blog Posts
Open an existing page/post that has an existing shortcode
Select Shortcode
Edit Shortcode
Save

iOS	Android

Screenshots

Placeholder

iOS

Default	Dark mode

iPad Default	iPad Dark mode

Android

Default

Static

iOS

Default	Dark mode

iPad Default	iPad Dark mode

Android

Default

Selected

iOS

Default	Dark mode

iPad Default	iPad Dark mode

Android

Default

Types of changes

New Feature: Shortcode block support

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. .

koke · 2020-01-10T09:28:18Z

packages/block-library/src/shortcode/index.php

@gziolo I don't think this would work when this makes it into core, but I'm not sure what's the right way to load this in PHP. Any tips? I see you did a similar thing in #14238, but it never shipped in core, so I'm not sure if it's a solved problem

It's quite a task to coordinate both Gutenberg and WordPress core :)

PHP files without any change are copied to this location in WordPress core:

https://github.com/WordPress/wordpress-develop/tree/master/src/wp-includes/blocks

block.json files aren't copied over in both Gutenberg and WordPress core and with the current folder structure, I don't think it would be possible.

All PHP are whitelisted in WP core in here:
https://github.com/WordPress/wordpress-develop/blob/14376be6e195ce9cc7f4bf237651504777b504fb/tools/webpack/packages.js#L97-L109

I think it wouldn't be that hard to change it to something else and include block.json files there. I guess the simplest approach would be to put PHP file and its JSON file in the same folder to make them easy to reference.

In Gutenberg, PHP files for blocks are copied to the build folder with this logic:

gutenberg/webpack.config.js

Lines 117 to 151 in 3caee37

new CopyWebpackPlugin( [

{

from: './packages/block-library/src/**/index.php',

test: new RegExp( `([\\w-]+)${ escapeRegExp( sep ) }index\\.php$` ),

to: 'build/block-library/blocks/[1].php',

transform( content ) {

content = content.toString();

// Within content, search for any function definitions. For

// each, replace every other reference to it in the file.

return content

.match( /^function [^\(]+/gm )

.reduce( ( result, functionName ) => {

// Trim leading "function " prefix from match.

functionName = functionName.slice( 9 );

// Prepend the Gutenberg prefix, substituting any

// other core prefix (e.g. "wp_").

return result.replace(

new RegExp( functionName, 'g' ),

( match ) => 'gutenberg_' + match.replace( /^wp_/, '' )

);

}, content )

// The core blocks override procedure takes place in

// the init action default priority to ensure that core

// blocks would have been registered already. Since the

// blocks implementations occur at the default priority

// and due to WordPress hooks behavior not considering

// mutations to the same priority during another's

// callback, the Gutenberg build blocks are modified

// to occur at a later priority.

.replace( /(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/, '$1, 20' );

},

},

] ),

@aduth can provide more details for the PHP changes applied in Gutenberg if you need it for anything.

It's quite a task to coordinate both Gutenberg and WordPress core :)

😄

Thanks for the guidance @gziolo, I'll get to work on including the block.json files in those directories.

@gziolo

I went ahead and made those adjustments
For Gutenberg the change is here:
https://github.com/WordPress/gutenberg/pull/19534/files#diff-11e9f7f953edc64ba14b0cc350ae7b9dR152-R158

Then in WordPress core, I made the changes here:
https://github.com/chipsnyder/wordpress-develop/blob/rnmobile/shortcode-support/tools/webpack/packages.js#L155-L163

and here:
https://github.com/chipsnyder/wordpress-develop/blob/rnmobile/shortcode-support/tools/webpack/packages.js#L244

I haven't opened up a PR for the changes to WordPress core yet because I wanted to check to see if this was in line with what you were thinking. I also wasn't sure about the process for that on updating the block-library package then committing the change and so forth.

Yes, this is more or less what's necessary to get started. There is this question whether the PHP file and block.json file should be put in their own folder:

-- build/block-library/blocks -- shortcode -- index.php -- block.json

If block.json is renamed to shortcode.json then we'll have to replace the filename to read in the php file as well.

then we'll have to replace the filename to read in the php file as well.

Is this ( https://github.com/WordPress/gutenberg/pull/19534/files#diff-0272f9f4a31a060e383e4d3cf5d5c7feR24 ) the change you're thinking of?

Ah yes, I missed that one

Ah yes, I missed that one

No problem 🙂

I opened a PR for the WordPress-develop changes WordPress/wordpress-develop#131
@gziolo or @koke Do either of you know the process for updating the block-library version there?
Should it be part of that PR or should I open a new one after this merges?

@wordpress/block-library is updated from npm. The changes applied to Gutenberg are released with the plugin release every two weeks and then published to npm.

packages/block-library/src/shortcode/edit.native.js

packages/block-library/src/index.native.js

…and php

…converted to block

…e in php

…and php

…e-support

koke

I tested this and it works fine now, but I'm worried that this could get confusing. The JSON file is named block.json, and the JS file imports block.json, but the PHP imports shortcode.json.

I'm going to approve this one, but we might want to consider an alternative

chipsnyder closed this Jan 9, 2020

chipsnyder reopened this Jan 9, 2020

koke reviewed Jan 10, 2020

View reviewed changes

chipsnyder marked this pull request as ready for review January 10, 2020 15:00

chipsnyder requested review from Soean, ajitbohra, jorgefilipecosta and talldan as code owners January 10, 2020 15:00

koke reviewed Jan 13, 2020

View reviewed changes

packages/block-library/src/shortcode/edit.native.js Outdated Show resolved Hide resolved

koke added [Feature] Shortcodes Related to shortcode functionality Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Jan 13, 2020

chipsnyder requested review from SergioEstevao, TimothyBJacobs, adamsilverstein, aduth, atimmer, chrisvanpatten, daniloercoli, ellatrix, etoledom, mkaz, mmtr, nerrad, noisysocks, ntwb, swissspidy and youknowriad as code owners January 13, 2020 21:05

chipsnyder changed the base branch from master to rnmobile/master January 13, 2020 21:19

chipsnyder changed the base branch from rnmobile/master to master January 13, 2020 21:19

chipsnyder commented Jan 13, 2020

View reviewed changes

packages/block-library/src/index.native.js Outdated Show resolved Hide resolved

chipsnyder mentioned this pull request Jan 13, 2020

[RNMobile] Shortcode block support wordpress-mobile/gutenberg-mobile#1774

Merged

2 tasks

chipsnyder changed the base branch from master to rnmobile/master January 14, 2020 13:39

chipsnyder changed the base branch from rnmobile/master to master January 14, 2020 13:39

chipsnyder added 13 commits January 14, 2020 09:00

Added very basic support for displaying shortcode blocks on pages

8e5e380

Updated style for native shortcode editing

114133d

Updated the shortcode block styles based on the style guide

fa0ddd2

Added test cases for shortcode block

c0b3ddd

Migrated shortcode attributes to block.json to be read by javascript …

dad1827

…and php

Correct formatting issues

7c8dbf4

Update test expectations to preserve attributes when shortcode isn't …

50ff600

…converted to block

Resolve PHP formatting issues

e0667a3

Removed unnecessary comment block.

480a80b

Copy the block.json files with the php files to allow easier referenc…

95c3baf

…e in php

Added very basic support for displaying shortcode blocks on pages

c14cc26

Migrated shortcode attributes to block.json to be read by javascript …

f473e53

…and php

Apply changes from master that add the devOnly const

325f581

chipsnyder mentioned this pull request Jan 14, 2020

Build Tools: Copy block-library PHP metadata files with PHP source files WordPress/wordpress-develop#131

Closed

Merge remote-tracking branch 'upstream/master' into rnmobile/shortcod…

677b470

…e-support

koke approved these changes Jan 15, 2020

View reviewed changes

koke merged commit 931746b into WordPress:master Jan 15, 2020

chipsnyder deleted the rnmobile/shortcode-support branch January 15, 2020 17:08

ellatrix added this to the Gutenberg 7.3 milestone Jan 20, 2020

aduth mentioned this pull request Jan 21, 2020

7.3 RC: Warning of missing file #19770

Closed

chipsnyder mentioned this pull request Jan 23, 2020

Update Shortcode design elements from design review wordpress-mobile/gutenberg-mobile#1810

Closed

aduth mentioned this pull request Jan 27, 2020

Framework: Fix server-registered fixtures script #19884

Merged

chipsnyder mentioned this pull request Jan 30, 2020

Build Tools: Copy block-library PHP metadata files with PHP source files WordPress/wordpress-develop#143

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Shortcode block support#19534

[RNMobile] Shortcode block support#19534
koke merged 14 commits intoWordPress:masterfrom
chipsnyder:rnmobile/shortcode-support

chipsnyder commented Jan 9, 2020 •

edited

Loading

Uh oh!

koke Jan 10, 2020

Uh oh!

gziolo Jan 13, 2020

Uh oh!

chipsnyder Jan 13, 2020

Uh oh!

chipsnyder Jan 13, 2020

Uh oh!

gziolo Jan 14, 2020 •

edited

Loading

Uh oh!

koke Jan 14, 2020

Uh oh!

chipsnyder Jan 14, 2020

Uh oh!

koke Jan 14, 2020

Uh oh!

chipsnyder Jan 14, 2020

Uh oh!

gziolo Jan 15, 2020

Uh oh!

Uh oh!

Uh oh!

koke left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	new CopyWebpackPlugin( [
	{
	from: './packages/block-library/src/**/index.php',
	test: new RegExp( `([\\w-]+)${ escapeRegExp( sep ) }index\\.php$` ),
	to: 'build/block-library/blocks/[1].php',
	transform( content ) {
	content = content.toString();

	// Within content, search for any function definitions. For
	// each, replace every other reference to it in the file.
	return content
	.match( /^function [^\(]+/gm )
	.reduce( ( result, functionName ) => {
	// Trim leading "function " prefix from match.
	functionName = functionName.slice( 9 );

	// Prepend the Gutenberg prefix, substituting any
	// other core prefix (e.g. "wp_").
	return result.replace(
	new RegExp( functionName, 'g' ),
	( match ) => 'gutenberg_' + match.replace( /^wp_/, '' )
	);
	}, content )
	// The core blocks override procedure takes place in
	// the init action default priority to ensure that core
	// blocks would have been registered already. Since the
	// blocks implementations occur at the default priority
	// and due to WordPress hooks behavior not considering
	// mutations to the same priority during another's
	// callback, the Gutenberg build blocks are modified
	// to occur at a later priority.
	.replace( /(add_action\(\s'init',\s'gutenberg_register_block_[^']+'(?!,))/, '$1, 20' );
	},
	},
	] ),

Conversation

chipsnyder commented Jan 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Add New Shortcode

Edit existing Shortcode

Screenshots

Placeholder

iOS

Android

Static

iOS

Android

Selected

iOS

Android

Types of changes

Checklist:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gziolo Jan 14, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

koke left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chipsnyder commented Jan 9, 2020 •

edited

Loading

gziolo Jan 14, 2020 •

edited

Loading