Skip to content
This repository has been archived by the owner on Jan 10, 2023. It is now read-only.

[Gutenberg] Build a "Browse by activity" block for Homepage #30

Merged
merged 7 commits into from
Apr 12, 2018

Conversation

miina
Copy link
Contributor

@miina miina commented Apr 4, 2018

Based on #12.
Fixes #24.

The PR aims to:

  • Add SVG textarea term meta for Activity;
  • Pull Activity list content dynamically;

Note that this PR already includes creating Activity taxonomy which is part of #27.

Copy link
Contributor

@kienstra kienstra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great Work, A Few Points Below

Hi @miina,
Thanks for adding all of these blocks. Your Gutenberg experience is really valuable.

There are a few points here, though this is probably a lower priority than PR #13 now.


// Replace ' with " since ' might cause issues with sanitizing.
$text = trim( str_replace( "'", '"', $text ) );
return wp_kses( $text, $allowed_html );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like there are some valid <svg> elements that this doesn't allow.

For example, the "circle" SVG here. Or the shapes here.

Maybe this is intentional. If so, maybe there could be something below the <textarea> explaining what is allowed in edit_activity_meta_fields().

It looks like AMP allows several elements in svg tags, though maybe not all.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for noting that. Originally added intentionally only the elements that were in the template but you're right -- it would probably be good to add some others. I'll add just a few others now that are used elsewhere in the template, however, perhaps it would be easier later to allow uploading an .svg file instead.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding the message about allowed elements. The fact that it allows the elements in the template should be enough for now.

<?php
// @codingStandardsIgnoreLine
echo $this->sanitize_activity_svg( $value );
?>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't a blocker, but these lines could be on one line:

<?php echo $this->sanitize_activity_svg( $value ); // WPCS: XSS ok. ?>


$old_value = get_term_meta( $term_id, 'amp_travel_activity_svg', true );
$new_value = isset( $_POST['travel-activity-svg'] ) ? $this->sanitize_activity_svg( $_POST['travel-activity-svg'] ) : '';
if ( $old_value !== $new_value ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the user enters something that is an invalid <svg> and $this->sanitize_activity_svg() strips it entirely, should this still do update_term_meta()?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question, thought so initially. For example if the svg tag has illegal attributes then the svg tag will still remain, in theory it would get stripped entirely only if none of the inserted tags are allowed. But perhaps it makes more sense if the new value is saved as empty only if the unstripped version is empty (the intention was to save empty value). Will change it for now.

/**
* Register block.
*/
export default registerBlockType(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is probably beyond this PR's scope. But when we have more front-end support, maybe we could look at how to make the featured destination images expand less.

On hovering over them in the Gutenberg editor, they expand vertically much more than they do on the front-end of the ampstart site.

{
title: __( 'Featured' ),
category: 'common',
icon: 'wordpress-alt',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to do this now. But it might be good to consider other icons here. Like this might be format-image', similar to the "Image" block.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, maybe all the blocks would need something related to the Travel theme.

// Copy from Travel HTML template.
edit() {

// Don't display the travel angels since that will hide the block configure buttons behind an image.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should probably be "Don't display the travel angles"

?>
</textarea>
<p class="description"><?php esc_attr_e( 'This is for the background icon of the activity term.', 'travel' ); ?></p>
</td>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please change this from esc_attr_e() to esc_html_e()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this looks good.

* Register 'activity' and 'location' taxonomy.
*/
public function register_taxonomies() {
register_taxonomy( 'activity', array( 'adventure', 'post' ), array(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These values in both of the register_taxonomy() calls are the same as the default, and not needed:

  • hierarchical
  • public
  • show_ui

@miina
Copy link
Contributor Author

miina commented Apr 12, 2018

@kienstra Thanks for reviewing, made some changed accordingly, should be ready now.

@miina
Copy link
Contributor Author

miina commented Apr 12, 2018

Note that the heading of the block is static, looks like the texts of dynamic blocks can't be edited directly as with other blocks (at least with the Gutenberg stable version as of current moment) and making the heading editable is something to look into later.

Copy link
Contributor

@kienstra kienstra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved

Hi @miina,
Thanks for your great work with this "Activity list" block. This is approved.

As you mentioned, the heading of the block isn't editable, with this being a dynamic block.

But we could revisit this later if needed.

not-editable

@kienstra kienstra merged commit 6cc028d into develop Apr 12, 2018
@kienstra kienstra deleted the feature/24-activity_list_block branch April 12, 2018 17:15
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants