Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Block: Post comment author]: Add link settings and block supports #35595

Merged
merged 8 commits into from Oct 19, 2021

Conversation

cbravobernal
Copy link
Contributor

@cbravobernal cbravobernal commented Oct 13, 2021

Description

Closes #30572.

Used #30573 as a reference.

How has this been tested?

  1. Add a post comment block (using an existing comment ID)
  2. Add an inner post comment author block
  3. Confirm that the color and typography options work
  4. Confirm that the link option works.
  5. Confirm that the target blank/self works.

Screenshots

Loom with a summary:
https://www.loom.com/share/924ffd9e1d9d469ea4bbba6fe6529219

Source code generated on the frontend:
comment_author_frontend_code

Types of changes

Enhancement

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • 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 (please manually search all *.native.js files for terms that need renaming or removal).

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 13, 2021
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @c4rl0sbr4v0! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@cbravobernal
Copy link
Contributor Author

As the task is quite similar to #30573, and @carolinan and @gziolo both worked on that.
Would you mind taking it a look?
Thanks!

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

I had some questions but overall this looks great. It’s very similar to the PR you linked 👍

<PanelBody title={ __( 'Link settings' ) }>
<ToggleControl
label={ __( 'Link to authors URL' ) }
onChange={ () => setAttributes( { isLink: ! isLink } ) }
Copy link
Member

Choose a reason for hiding this comment

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

Should it also reset the link target when link gets disabled?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I copied that attribute from Post Title block. There is no reset when you enable/disable the link.

Of course I can add a reset, but maybe we could create an issue to unify on all blocks with the same attribute to have the same behaviour?

Copy link
Member

Choose a reason for hiding this comment

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

New issue for unification sounds like a good plan 👍

) }
</PanelBody>
</InspectorControls>
<div { ...blockProps }>{ displayAuthor }</div>
Copy link
Member

Choose a reason for hiding this comment

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

The HTML generated doesn’t use <p> tag anymore. Is that intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It was, but now that you mention, I will edit in order to have it again.

Is there any guide about how a block html structure should be?

Copy link
Member

Choose a reason for hiding this comment

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

My best answer would be to ask theme experts @carolinan and @aristath for advice 😃

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I put the p tag anyway 🙂

Copy link
Member

Choose a reason for hiding this comment

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

Sure, we can iterate on it since we don't save the HTML output in the post/theme content, but use render_callback on the server.

Copy link
Member

Choose a reason for hiding this comment

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

It looks like there is no <p> on the frontend when there is no link, so let's remove it here, too.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If we remove the p on the editor the comments are all misaligned due to padding issues.
Screenshot 2021-10-19 at 16 24 57

What would be a better approach?

  • Leave as it was before this PR. This means no <p> on frontend, but <p> on editor.
  • Add <p> on frontend, to have it both ways the same.
  • Remove <p> in both, use CSS to add a padding (personally I don't like this one really much).
  • Add an option so users can choose what they want to show on frontend <p>, <span>, nothing, <div>

All feedback will be appreciated! I will leave by the moment as first option, as it was previously.

Copy link
Member

Choose a reason for hiding this comment

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

Let's leave the old behavior and address it seperately.

packages/block-library/src/post-comment-author/index.js Outdated Show resolved Hide resolved
@gziolo
Copy link
Member

gziolo commented Oct 14, 2021

Loom with a summary:
https://www.loom.com/share/924ffd9e1d9d469ea4bbba6fe6529219

This is very useful. Thank you for including. In this type of PRs it would be helpful to show also source code generated on the frontend.

@gziolo
Copy link
Member

gziolo commented Oct 19, 2021

Screen Shot 2021-10-19 at 14 41 43

The link on the frontend references the homepage. I see it also in the screenshot from the description. Is that the expected URL for the admin user?

Update: everything is correct. It read the URL from the user's profile. When I added another user and a comment it links to the URL is set in the profile 👍🏻

@gziolo
Copy link
Member

gziolo commented Oct 19, 2021

With link

Editor:

Screen Shot 2021-10-19 at 14 51 20

Frontend:

Screen Shot 2021-10-19 at 14 51 44

No link

Editor:

Screen Shot 2021-10-19 at 14 54 08

Frontend:
Screen Shot 2021-10-19 at 14 53 46

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Everything looks good in my testing. The only thing that would be nice to unify between the frontend and the editor is the <p> tag used when there is no link as noted in https://github.com/WordPress/gutenberg/pull/35595/files#r731835989.

@gziolo gziolo merged commit fac0447 into WordPress:trunk Oct 19, 2021
@github-actions github-actions bot added this to the Gutenberg 11.8 milestone Oct 19, 2021
@cbravobernal cbravobernal deleted the update/post-comment-author branch October 19, 2021 20:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Comment Author Block
2 participants