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

Render Callout blocks as Notice blocks #658

Merged
merged 2 commits into from
Oct 22, 2024

Conversation

adamwoodnz
Copy link
Contributor

@adamwoodnz adamwoodnz commented Oct 20, 2024

Builds on previous work to render Callout shortcodes as Notice blocks.

This enhancement saves admins of sites like the Make blogs and Learn WordPress from having to update all the existing Callouts in content to match the redesigned UI.

Closes WordPress/wordpress.org#374

Note that we added style overrides in Developer Resources, and these will still be required as the callouts have been parsed from GitHub markdown and exist as post content, not blocks.

Screenshots from Make/Support

Before After
Screenshot 2024-10-21 at 10 56 25 AM Screenshot 2024-10-21 at 10 57 18 AM
Admin Frontend
Screenshot 2024-10-21 at 11 25 22 AM Screenshot 2024-10-21 at 11 25 32 AM

Testing

  1. Load this branch in a local environment or sandbox
  2. Add Callout blocks to a page or post. In the admin the block should display as a Callout.
  3. On the frontend the block should render as a Notice, with all inner blocks rendered as expected.

@ryelle
Copy link
Contributor

ryelle commented Oct 21, 2024

Good approach 👍🏻

Very minor, but with the old theme there's no spacing between notices. This isn't an issue with the new theme, so this can probably just be considered in-progress with the switch to the new theme.

Screenshot 2024-10-21 at 5 11 12 PM

I also noticed extra space at the end of the notices, it looks like o2 is injecting a script tag, so the p:last-child rule which would usually prevent the margin is not applying:

Screenshot 2024-10-21 at 5 47 37 PM

@adamwoodnz
Copy link
Contributor Author

o2 is injecting a script tag, so the p:last-child rule which would usually prevent the margin is not applying

Nice catch, fixed in 141e450

@adamwoodnz adamwoodnz merged commit c8293b8 into trunk Oct 22, 2024
2 checks passed
@adamwoodnz adamwoodnz deleted the try/render-callout-as-notice branch October 22, 2024 21:39
adamwoodnz added a commit that referenced this pull request Oct 22, 2024
adamwoodnz added a commit that referenced this pull request Oct 22, 2024
adamwoodnz added a commit that referenced this pull request Oct 22, 2024
adamwoodnz added a commit that referenced this pull request Oct 22, 2024
* Revert "Revert "Render Callout blocks as Notice blocks (#658)" (#659)"

This reverts commit 80dfeb4.

* Only disable o2 filters if the class exists
adamwoodnz added a commit that referenced this pull request Oct 23, 2024
adamwoodnz added a commit that referenced this pull request Oct 24, 2024
* Revert "Revert "Render Callout blocks as Notice blocks (#658)" (#659)"

This reverts commit 80dfeb4.

* Only disable o2 filters if the class exists

* Stop running filters on callout content

* Switch to using CSS to avoid o2 script tags from affecting layout

Hide empty p tags and remove margin from second to last element if there is an o2-data script tag.

* Allow for first or last elements being empty

Adjust margins on second and second to last elements accordingly

* 💄 Move comment

* Fix scope for content layout adjustments

* Fix br selectors
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Make blogs: Convert callout blocks to notice blocks
2 participants