36 - Single product template

[mehigh]

This is left:

• Top carousel
• mobile fixed CTA overlay
• mobile content product details / price size / inlining

And of course copying the product.css from ampstart (i've setup that repo next to this and referenced the CSS with a regular CSS link during development). Reached 44KB of CSS until now.

[miina]

Started adding theme integration Currently (within 9d60672) using placeholders for header.php, footer.php, and static comments.php from @mehigh's created HTML template.

Maybe comments.php can be implemented within this PR since that's directly related to the CPT template but perhaps proper header template(s) and footer template could be separate PR-s/issues? Thoughts, @kienstra and @postphotos?

[kienstra]

Header And Footer Templates

Hi @miina,

...perhaps proper header template(s) and footer template could be separate PR-s/issues

That's a good idea. Separate issues and PRs for header.php and footer.php would help organize this.

And we could merge the templates into develop as soon as they're ready, instead of waiting for all of them.

[DavidCramer]

@miina - please take a look at #38 as it could affect the structures.

[miina]

@kienstra Forgot to mention that this PR also fixes #8 (Ratings logic).

[kienstra]

Building editor-blocks.js

The develop branch removes editor-blocks.js, in order to avoid merge conflicts in PRs. So I also removed that file from this branch to remove the conflict to develop.

Please do npm run build when checking out this branch to use the Gutenberg blocks.

[mehigh]

The html/css is complete for the page now:

[miina]

@kienstra Thanks for reviewing, most of the issues should be addressed now. Left the gallery as static for now, hopefully that's OK for now and could be addressed later if needed. There's just one issue that I'm not sure how to fix, any thoughts?

@mehigh Thanks for generating the HTML! There's one CSS issue that would be great if you could help with -- namely within the Similar Posts section there's a div with class travel-overflow-container. The CSS for the class in the adventure.css looks like this:

.travel-overflow-container {
    display: inline-block;
    min-width: 100vw;
    padding-left: calc((100vw - 72rem) / 2);
    padding-right: calc((100vw - 72rem) / 2);
}

However, with the AMP plugin on it looks like the padding gets stripped and only this is left:

.travel-overflow-container {
    display: inline-block;
    min-width: 100vw;
}

Would be great if you could help with that issue.

[postphotos]

Making sure we capture - related to #36.