Skip to content

Commit 26ccd06

Browse files
omiroshnichenkoomiroshnichenko
committed
Implement inline styles conversion
- add id to body - make generated styles selectors more specific with body id
1 parent 5235ed5 commit 26ccd06

File tree

9 files changed

+34
-7
lines changed

9 files changed

+34
-7
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/master-style.js

Lines changed: 5 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/style.js

Lines changed: 5 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/config.js

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/stage-builder.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/binding/master-style.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@
66
import ko from "knockout";
77
import utils from "mageUtils";
88
import _ from "underscore";
9+
import Config from "../config";
910
import {getStyleRegistry, pbStyleAttribute} from "../content-type/style-registry";
1011

12+
const bodyId: string = Config.getConfig("bodyId");
13+
1114
ko.bindingHandlers.style = {
1215
update: (element: HTMLElement, valueAccessor, allBindings, viewModel, bindingContext) => {
1316
const value = ko.utils.unwrapObservable(valueAccessor() || {});
@@ -27,7 +30,7 @@ ko.bindingHandlers.style = {
2730

2831
if (!_.isEmpty(styles)) {
2932
const id = utils.uniqueid();
30-
const selector = `[${pbStyleAttribute}="${id}"]`;
33+
const selector = `#${bodyId} [${pbStyleAttribute}="${id}"]`;
3134
const registry = getStyleRegistry(bindingContext.$root.id);
3235

3336
registry.setStyles(selector, styles);

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/binding/style.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
import ko from "knockout";
77
import utils from "mageUtils";
88
import _ from "underscore";
9+
import Config from "../config";
910
import {generateCssBlock, pbStyleAttribute, styleDataAttribute} from "../content-type/style-registry";
1011

1112
const originalStyle: KnockoutBindingHandler = ko.bindingHandlers.style;
13+
const bodyId: string = Config.getConfig("bodyId");
1214

1315
function isPageBuilderContext(context: {[key: string]: any}): boolean {
1416
return !!(context.stage && context.stage.pageBuilder);
@@ -45,7 +47,7 @@ ko.bindingHandlers.style = {
4547
const styleElement: HTMLStyleElement = document.createElement("style");
4648

4749
styleElement.setAttribute(styleDataAttribute, styleId);
48-
styleElement.innerHTML = generateCssBlock(`[${pbStyleAttribute}="${styleId}"]`, styles);
50+
styleElement.innerHTML = generateCssBlock(`#${bodyId} [${pbStyleAttribute}="${styleId}"]`, styles);
4951
element.parentElement.append(styleElement);
5052
}
5153
} else {

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export default class Config {
6666

6767
private static config: any = {
6868
dataContentTypeAttributeName: "data-content-type",
69+
bodyId: "html-body",
6970
};
7071
private static mode: Mode;
7172
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage-builder.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {set} from "./utils/object";
3131
function buildFromContent(stage: Stage, value: string) {
3232
const stageDocument = new DOMParser().parseFromString(value, "text/html");
3333
stageDocument.body.setAttribute(Config.getConfig("dataContentTypeAttributeName"), "stage");
34+
stageDocument.body.id = Config.getConfig("bodyId");
3435
convertToInlineStyles(stageDocument);
3536
return buildElementIntoStage(stageDocument.body, stage.rootContainer, stage);
3637
}

‎app/code/Magento/PageBuilder/view/base/layout/default.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
9+
<body>
10+
<attribute name="id" value="html-body"/>
11+
</body>
12+
</page>

0 commit comments

Comments
 (0)