refactor(theme-classic): split CodeBlock

[slorber]

Motivation

Preliminary refactor before extracting new theme components meant to be swizzled

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

Preview tests should be exactly as before

• https://docusaurus.io/tests/pages/code-block-tests
• https://deploy-preview-7175--docusaurus-2.netlify.app/tests/pages/code-block-tests

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	f82ea31
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62592d67d686be0008d4e47a
😎 Deploy Preview	https://deploy-preview-7175--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	62
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7175--docusaurus-2.netlify.app/

[github-actions]

Size Change: 0 B

Total Size: 799 kB

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	50 kB
website/build/assets/css/styles.********.css	106 kB
website/build/assets/js/main.********.js	604 kB
website/build/index.html	38.6 kB

_{compressed-size-action}

[Josh-Cena]

After this refactor I realized the ReactElement version doesn't accept title. I tried a bit but because it's inside a pre the font is different. Just a note that we may want to support that in the future.

[Josh-Cena]

Result looks the same

[slorber]

Thanks 👍

Little swizzle issue:

We can't swizzle the whole CodeBlock/Content, and styles.module.css will never be copied when swizzling Element/String (afaik it only copies CSS files with exact same name as the copied component)

Not sure what's the best way to improve refactor to handle that

[Josh-Cena]

We can't swizzle the whole CodeBlock/Content,

We should definitely allow that. I also realized we can't swizzle one of CodeBlock/Content/{Element,String} without also ejecting the CSS file because CSS is imported with relative paths. Maybe they should always be swizzled together since they seem so tightly coupled anyways...