fixed misaligned elements in generated refunds page issue

[SpaceSurfer1]

Fixed misaligned elements in generated refunds page issue.

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #45213 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Go to WP Admin > Pages. If your site already has a "Refund and Returns Policy" page, delete it.
2. Using wp-cli, run wp shell. Then in the shell, run WC_Install::create_pages(). This will regenerate the Refund page with the updated content from this PR.
3. Back on WP Admin > Pages, click the link to preview the "Refund and Returns Policy" page. The "Late or missing refunds" and "Sale items" headings should now be aligned correctly.

Changelog entry

Fixed misaligned elements in generated refunds page issue, updated tags.

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Fix alignment issues in the generated content of the Refunds page

Comment

[github-actions]

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[coreymckrill]

@SpaceSurfer1 thanks for the PR! In my testing, looks like this does indeed fix the issue. I wonder if it would be even better, from an HTML semantics perspective, if those two lines were changed to h3 tags instead of paragraphs. What do you think?

[SpaceSurfer1]

Hi @coreymckrill, Thanks for reviewing👍. I just tested with h3 tag and compared with present one, following is the screenshot -

The font and size is changed while using h3. <p><b> keeps it same as before. Any suggestions?

[coreymckrill]

🤔 I guess it depends on which theme you're using. It looks like you're testing on Twenty Twenty Four, which is what I'm using too. With the h3, it is definitely bigger than it was before, but it's still smaller than the h2 heading that it belongs to:

I'll check and see if anyone else has thoughts on this...

[SpaceSurfer1]

@coreymckrill , Sure....👍

[coreymckrill]

@SpaceSurfer1 given that this change doesn't affect current stores, only new ones (since the content is only generated once when WooCommerce is first installed), I'd say let's go ahead and improve the semantics and switch to h3s.

This actually brings up a few other issues with the generated content that you could also address in this PR if you want to (also fine to just keep it focused on the two lines):

• "Overview" is currently an h3, but it should probably be an h2 to match the other heading levels
• All of the headings are wrapped in the wrong block "grammar". Meaning they are wrapped in <!-- wp:paragraph --> block tags, but they should have <!-- wp:heading --> instead.
• The heading tags should have a class="wp-block-heading" attribute, since that's what you get when you insert a heading block into the editor manually.

So the "Overview" heading, for example, should look like this:

<!-- wp:heading -->
<h2 class="wp-block-heading">Overview</h2>
<!-- /wp:heading -->

If you'd rather not take on the extra changes, we can spin up another PR later.

[SpaceSurfer1]

Hi @coreymckrill , I'll address those additional changes in this PR only. 👍

[SpaceSurfer1]

Hi @coreymckrill , I have updated the tags and added class attribute👍 . Can you please review it? Thanks.

[coreymckrill]

👍 All looks good now