Skip to content

Commit 0b7772d

Browse files
irenelagnoirenelagno
committed
MC-1408: PageBuilder HTML Content Block Renaming and Preview
1 parent ba3a657 commit 0b7772d

File tree

8 files changed

+75
-8
lines changed

8 files changed

+75
-8
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ActionGroup.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<click selector="{{PageBuilderActionsSection.otherGroup}}" stepKey="clickOtherGroup"/>
3636
<see userInput="Anchor" selector="{{PageBuilderActionsSection.otherGroupContentType}}" stepKey="seeOtherGroupAnchor"/>
3737
<dontSee userInput="Code" selector="{{PageBuilderActionsSection.otherGroupContentType}}" stepKey="dontSeeOtherGroupCode"/>
38-
<see userInput="Html" selector="{{PageBuilderActionsSection.otherGroupContentType}}" stepKey="seeOtherGroupHtml"/>
38+
<see userInput="HTML Code" selector="{{PageBuilderActionsSection.otherGroupContentType}}" stepKey="seeOtherGroupHtml"/>
3939
<dontSee userInput="Search" selector="{{PageBuilderActionsSection.otherGroupContentType}}" stepKey="dontSeeOtherGroupSearch"/>
4040
</actionGroup>
4141
<actionGroup name="closePageBuilderPanelGroups">

‎app/code/Magento/PageBuilder/i18n/en_US.csv

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ Heading,Heading
145145
"Heading Type","Heading Type"
146146
"Heading Text","Heading Text"
147147
Code,Code
148-
"Type your HTML here...","Type your HTML here..."
149-
HTML,HTML
148+
"Enter HTML, CSS or JavaScript code here","Enter HTML, CSS or JavaScript code here"
149+
"HTML Code","HTML Code"
150150
Image,Image
151151
"Mobile Image","Mobile Image"
152152
"Image Caption","Image Caption"

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_html_form.xml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,16 @@
7878
<argument name="data" xsi:type="array">
7979
<item name="config" xsi:type="array">
8080
<item name="source" xsi:type="string">page</item>
81-
<item name="default" xsi:type="string" translate="true">Type your HTML here...</item>
8281
</item>
8382
</argument>
8483
<settings>
84+
<additionalClasses>
85+
<class name="admin__field-wide">true</class>
86+
<class name="admin__font-console">true</class>
87+
</additionalClasses>
8588
<dataScope>html</dataScope>
8689
<dataType>text</dataType>
87-
<label translate="true">HTML</label>
90+
<placeholder translate="true">Enter HTML, CSS or JavaScript code</placeholder>
8891
<validation>
8992
<rule name="required-entry" xsi:type="boolean">true</rule>
9093
</validation>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_import.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@import 'column-group/_import.less';
1818
@import 'divider/_import.less';
1919
@import 'heading/_import.less';
20+
@import 'html/_import.less';
2021
@import 'image/_import.less';
2122
@import 'map/_import.less';
2223
@import 'newsletter/_import.less';

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/html/_default.less

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// /**
2+
// * Copyright © Magento, Inc. All rights reserved.
3+
// * See COPYING.txt for license details.
4+
// */
5+
6+
//
7+
// Default appearance styles
8+
// _____________________________________________
9+
10+
.pagebuilder-content-type {
11+
12+
.pagebuilder-html {
13+
.placeholder-html-empty {
14+
align-items: center;
15+
background-color: @color-gray98;
16+
color: @color-gray65-lighten;
17+
display: flex;
18+
justify-content: center;
19+
height: 60px;
20+
position: relative;
21+
}
22+
.placeholder-html-code {
23+
font-family: @font-family__console;
24+
font-weight: @font-weight__light;
25+
position: relative;
26+
height: 60px;
27+
overflow: hidden;
28+
background-color: @color-gray98;
29+
white-space: pre;
30+
&:before {
31+
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, @color-gray98 100%);
32+
bottom: 0;
33+
content: '';
34+
font-size: 12px;
35+
height: 60px;
36+
left: 0;
37+
position: absolute;
38+
width: 100%;
39+
}
40+
}
41+
}
42+
}
43+
44+
.admin__font-console {
45+
font-family: @font-family__console;
46+
font-size: 14px;
47+
line-height: 22px;
48+
textarea {
49+
height: 500px
50+
}
51+
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/html/_import.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// /**
2+
// * Copyright © Magento, Inc. All rights reserved.
3+
// * See COPYING.txt for license details.
4+
// */
5+
6+
//
7+
// _import imports all appearance less files
8+
// _____________________________________________
9+
10+
@import './_default.less';

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/html/default/preview.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
-->
77

88
<div class="pagebuilder-content-type pagebuilder-html" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
9-
<div attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" html="data.main.html"></div>
9+
<div class="placeholder-html-code" if="data.main.html" attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" text="data.main.html"></div>
10+
<div class="placeholder-html-empty" ifnot="data.main.html" attr="data.main.attributes" ko-style="data.main.style" translate="'Enter HTML, CSS or JavaScript code here'" css="data.main.css" >
11+
</div>
1012
<render args="getOptions().template" />
1113
</div>

‎app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/html.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
99
<content_types>
1010
<type name="html" sortOrder="20" translate="label">
11-
<label>HTML</label>
11+
<label>HTML Code</label>
1212
<icon>icon-pagebuilder-code</icon>
1313
<component>Magento_PageBuilder/js/content-type</component>
1414
<form>pagebuilder_html_form</form>
@@ -35,7 +35,7 @@
3535
<attribute name="name" source="data-role"/>
3636
<attribute name="appearance" source="data-appearance"/>
3737
</attributes>
38-
<html name="html" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
38+
<html name="html"/>
3939
<css name="css_classes"/>
4040
</element>
4141
</elements>

0 commit comments

Comments
 (0)