Port HowToV2 block from express to milo

[jsandland]

Describe your specific features or fixes:

• Port HowToV2 block from express to milo
  Authoring Example:
  how-to-v2-milo.docx

Resolves: MWPW-164891

Example in express: https://stage--express--adobecom.hlx.page/drafts/jsandlan/how-to-steps-accordion
Example in milo: https://port-how-to-v2-from-express--express-milo--adobecom.hlx.page/drafts/jsandlan/how-to-v2-milo

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 6a7b38e ✅ (latest)
• c9773d1 ✅
• 789dded ✅
• ecbaf34 ✅
• c066977 ✅
• d1ef22e ✅
• b4ba422 ✅
• 27ae61d ✅
• df614c0 ✅
• 879ac2b ✅
• 71807e0 ✅
• b2b6014 ✅
• cfa65c8 ✅
• b00d0de ✅
• 5272655 ✅
• f2710d1 ✅
• c845e83 ✅
• e7f6e8a ✅
• aa007ac ✅
• 1031a7f ✅

[aem-code-sync]

	Page	Scores	Audits
📱	/drafts/jsandlan/how-to-v2-milo
🖥️	/drafts/jsandlan/how-to-v2-milo

[vhargrave]

found a few things.
Some unit tests wouldn't hurt either 🙌

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 66.85%. Comparing base (d11561c) to head (6a7b38e).
Report is 220 commits behind head on stage.

Additional details and impacted files

@@            Coverage Diff             @@
##            stage     #128      +/-   ##
==========================================
- Coverage   67.01%   66.85%   -0.17%     
==========================================
  Files          62       61       -1     
  Lines       10148    10104      -44     
==========================================
- Hits         6801     6755      -46     
- Misses       3347     3349       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[rgclayton]

A few more observations.

I created a test page under my drafts folder:

• https://port-how-to-v2-from-express--express-milo--adobecom.hlx.page/drafts/rclayton/how-to-v2-milo

The first how-to block on the page doesn't have title text above it and it has a media block under it, in the same section. Notice the how-to block pulls the title text out of the media block and inserts it above the how-to.

The second how to block doesn't have a title in the same section and returns null on the page.

@vhargrave, @fullcolorcoder,
I know this is a port from the express site. But, I almost think it would be better to have the title/heading for the block be a new row - similar to the rest of the block features - to avoid an odd authoring experience like I noted above. What do you think?

[jsandland]

A few more observations.

I created a test page under my drafts folder:

• https://port-how-to-v2-from-express--express-milo--adobecom.hlx.page/drafts/rclayton/how-to-v2-milo

The first how-to block on the page doesn't have title text above it and it has a media block under it, in the same section. Notice the how-to block pulls the title text out of the media block and inserts it above the how-to.

The second how to block doesn't have a title in the same section and returns null on the page.

I've updated this block so that the header is a new row within the block to address the comments above. I've also removed any reliance on section.

[rgclayton]

@jsandland Still seeing some issues. Here's my sample page for reference.

• If the header row is omitted the block fails to decorate correctly (throws null in place where h tag would be).
• If the header text is not an h2, h3, h4 the block fails to decorate (throws null in place where h tag would be).

I think adding a header should be optional.

I don't think you should force the author to use an h2, h3, h4 to decorate. You should accept any string and size the text as needed. For SEO reasons you should let the author decided on which heading to use depending on where the block falls on the page. Maybe default wrapping plain text in a h2 or h3. But leave as is if the author styles the text with any h tag they choose.

I'll try and get some sample code to help point you in the right direction for this.

In the mean time you can take a look at how some of the blocks in milo-core decorate the block to achieve similar things.

Hero marquee has a lot going on but a similar example to what your block has as far as structure (key value pairs).

Marquee block. A more simple version than the hero marquee.

cc: @fullcolorcoder

[vhargrave]

A few more observations.
I created a test page under my drafts folder:

• https://port-how-to-v2-from-express--express-milo--adobecom.hlx.page/drafts/rclayton/how-to-v2-milo

The first how-to block on the page doesn't have title text above it and it has a media block under it, in the same section. Notice the how-to block pulls the title text out of the media block and inserts it above the how-to.
The second how to block doesn't have a title in the same section and returns null on the page.

@vhargrave, @fullcolorcoder, I know this is a port from the express site. But, I almost think it would be better to have the title/heading for the block be a new row - similar to the rest of the block features - to avoid an odd authoring experience like I noted above. What do you think?

@rgclayton I agree, that sounds like a good approach.

[rgclayton]

A few more observations.
I created a test page under my drafts folder:

• https://port-how-to-v2-from-express--express-milo--adobecom.hlx.page/drafts/rclayton/how-to-v2-milo

The first how-to block on the page doesn't have title text above it and it has a media block under it, in the same section. Notice the how-to block pulls the title text out of the media block and inserts it above the how-to.
The second how to block doesn't have a title in the same section and returns null on the page.

@vhargrave, @fullcolorcoder, I know this is a port from the express site. But, I almost think it would be better to have the title/heading for the block be a new row - similar to the rest of the block features - to avoid an odd authoring experience like I noted above. What do you think?

@rgclayton I agree, that sounds like a good approach.

@vhargrave @fullcolorcoder,
I believe @jsandland and I figured at a better approach that feels more authoring intuitive. Basically, using regular page titles (due to how the title sits above the block). Which in turn reduces some of the complexity in the block decoration.

Jackson, did this all work out?