Remove our custom block library CSS

[douglas-johnson]

Background

When the block editor was just for post content, we wrote our own CSS for all the blocks. When the block editor moved into Full Site Editing, there were too many blocks and we added a concatenated CSS file with the core block css for blocks we didn't especially need to customize.

As of WordPress 6.2 I feel the WP core block library's CSS is good enough to use. We have used it on Thought Catalog and removed the uses of the columns block from Creepy Catalog that would conflict with the core block library's CSS.

This will also resolve #125

Acceptance Criteria

• [ ] Content looks very similar, if not identical, or can be fixed using editor settings

Details

• Remove the CSS for wp core blocks and the block modifiers
  • https://github.com/thoughtis/cata/tree/0.8.7/assets/src/less/blocks
• Remove this WordPress gulp task
  • https://github.com/thoughtis/cata/blob/0.8.7/gulpfile.js#L74
• Remove our Core_Columns class, enabling __experimentalLayout support
  • https://github.com/thoughtis/cata/blob/0.8.7/includes/blocks/core-columns/class-core-columns.php
• Stop switching the core block library css for our custom compiled one
  • https://github.com/thoughtis/cata/blob/0.8.7/includes/enqueue-assets/class-enqueue-assets.php#L32
• Update our blocking CSS to depend on wp-block-library instead of our custom version
  • https://github.com/thoughtis/cata/blob/0.8.7/includes/enqueue-assets/class-enqueue-assets.php#L44
• As noted in a comment in our columns block CSS, child themes have some core block related code in them. That should probably be removed too.
  • https://github.com/thoughtis/cata/blob/master/assets/src/less/blocks/wp-block-columns/layout.less#L11

Issues I noticed

• The core block library uses em units for the gaps in the Post Template block's grid layout. These cause problems with fluid type. We have solved this with more complex math in other scenarios. Long term we could decide to use that came "max column size" math here too, but I think fixing it for the purposes of this issue could be as simple as overriding it to use rem
  • https://github.com/WordPress/gutenberg/blob/%40wordpress/block-library%408.10.0/packages/block-library/src/post-template/style.scss
  • I had success locally with the CSS below, but have not tested it with child themes.

.wp-block-post-template.is-flex-container {
    gap:1.25rem;
}

@media (min-width:600px){
    .wp-block-post-template.is-flex-container.is-flex-container.columns-2>li{
      width:calc(50% - .625rem);
    }
    .wp-block-post-template.is-flex-container.is-flex-container.columns-3>li{
      width:calc(33.33333% - .83333rem);
    }
    .wp-block-post-template.is-flex-container.is-flex-container.columns-4>li{
      width:calc(25% - .9375rem);
    }
    .wp-block-post-template.is-flex-container.is-flex-container.columns-5>li{
      width:calc(20% - 1rem);
    }
    .wp-block-post-template.is-flex-container.is-flex-container.columns-6>li{
      width:calc(16.66667% - 1.04167rem);
    }
}

[douglas-johnson]

@jessica-townsend This has the potential to spiral since it nearly affects every site. I think we'll learn a lot from making a beta version and testing it with the child themes, so that should probably the first goal.

[jessica-townsend]

@douglas-johnson are there any frequently used blocks that you were concerned about? I tested the blocks that had CSS removed in addition to browsing the sites on Creepy Catalog, Collective World, and Shop Catalog, and these are the blocks that had significant differences:

• Buttons
• Calendar
• Code
• File
• Gallery
• Pullquote
• Quote

Here's a screenshot of before removing CSS

And after removing CSS

I think the calendar, file, and gallery blocks may need custom CSS for them to look the same as before. I think the others can be fixed in the editor, but for buttons it'd probably be a good idea to add default styles through theme.json.

[douglas-johnson]

• Buttons
  • I agree we should try to update the default styles. Its also relevant to update the streaming button style so the play arrow's height matches the text height
• Calendar
  • This is fine with the standard CSS
• Code
  • This is fine with the standard CSS
• File
  • If you default button styles can also be applied here, great
• Gallery
  • I totally hate the way the gallery looks, but I don't think its worth fighting the WP CSS. We only use it in a few places and I think those places will benefit from the editor matching the output.
• Pullquote
• Quote
  • Our additions of the quotation marks and emdashes should be purely additive, and I think they're done with pseudo elements so if we can just do those in our CSS, great.

[jessica-townsend]

@douglas-johnson beta2 works well for Shop Catalog and Collective World. There are some issues with buttons on Creepy Catalog and Clearing Farm due to conflicts with childtheme-specific CSS. It may be easier to explain the padding discrepancy between the default button and outline button on a call, so let me know if you would like to do that.

For all of these though, there isn't a hover state change or the "press down" effect on click anymore for buttons. If we want to bring these back, I know that theme.json has ":active", ":hover", and ":focus" properties for blocks and elements, or we could add custom CSS.

[jessica-townsend]

Updated padding on clearing farm: https://thoughtcatalog-network-develop.go-vip.net/clearing-farm/book-now/

[douglas-johnson]

A note for when we're working on this again, do we need this currentColor? https://github.com/thoughtis/cata/blame/0.8.7/assets/src/less/elements/links.less#L9

Its working without it on the parent theme, and dropping it makes the buttons easier to style