Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rich text improvements #1635

Merged
merged 10 commits into from
May 6, 2022
Merged

Rich text improvements #1635

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
46d2d75
Rich text improvements
Apr 22, 2022
f5c0080
Add help text for desktop content position
Apr 26, 2022
9199a72
Remove extra caption block class
Apr 27, 2022
310a708
Update 15 translation files
translation-platform[bot] Apr 27, 2022
ba3f37b
Update 2 translation files
translation-platform[bot] Apr 28, 2022
49985b8
Change to inline button blocks
Apr 28, 2022
a8f0861
Update 3 translation files
translation-platform[bot] Apr 29, 2022
6ed7dd9
Update block limits and strings
Apr 29, 2022
da9c9df
Clean up CSS and add unique classes for buttons
Apr 29, 2022
95a4f28
CSS updates for multiple buttons
May 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,16 @@ h5,
word-break: break-word;
}

.hxl {
font-size: calc(var(--font-heading-scale) * 5rem);
}

@media only screen and (min-width: 750px) {
.hxl {
font-size: calc(var(--font-heading-scale) * 6.2rem);
}
}

.h0 {
font-size: calc(var(--font-heading-scale) * 4rem);
}
Expand Down Expand Up @@ -553,6 +563,10 @@ table:not([class]) th {
}
}

.left {
text-align: left;
}

.center {
text-align: center;
}
Expand Down
43 changes: 20 additions & 23 deletions assets/section-rich-text.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,33 @@
.rich-text {
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 1;
}

.rich-text.rich-text--full-width {
max-width: initial;
width: 100%;
}

.rich-text__blocks {
margin: auto;
/* 2.5rem margin on left & right */
.rich-text__wrapper {
display: flex;
justify-content: center;
width: calc(100% - 5rem / var(--font-body-scale));
}

.rich-text__blocks * {
overflow-wrap: break-word;
}

.rich-text--full-width .rich-text__blocks {
/* 4rem (1.5rem + 2.5rem) margin on left & right */
.rich-text:not(.rich-text--full-width) .rich-text__wrapper {
margin: auto;
width: calc(100% - 8rem / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to your PR but because I noticed it here, I'll leave it as a reminder for us to review this later and create an issue for this.

The setting is called Desktop content position and applies to "tablet and above" (> 750px). It looks we're consistently doing that in many other sections like Image with Text, Image Banner and others. Sounds like this is the intended behaviour.

But I just noticed that on the Product page, the Desktop layout applies to > 750px and the Desktop media size applies to > 990px. It uses the same automatically optimized for mobile description that is mentioned in the setting you just added, so I'm wondering if there are more occurrences of this inconsistency across the theme.

image

.rich-text__blocks {
max-width: 50rem;
.rich-text__wrapper {
width: 100%;
}

.rich-text--full-width .rich-text__blocks {
/* 7.5rem (5rem + 2.5rem) margin on left & right */
width: calc(100% - 15rem);
.rich-text__wrapper--left {
justify-content: flex-start;
}

.rich-text__wrapper--right {
justify-content: flex-end;
}

.rich-text__blocks {
max-width: 50rem;
}
}

Expand All @@ -42,7 +37,9 @@
}
}

/* Blocks */
.rich-text__blocks * {
overflow-wrap: break-word;
}

.rich-text__blocks > * {
margin-top: 0;
Expand Down
58 changes: 57 additions & 1 deletion locales/en.default.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,9 @@
},
"options__3": {
"label": "Large"
},
"options__4": {
"label": "Extra large"
}
}
},
Expand Down Expand Up @@ -2203,6 +2206,30 @@
"rich-text": {
"name": "Rich text",
"settings": {
"desktop_content_position": {
"options__1": {
"label": "Left"
},
"options__2": {
"label": "Center"
},
"options__3": {
"label": "Right"
},
andrewetchen marked this conversation as resolved.
Show resolved Hide resolved
"label": "Desktop content position"
},
"content_alignment": {
"options__1": {
"label": "Left"
},
"options__2": {
"label": "Center"
},
"options__3": {
"label": "Right"
},
"label": "Content alignment"
},
"full_width": {
"label": "Make section full width"
}
Expand All @@ -2216,6 +2243,35 @@
}
}
},
"caption": {
"name": "Caption",
"settings": {
"text": {
"label": "Text"
},
"text_style": {
"label": "Text style",
"options__1": {
"label": "Subtitle"
},
"options__2": {
"label": "Uppercase"
}
},
"caption_size": {
"label": "Text size",
"options__1": {
"label": "Small"
},
"options__2": {
"label": "Medium"
},
"options__3": {
"label": "Large"
}
}
}
},
"text": {
"name": "Text",
"settings": {
Expand Down Expand Up @@ -2650,4 +2706,4 @@
}
}
}
}
}
139 changes: 121 additions & 18 deletions sections/rich-text.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,33 @@

<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
<div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
<div class="rich-text__blocks">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="{{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
{%- when 'text' -%}
<div class="rich-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
{%- when 'button' -%}
<a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
{{ block.settings.button_label | escape }}
</a>
{%- endcase -%}
{%- endfor -%}
<div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
<div class="rich-text__blocks {{ section.settings.content_alignment }}">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
{{ block.settings.heading | replace: 'p>', 'span>' }}
LucasLacerdaUX marked this conversation as resolved.
Show resolved Hide resolved
</h2>
{%- when 'caption' -%}
andrewetchen marked this conversation as resolved.
Show resolved Hide resolved
<p class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
andrewetchen marked this conversation as resolved.
Show resolved Hide resolved
{{ block.settings.caption | escape }}
</p>
{%- when 'text' -%}
<div class="rich-text__text rte" {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
andrewetchen marked this conversation as resolved.
Show resolved Hide resolved
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
<div class="rich-text__button">
<a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
{{ block.settings.button_label | escape }}
</a>
</div>
andrewetchen marked this conversation as resolved.
Show resolved Hide resolved
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
Expand All @@ -43,6 +57,46 @@
"tag": "section",
"class": "section",
"settings": [
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.label"
},
{
"type": "select",
"id": "content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.content_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
Expand Down Expand Up @@ -106,12 +160,11 @@
{
"type": "heading",
"name": "t:sections.rich-text.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"type": "richtext",
"id": "heading",
"default": "Talk about your brand",
"default": "<p>Talk about your brand</p>",
"label": "t:sections.rich-text.blocks.heading.settings.heading.label"
},
{
Expand All @@ -129,17 +182,68 @@
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.rich-text.blocks.caption.name",
"settings": [
{
"type": "text",
LucasLacerdaUX marked this conversation as resolved.
Show resolved Hide resolved
"id": "caption",
"default": "Add a tagline",
"label": "t:sections.rich-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.rich-text.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "richtext",
Expand All @@ -152,7 +256,6 @@
{
"type": "button",
"name": "t:sections.rich-text.blocks.button.name",
"limit": 1,
"settings": [
{
"type": "text",
Expand Down
2 changes: 1 addition & 1 deletion templates/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"heading": {
"type": "heading",
"settings": {
"heading": "Talk about your brand",
"heading": "<p>Talk about your brand</p>",
"heading_size": "h1"
}
},
Expand Down