-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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.
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
Rich text updates #1625
Rich text updates #1625
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,19 +20,27 @@ | |
|
||
<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 }}</h2> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll need to update the Either of the following works but I'll need to confirm if its the solution we want to go with for rich text headings: <h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | replace: '<p>', '<span>' | replace: '</p>', '</span>' }}</h2> Or <h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading | replace: 'p>', 'span>' }}</h2> Confirmed with: https://validator.w3.org/nu/#textarea |
||
{%- when 'caption' -%} | ||
<p class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}" {{ block.shopify_attributes }}>{{ block.settings.caption }}</p> | ||
{%- when 'text' -%} | ||
<div class="rich-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div> | ||
{%- 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> | ||
{%- endif -%} | ||
Comment on lines
+34
to
+40
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The Additionally, I added a |
||
{%- endcase -%} | ||
{%- endfor -%} | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
@@ -43,6 +51,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", | ||
|
@@ -106,12 +154,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" | ||
}, | ||
{ | ||
|
@@ -129,17 +176,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", | ||
"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", | ||
|
@@ -152,7 +250,6 @@ | |
{ | ||
"type": "button", | ||
"name": "t:sections.rich-text.blocks.button.name", | ||
"limit": 1, | ||
"settings": [ | ||
{ | ||
"type": "text", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -53,7 +53,7 @@ | |
"heading": { | ||
"type": "heading", | ||
"settings": { | ||
"heading": "Talk about your brand", | ||
"heading": "<p>Talk about your brand</p>", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Related: https://github.com/Shopify/dawn/pull/1625/files#r852183418
11:12:21 ERROR » update templates/index.json:
Setting 'heading' is invalid. All top level nodes must be '<p>' tags Code editor |
||
"heading_size": "h1" | ||
} | ||
}, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Although this isn't required (
text-align: left;
) being the default value, it might be used for other elements and for instances where we'd need to override an existingtext-align
value.