Problem/Motivation
The varbase_components module always loads root.css for the default Bootstrap framework,
which causes conflicts when using a custom Bootstrap theme. The custom Bootstrap styles are overridden by
the default root.css provided by the module.
Steps to Reproduce
- Install
varbase_components. - Copy all the components inside a new custom theme and add a
replacekey inside the*.components.ymlfile as per the documentation. -
Perform a full theme build and notice that the custom Bootstrap styles are still overridden by the default
root.cssprovided by the module. This is caused by the following dependency inckeditor5-styles:# Ckeditor 5 styles. ckeditor5-styles: dependencies: - core/components.varbase_components--root - core/components.varbase_components--alert - core/components.varbase_components--callout -
I've overridden this library with a custom theme library but without the
- core/components.varbase_components--root, and then everything worked as expected.
Proposed Resolution
- Remove the - core/components.varbase_components--root from the
ckeditor5-styleslibrary inside this module or load it on demand. - Add a new wrapper library
ckeditor5-rootforcore/components.varbase_components--rootonly toLoad components root and styles for CKEditor5 styles.
Remaining tasks
- ✅ File an issue about this project
- ✅ Addition/Change/Update/Fix to this project
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support on feature change/addition
- ➖ User Guide Documentation support on feature change/addition
- ➖ UX/UI designer responsibilities
- ➖ Accessibility and Readability
- ✅ Code review from 1 Varbase core team member
- ✅ Full testing and approval
- ✅ Credit contributors
- ✅ Review with the product owner
- ✅ Update Release Notes and Update Helper on new feature change/addition
- ✅ Release varbase-10.0.5, varbase_components-2.0.10, varbase-10.1.0-alpha1, varbase_components-3.0.0-alpha2
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
- N/A
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- Issue #3507250 by ahmad abbad, mohammad-fayoumi : Fixed to prevent Bootstrap root.css conflicts with custom Bootstrap themes in CKEditor
Issue fork varbase_components-3507250
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
rajab natshahComment #4
rajab natshah- core/components.varbase_components--rootfrom theckeditor5-styleslibrary, will not load the root variables when editing in the back-end.varbase_components/ckeditor5-styleslibrary.Comment #5
ahmad abbad commentedI encountered the same issue, and it seems the
varbase_components_preprocess_fieldhook is no longer necessary.Comment #7
ahmad abbad commentedComment #13
rajab natshahComment #14
rajab natshahComment #15
rajab natshahComment #16
rajab natshahComment #17
rajab natshahComment #18
rajab natshah✅ Released varbase_components-2.0.10
Comment #19
rajab natshahComment #20
rajab natshah✅ Released varbase_components-3.0.0-alpha2
Comment #21
rajab natshah✅ Released varbase-10.0.5