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

Fix issues with block elements inside CTA and LegislativeList #293

Merged
merged 1 commit into from
Oct 18, 2023

Conversation

jkempster34
Copy link
Contributor

@jkempster34 jkempster34 commented Oct 18, 2023

https://trello.com/c/VyfTCVe1

In #291, we made a change to how the call to action and legislative list
components are parsed. This involved the use of the parse_block_html option,
which enables parsing in HTML blocks until it is toggled off.

Since this change, we have received Zendesk tickets regarding the use of the
image component inside a call to action. Because we toggle off the parsing of
HTML blocks entirely within call to actions, the HTML of the image is not
parsed correctly.

To fix this, we can enable parsing of the surrounding divs of the call to
action and legislative list components only. This means that any inner blocks
(such as the figure tag surrounding an image) are parsed using their default
mechanism 1.

Before

image

After

image

This repo is owned by the publishing platform team. Please let us know in #govuk-publishing-platform when you raise any PRs.

@jkempster34 jkempster34 force-pushed the fix-images-inside-cta branch 3 times, most recently from 4bcc0bb to 9de8bcf Compare October 18, 2023 13:07
In #291, we made a change to how the call to action and legislative list
components are parsed. This involved the use of the `parse_block_html` option,
which enables parsing in HTML blocks until it is toggled off.

Since this change, we have received Zendesk tickets regarding the use of the
image component inside a call to action. Because we toggle off the parsing of
HTML blocks entirely within call to actions, the HTML of the image is not
parsed correctly.

To fix this, we can enable parsing of the surrounding divs of the call to
action and legislative list components only. This means that any inner blocks
(such as the `figure` tag surrounding an image) are parsed using their default
mechanism [1].

[1]: https://kramdown.gettalong.org/syntax.html#html-blocks
@jkempster34 jkempster34 force-pushed the fix-images-inside-cta branch from 9de8bcf to a3c7e45 Compare October 18, 2023 13:09
@mike29736 mike29736 self-assigned this Oct 18, 2023
Copy link
Contributor

@mike29736 mike29736 left a comment

Choose a reason for hiding this comment

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

I can't say I fully understand the different outcomes I'd expect from the different settings of that markdown attribute. But the tests are happy and the Govspeak converter examples look good, so it's going in the right direction 👍

@jkempster34 jkempster34 merged commit 2cb2e41 into main Oct 18, 2023
@jkempster34 jkempster34 deleted the fix-images-inside-cta branch October 18, 2023 13:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants