Add template editor rendering #69

kienstra · 2021-04-27T18:41:38Z

Changes

Renders the CSS in the React editor
Renders the markup in the React template editor on the front-end and the 'Front-end Preview':

Testing instructions

composer install && npm install && npm run dev
/wp-admin > Custom Blocks > Add New
Give the block a title of 'Testing Template'
Add a field
Give the field a label of 'Text':
Click 'Template Editor'
Enter this:

<div class="foo">
    {{text}}
</div>

Click the 'CSS' button:
Enter this:

.foo {
    color: green;
}

Click 'Save draft'
Click 'Editor Preview
Enter some text:
Click 'Front-end Preview'
Expected: The text you entered is there, and it's green:

Just remove /** DocBlock syntax for comments and use // instead.

This reverts commit 6b7fde5.

This should test that it actually works better than testing helper methods.

Also, add a comment for where the template editor markup will be rendered.

Though this doesn't work yet, it'll need to look for {{}}.

… 'foo' ) The integration test is passing, but there are still edge cases to handle.

Simply add a return at the end of the if before it.

Ensure that this renders in {{}} as expected.

It's possible, though probably not advisable, that users have field names with { or }.

If they have a tutorial on Mustach, they might need to render {{example}} without this doing block_field( 'example' ). So they can escape it like \{\{example\}\} and this will strip the escaping on rendering.

Also, don't render the CSS again in the same document.

This is a little hacky, but the tests are passing ;).

To test render_css(). render_markup() is tested in integration tests.

…ndered If there was no template to render, look for CSS to render in the <style>.

kienstra · 2021-05-05T07:03:56Z

php/Blocks/Loader.php

+		}
+
+		if ( ! empty( $this->blocks[ "genesis-custom-blocks/{$name}" ]['templateMarkup'] ) ) {
+			$this->template_editor->render_markup( $this->blocks[ "genesis-custom-blocks/{$name}" ]['templateMarkup'] );


This renders the markup:

kienstra · 2021-05-05T07:07:55Z

tests/php/Integration/Helpers/AbstractAttribute.php

-	 *
-	 * @inheritdoc
-	 */
-	public function setUp() {


The inheriting classes can implement this instead.

A DockBlock was just copied, and it doesn't help much.

I couldn't figure the fields out, there's no official documentation on it, and the type of the option looks wrong.

dreamwhisper

This is working great for me.

I noticed that in the editor preview, the image has a max height on it so it doesn't match the front end preview, but not a big deal because in the acutal editor, when you click outside the block, it displays similar in the editor and front end.

However, it would be a nice touch to account for theme CSS in this, but not necessarily in this PR. For example, in this case, I have a heading in the template editor:

But, it displays this way in the preview:

And this way on the front end:

Really nice job, @kienstra!

kienstra · 2021-05-06T20:46:00Z

@dreamwhisper,
Thanks so much for your review!

However, it would be a nice touch to account for theme CSS in this, but not necessarily in this PR. For example, in this case, I have a heading in the template editor:

Great idea, your front-end photo looks a lot better, using theme CSS. I'll keep that in mind for future PRs.

mikemcalister

Looks great, Ryan. I'm really excited to see this update, I bet a lot of customers will enjoy this.

johnstonphilip · 2021-05-07T15:34:56Z

php/Blocks/Loader.php

+			return;
+		}
+
+		if ( ! current_user_can( 'edit_posts' ) || ! isset( $templates[0] ) ) {


I wonder if it makes sense to introduce a custom user permission for this? Maybe current_user_can ( 'edit_genesis_custom_blocks' ) or something?

Hm, we could use genesis_custom_block_edit_block, but I'm not too sure it would make a big difference.

Here's the main context they would see this in:

If we used genesis_custom_block_edit_block, it would mean editors wouldn't see it.

But either way would probably be fine.

johnstonphilip · 2021-05-07T15:36:10Z

php/Blocks/TemplateEditor.php

+
+		// Escape characters before { should be stripped, like \{\{example\}\}.
+		// Like if they have a tutorial on Mustache and need the template to render {{example}}.
+		echo preg_replace( '#\\\{\\\{(\S+?)\\\}\\\}#', '{{\1}}', $rendered ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped


That's a pretty simple regex pattern, nice.

Nice that you could write about mustache too.

I do wonder if this could use escaping as well. Just concerned that security researchers might have an issue with this, or even the core plugins team.

Ah, good point. Hm...

How about df28138? It's escaped with wp_kses_post().

johnstonphilip · 2021-05-07T15:37:43Z

php/Blocks/TemplateEditor.php

+		$this->blocks_with_rendered_css[] = $block_name;
+
+		?>
+		<style><?php echo $css; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></style>


Is there any way to escape this? I can't really think of a way that would be straightforward enough. Just concerning anytime output is not escaped.

Good point. Let me think about that.

How about wp_strip_all_tags() with eb4bc47?

The 'Additional CSS' Customizer control does something very similar.

Though it also validates it client-side.

johnstonphilip · 2021-05-07T15:48:07Z

This might be out of scope, but when testing I noticed that changes I make to the markup are not reflected in the frontend preview unless I save. It seems like it would be preferable (to me anyway) to see those previews prior to saving.

kienstra · 2021-05-07T16:18:26Z

Hi @johnstonphilip,

This might be out of scope, but when testing I noticed that changes I make to the markup are not reflected in the frontend preview unless I save. It seems like it would be preferable (to me anyway) to see those previews prior to saving.

That's a good point, it's not ideal.

The idea is to use the front-end preview that is saved, not just the one that's edited.

That's because the back-end only knows about the registered fields that were saved.

So if the editor sends new fields that aren't saved to the back-end, there will be an error in the preview.

Still, I'll keep that it in mind. It's not a great UX.

This only escapes markup, not CSS.

It's not ideal, but shouldn't allow JS.

johnstonphilip · 2021-05-07T18:42:31Z

php/Blocks/TemplateEditor.php

+		$this->blocks_with_rendered_css[] = $block_name;
+
+		?>
+		<style><?php echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></style>


@johnstonphilip, thanks a lot!

johnstonphilip

Good stuff @kienstra

kienstra · 2021-05-07T18:55:53Z

@johnstonphilip, thanks a lot for reviewing this!

kienstra · 2021-05-07T18:56:21Z

Hi @mikemcalister,

Looks great, Ryan. I'm really excited to see this update, I bet a lot of customers will enjoy this.

Thanks so much for reviewing this! Yeah, I hope they like it 😄

kienstra added 20 commits April 27, 2021 13:39

Remove some conditionals, limit some comments

6b7fde5

Just remove /** DocBlock syntax for comments and use // instead.

Revert "Remove some conditionals, limit some comments"

e681ee0

This reverts commit 6b7fde5.

Restore comment edits, trivial change from DocBlock to //

0c0f005

Add an integration test that will keep failing until this feature works

24adae4

This should test that it actually works better than testing helper methods.

Allow saving the template markup to the Block object

8e60e81

Also, add a comment for where the template editor markup will be rendered.

Add a TemplateEditor class to render the markup

1e66022

Though this doesn't work yet, it'll need to look for {{}}.

Implement the template rendering, replacing {{foo}} with block_field(…

b161444

… 'foo' ) The integration test is passing, but there are still edge cases to handle.

Implement the template rendering, replacing {{foo}} with block_field(…

fdc6747

… 'foo' ) The integration test is passing, but there are still edge cases to handle.

Remove an else block that's not needed

629745b

Simply add a return at the end of the if before it.

Indent translators comment, fixing my mistake

240834e

In the e2e test, ensure that the rendering works

5847eb0

Ensure that this renders in {{}} as expected.

Make the matcher non-greedy, so the field names can have { or }

f171d77

It's possible, though probably not advisable, that users have field names with { or }.

Fix missing semicolon so linting passes

75fe170

Handle escaped { in the template, like Phil mentioned

cec474e

If they have a tutorial on Mustach, they might need to render {{example}} without this doing block_field( 'example' ). So they can escape it like \{\{example\}\} and this will strip the escaping on rendering.

Render the CSS that was entered in the template editor

fea137b

Also, don't render the CSS again in the same document.

Fix the failing PHPUnit tests

618b7c2

This is a little hacky, but the tests are passing ;).

Add a unit test class for TemplateEditor.php

458c0e2

To test render_css(). render_markup() is tested in integration tests.

Use the CSS in the front-end preview if it exists

2fb7086

Allow saving the template CSS to JSON

fe8b84b

Render the <style> in the same place as the block, if it should be re…

8e92ac3

…ndered If there was no template to render, look for CSS to render in the <style>.

kienstra commented May 5, 2021

View reviewed changes

Remove needless comments, some copied

15edeec

A DockBlock was just copied, and it doesn't help much.

kienstra marked this pull request as ready for review May 5, 2021 07:12

Allow autocompletion, but not of the fields (at least yet)

06bf5e0

I couldn't figure the fields out, there's no official documentation on it, and the type of the option looks wrong.

kienstra requested review from RobStino, johnstonphilip, dreamwhisper, BMO-tech and marksabbath May 5, 2021 08:16

kienstra requested a review from mikemcalister May 5, 2021 08:17

dreamwhisper approved these changes May 6, 2021

View reviewed changes

mikemcalister approved these changes May 7, 2021

View reviewed changes

johnstonphilip reviewed May 7, 2021

View reviewed changes

kienstra added 2 commits May 7, 2021 11:27

Escape the rendered template with wp_kses_post()

df28138

This only escapes markup, not CSS.

Use wp_strip_all_tags() for CSS escaping

eb4bc47

It's not ideal, but shouldn't allow JS.

johnstonphilip reviewed May 7, 2021

View reviewed changes

johnstonphilip self-requested a review May 7, 2021 18:45

johnstonphilip approved these changes May 7, 2021

View reviewed changes

kienstra merged commit 3670937 into develop May 7, 2021

kienstra deleted the add/template-editor-rendering branch May 7, 2021 18:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add template editor rendering #69

Add template editor rendering #69

kienstra commented Apr 27, 2021 •

edited

Loading

kienstra May 5, 2021

kienstra May 5, 2021

dreamwhisper left a comment

kienstra commented May 6, 2021

mikemcalister left a comment

johnstonphilip May 7, 2021 •

edited

Loading

kienstra May 7, 2021

johnstonphilip May 7, 2021

johnstonphilip May 7, 2021

johnstonphilip May 7, 2021

kienstra May 7, 2021

kienstra May 7, 2021

johnstonphilip May 7, 2021

kienstra May 7, 2021

kienstra May 7, 2021

johnstonphilip commented May 7, 2021

kienstra commented May 7, 2021 •

edited

Loading

johnstonphilip May 7, 2021

kienstra May 7, 2021

johnstonphilip left a comment

kienstra commented May 7, 2021

kienstra commented May 7, 2021

Add template editor rendering #69

Add template editor rendering #69

Conversation

kienstra commented Apr 27, 2021 • edited Loading

Changes

Testing instructions

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dreamwhisper left a comment

Choose a reason for hiding this comment

kienstra commented May 6, 2021

mikemcalister left a comment

Choose a reason for hiding this comment

johnstonphilip May 7, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnstonphilip commented May 7, 2021

kienstra commented May 7, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnstonphilip left a comment

Choose a reason for hiding this comment

kienstra commented May 7, 2021

kienstra commented May 7, 2021

kienstra commented Apr 27, 2021 •

edited

Loading

johnstonphilip May 7, 2021 •

edited

Loading

kienstra commented May 7, 2021 •

edited

Loading