WP overrides
Optional stylesheets that smooth out the default WordPress block editor so it matches the look and feel of Eightshift UI components. Each file is opt-in — import only the ones you want.
@import '@eightshift/ui-components/dist/assets/wp-overrides/<name>.css';
The package also exposes them via shorthand exports, useful with bundlers that resolve exports:
@import '@eightshift/ui-components/wp-overrides/<name>';
Caution
If you are using Frontend libs v12 or older, skip these overrides — Frontend libs ships its own WordPress styling and the two sets will fight each other. See Migrations if you're moving from wp-ui-enhancements.css.
Available overrides
| File | What it does |
|---|---|
allow-full-width-blocks | Lets blocks inside the post content layout expand to the full container width. |
fix-label-text-case | Normalizes the casing, size, and weight of labels in BaseControl, InputControl, and CustomSelectControl. |
increase-sidebar-width | Widens the editor sidebar so longer labels and controls have room to breathe (handles WP 6.6 quirks). |
make-block-messages-nicer | Restyles the block crash and "block missing" warnings to match the Eightshift visual language. |
replace-fonts | Replaces the default editor font with the Eightshift font stack across the header, sidebar, controls, popovers, tooltips, etc. |
restyle-tooltips | Replaces the default Gutenberg .components-tooltip styling with a darker, blurred variant, and a light variant for tooltips with rich content. |
round-corners | Adds consistent rounded corners to buttons, snackbars, modals, the publish panel, and other commonly-encountered editor controls. |
unify-button-sizes | Forces a consistent minimum size on top-toolbar buttons so the toolbar reads as a single row. |
Recommended block editor setup
application-blocks-editor.css
@import '@eightshift/ui-components/dist/assets/wp-overrides/replace-fonts.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/fix-label-text-case.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/increase-sidebar-width.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/make-block-messages-nicer.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/restyle-tooltips.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/round-corners.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/unify-button-sizes.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/allow-full-width-blocks.css';
@import '@eightshift/ui-components/dist/assets/style.css'; // or style-editor.css for non-Tailwind projects
For the WP admin area, the standalone style-admin.css is usually enough:
application-admin.css
@import '@eightshift/ui-components/dist/assets/style-admin.css';