Support <p> tags in author-profile component

[tomchambers2]

Do you want to request a feature or report a bug?
Bug

What is the current behaviour?
Users can now save multiple paragraphs in newsuk/times-author-page-editor. The content is now rendered with <p> tags. The styling on the containing div specifying the line-height is overwritten by this rule that comes from newsuk/cps-content-render which applies that style to all <p> tags.

If the current behaviour is a bug, please provide the steps to reproduce.

Bio with p tags, rendered with incorrect line height: https://www.thetimes.co.uk/profile/niall-ferguson?page=1

Bio with no p tags, rendered with correct line height: https://www.thetimes.co.uk/profile/david-aaronovitch?page=1

What is the expected behaviour?
The bio should be rendered with the correct line-height regardless of preceding rules from render.

If this is a feature request, what is the motivation or use case for changing
the behaviour?

Please mention other relevant information such as the browser version, Node.js
version and Operating System.

[jimhunty]

Thanks @tomchambers2 for raising this.

To add a global style will cause a lot of problems elsewhere in the site, due to the CSS not being scoped in a more modern way. We would potentially see a lot of regressions from a simple change. As a result, we shouldn't update the legacy code. Especially as this is a React only page and should be covered by this repo.

There are two considerations here. 1 is the styling, 2 is the quality of data. As you suggest, the content is not currently coming through as paragraph tags, which means we are not displaying semantic markup. This is something we should look to resolve.

However, to resolve your issue, the suggestion here is to update the renders. If you look at packages/author-profile/src/author-profile-head-biography.js you will see we use renderTrees to render the markup that comes from the API. At the time of writing, this takes coreRenders to display the bio. The suggestion here would be to extend coreRenders to include the paragraph you wish to have. This should be created as a separate component. You will need to consider Native, as well as paragraphs, are not supported there.

For an example on how this works, see packages/article-skeleton/src/article-body/article-body-row.js