Skip to content

Commit fa972e0

Browse files
dchukhinlucianoratamerokkellydesignstevejalim
authored
WT-334 - Build CMS Components For Advertising Pages - Part 2 (#16814)
* Stylelint * WIP: add new solutions page * Stylelint * Move base styles from the home-solutions to the advertising and main-dark-section css files * Add base advertising template for next pages * Remove unused code * Prevent specific issues with white lines below the sticky subnav * Add base why mozilla view and template * Update ads notification bar to make arrow clickable * Add why mozilla, contact, notification, and highlight text to the why mozilla page * Wrap why mozilla content on #mozads-main * Add sample gallery section * Redirect formats page to the WIP solutions page * solutions template fix * First step toward refactoring typography to align advertising, protocol, and m24 sizing. * finished refactoring font sizes * Move shared css from principles page to a generic two-column css file * Add new contact sales page * Change url for the contact page * Add link to the contact sales page * Wrap contact and principles pages with #mozads-main * Add required field indicators to the contact sales form fields * Add base static content to the ads solutions page * Add placeholder modal implementation to ads solutions page * Add accordion component using the details and summary html tags * add an AdvertisingIndexPage to the project, with template identical to mozorg/advertising/landing.html * make sure that AdvertisingIndexPage is included in db export script * turn advertising index page hero into a block * turn advertising section heading into a block * Migrate ads solutions to an es6 file * Add skeleton for carousels in modals on ads solutions page * turn advertising statistics sections into a block * turn advertising feature list section into a block * turn advertising contact banner into a snippet * turn advertising notification into a page field * add an AdvertisingPrinciplesPage to the project * make AdvertisingPrinciplesPage fields editable in Wagtail * make code DRYer by using include template in in feature_list_item_block.html * add AdvertisingPrinciplesPage to the pages which are editable in Wagtail * add AdvertisingPrinciplesPage to the pages in export db script * avoid confusion by making sure that AdvertisingPrinciplesPage can only be a child of AdvertisingIndexPage * be more specific about rendered image dimensions * be more specific about rendered image dimensions * add a unit test for the AdvertisingIndexPage * design revisions * modal FE finished * solutions PDF, contact link updated * minor FE edits to account for predictable CMS behavior * Revert "Merge branch 'wt-303-ads-solutions-page' into WT-334-cms-components-for-advertising-subpage" This reverts commit ed6183b, reversing changes made to 0759a63. * copy and design revisions * update for design revisions * design revisions * fixing linting * prettier JS updates * carousel caption JS updates * new Impact page design * add ability to add top divider to section heading block * allow image alt text to be set on page, but also have default if page has not alt text * typography revisions * use image description for alt-text simplify user editing experience by limiting the number of editable fields; since the images will likely be used only 1 time, the alt text can be defined at the image level * use wagtail-link-block to create consistent link choosing experience * test * make advertising subpage more generically-named * for clarity, rename list_items field to be second_column * make sure that template variables have a value when using include * do not require elements in two column subpage's second column to be a list * add rich text block to two column subpage's second column * add a unit test for TwoColumnSubpage * update test for AdvertisingIndexPage based on changes to fields * fix typo and add missing '}' * fix lint error * updated type scale * linting fixes * linting fixes * fix formatting error * make page more reusable by putting content into a two-column block in a streamfield * allow FigureWithStatisticBlock to have a link * fix reference to new_window property in link * update CSS classes used to match work in WT-303 * allow FigureWithStatisticBlock to have a link * update blocks and CSS classes to match work in WT-303 * new images, another round of design QA * advertising index page can have multiple links for a notification * new copy added * update tests based on recent changes to TwoColumnSubpage blocks * fix frontend build issues * MDN ads images added, captions revised * merge more changes from WT-303 * remove unused SCSS file * make more updates from WT-303 changes * Mozilla Ads and Web Docs find/replace * CSS prefix revision to remove "mozads" in favor of "mza" * replacing mozads with mza in template files * Solutions refactor in prep for CMS work * replace mozads with mza in template files * undo accidental changes to github actions code from merge revert commit * photo update * undo accidental changes from merge revert * undo more accidental changes from merge revert * make sure to refer to correct CTA attribute in template * add rel noopener attribute to links that open in a new tab * "nearly" removed. Apostrophes fixed. Principles added to nav. * precommit installed and run on all relevant files * Update bedrock/mozorg/blocks/advertising.py Co-authored-by: Steve Jalim <stevejalim@mozilla.com> * add migration for label text change * remove twitter as a social icon choice * reorder migrations after merge * for better usage clarity, rename TwoColumnSubpage to AdvertisingTwoColumnSubpage --------- Co-authored-by: Luciano Ratamero <luciano@ratamero.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Steve Jalim <stevejalim@mozilla.com>
1 parent acb8f16 commit fa972e0

18 files changed

Lines changed: 368 additions & 21 deletions

‎bedrock/mozorg/blocks/advertising.py‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,53 @@ class Meta:
116116
form_classname = "compact-form struct-block"
117117

118118

119+
class ListItemBlock(blocks.StructBlock):
120+
"""Feature list item block."""
121+
122+
heading_text = blocks.CharBlock(char_max_length=255)
123+
supporting_text = blocks.RichTextBlock(
124+
features=["bold", "italic", "link"],
125+
)
126+
127+
class Meta:
128+
label = "List Item"
129+
label_format = "{heading_text}"
130+
template = "mozorg/cms/advertising/blocks/list_item_block.html"
131+
form_classname = "compact-form struct-block"
132+
133+
134+
class ListBlock(blocks.StructBlock):
135+
"""A block containing a list of items."""
136+
137+
list_items = blocks.ListBlock(ListItemBlock())
138+
139+
class Meta:
140+
icon = "list-ul"
141+
label = "List"
142+
label_format = "List"
143+
template = "mozorg/cms/advertising/blocks/list_block.html"
144+
form_classname = "compact-form struct-block"
145+
146+
147+
class TwoColumnDetailBlock(blocks.StructBlock):
148+
"""Feature list item block."""
149+
150+
heading_text = blocks.CharBlock(char_max_length=255)
151+
subheading = blocks.TextBlock()
152+
second_column = blocks.StreamBlock(
153+
[
154+
("list", ListBlock()),
155+
],
156+
required=False,
157+
)
158+
159+
class Meta:
160+
label = "Two Column Detail"
161+
label_format = "{heading_text}"
162+
template = "mozorg/cms/advertising/blocks/two_column_detail_block.html"
163+
form_classname = "compact-form struct-block"
164+
165+
119166
class LinkWithIcon(blocks.StructBlock):
120167
"""Link with an icon."""
121168

@@ -133,7 +180,15 @@ class Meta:
133180
class NotificationBlock(blocks.StructBlock):
134181
notification_text = blocks.RichTextBlock(
135182
char_max_length=255,
136-
features=["bold", "italic", "superscript", "subscript", "strikethrough", "code", "link"],
183+
features=[
184+
"bold",
185+
"italic",
186+
"superscript",
187+
"subscript",
188+
"strikethrough",
189+
"code",
190+
"link",
191+
],
137192
)
138193
links = blocks.StreamBlock(
139194
[

‎bedrock/mozorg/migrations/0011_advertisingprinciplespage.py‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Generated by Django 5.2.7 on 2025-10-16 21:03
2+
3+
import django.db.models.deletion
4+
from django.db import migrations, models
5+
6+
import wagtail.fields
7+
8+
9+
class Migration(migrations.Migration):
10+
dependencies = [
11+
("mozorg", "0010_alter_advertisingindexpage_notifications"),
12+
("wagtailcore", "0094_alter_page_locale"),
13+
]
14+
15+
operations = [
16+
migrations.CreateModel(
17+
name="TwoColumnSubpage",
18+
fields=[
19+
(
20+
"page_ptr",
21+
models.OneToOneField(
22+
auto_created=True,
23+
on_delete=django.db.models.deletion.CASCADE,
24+
parent_link=True,
25+
primary_key=True,
26+
serialize=False,
27+
to="wagtailcore.page",
28+
),
29+
),
30+
(
31+
"content",
32+
wagtail.fields.StreamField(
33+
[("two_column_block", 7)],
34+
blank=True,
35+
block_lookup={
36+
0: ("wagtail.blocks.CharBlock", (), {"char_max_length": 255}),
37+
1: ("wagtail.blocks.TextBlock", (), {}),
38+
2: ("wagtail.blocks.RichTextBlock", (), {"features": ["bold", "italic", "link"]}),
39+
3: ("wagtail.blocks.StructBlock", [[("heading_text", 0), ("supporting_text", 2)]], {}),
40+
4: ("wagtail.blocks.ListBlock", (3,), {}),
41+
5: ("wagtail.blocks.StructBlock", [[("list_items", 4)]], {}),
42+
6: ("wagtail.blocks.StreamBlock", [[("list", 5)]], {"required": False}),
43+
7: ("wagtail.blocks.StructBlock", [[("heading_text", 0), ("subheading", 1), ("second_column", 6)]], {}),
44+
},
45+
null=True,
46+
),
47+
),
48+
],
49+
options={
50+
"abstract": False,
51+
},
52+
bases=("wagtailcore.page",),
53+
),
54+
]

‎bedrock/mozorg/migrations/0012_rename_twocolumnsubpage_advertisingtwocolumnsubpage.py‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Generated by Django 5.2.8 on 2025-11-24 17:40
2+
3+
from django.db import migrations
4+
5+
6+
class Migration(migrations.Migration):
7+
dependencies = [
8+
("mozorg", "0011_advertisingprinciplespage"),
9+
("wagtailcore", "0095_groupsitepermission"),
10+
]
11+
12+
operations = [
13+
migrations.RenameModel(
14+
old_name="TwoColumnSubpage",
15+
new_name="AdvertisingTwoColumnSubpage",
16+
),
17+
]

‎bedrock/mozorg/models.py‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,14 @@
1313
from wagtail.snippets.models import register_snippet
1414

1515
from bedrock.cms.models.base import AbstractBedrockCMSPage
16-
from bedrock.mozorg.blocks.advertising import AdvertisingHeroBlock, FeatureListBlock, FigureWithStatisticBlock, NotificationBlock, SectionHeaderBlock
16+
from bedrock.mozorg.blocks.advertising import (
17+
AdvertisingHeroBlock,
18+
FeatureListBlock,
19+
FigureWithStatisticBlock,
20+
NotificationBlock,
21+
SectionHeaderBlock,
22+
TwoColumnDetailBlock,
23+
)
1724
from bedrock.mozorg.blocks.leadership import LeadershipSectionBlock
1825

1926

@@ -24,7 +31,10 @@ def process_md_file(file_path):
2431
input = f.read()
2532

2633
md = markdown.Markdown(
27-
extensions=["markdown.extensions.attr_list", TocExtension(permalink=True, baselevel=2, toc_depth="2-3", separator="")],
34+
extensions=[
35+
"markdown.extensions.attr_list",
36+
TocExtension(permalink=True, baselevel=2, toc_depth="2-3", separator=""),
37+
],
2838
output_format="html5",
2939
)
3040
content = md.convert(input)
@@ -134,7 +144,7 @@ class LeadershipPage(AbstractBedrockCMSPage):
134144

135145

136146
class AdvertisingIndexPage(AbstractBedrockCMSPage):
137-
subpage_types = [] # This page type cannot have any children
147+
subpage_types = ["AdvertisingTwoColumnSubpage"]
138148

139149
content = StreamField(
140150
[
@@ -169,3 +179,23 @@ class AdvertisingIndexPage(AbstractBedrockCMSPage):
169179
]
170180

171181
template = "mozorg/cms/advertising/advertising_index_page.html"
182+
183+
184+
class AdvertisingTwoColumnSubpage(AbstractBedrockCMSPage):
185+
parent_page_types = ["AdvertisingIndexPage"]
186+
subpage_types = [] # This page type cannot have any children
187+
188+
content = StreamField(
189+
[
190+
("two_column_block", TwoColumnDetailBlock()),
191+
],
192+
blank=True,
193+
null=True,
194+
collapsed=True,
195+
)
196+
197+
content_panels = AbstractBedrockCMSPage.content_panels + [
198+
FieldPanel("content"),
199+
]
200+
201+
template = "mozorg/cms/advertising/two_column_subpage.html"

‎bedrock/mozorg/templates/mozorg/advertising/includes/home-ads-notification.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,5 @@
1515
<li><a class="youtube" href="https://www.youtube.com/@mozilla_ads" data-link-position="ads-section-banner" data-link-text="Youtube (@mozilla_ads)">TikTok<span> (@mozilla_ads)</span></a></li>
1616

1717
</ul>
18-
19-
20-
21-
2218
</div>
2319
</div>

‎bedrock/mozorg/templates/mozorg/advertising/principles.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1>Principles</h1>
2222
<section class="m24-c-content">
2323
<div class="mza-half-grid">
2424
<div class="two-column-intro">
25-
<h2 class="mza-section-heading">Ads that work for you </h2>
25+
<h2 class="mza-section-heading">Ads that work for you </h2>
2626
<p class="mza-section-text-lg">The internet relies on advertising to fund the sites and apps people care about, but today’s system favors big tech—often at the expense of your privacy. We’re building a new approach to advertising that is a fair deal for everyone.</p>
2727

2828
</div>

‎bedrock/mozorg/templates/mozorg/cms/advertising/blocks/feature_list_item_block.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
file, You can obtain one at https://mozilla.org/MPL/2.0/.
55
#}
66

7-
<li class="mza-half-grid is-list-item">
8-
<h3 class="mza-home-why-moz-list-heading">{{ value.heading_text }}</h3>
9-
<p class="mza-home-why-moz-list-text">{{ value.supporting_text }}</p>
10-
</li>
7+
{% with li_class='mza-half-grid is-list-item', h3_class='mza-home-big-list-heading', p_class='mza-home-big-list-text' %}
8+
{% include 'mozorg/cms/advertising/includes/list_item.html' %}
9+
{% endwith %}

‎bedrock/mozorg/templates/mozorg/cms/advertising/blocks/figure_with_statistic_block.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</span>
1414
</div>
1515
<figure class="mza-figure">
16-
{{ srcset_image(value.image, "width-{800,1000,1200,1400}", class="", loading="lazy", alt=value.image.description) }}
16+
{{ srcset_image(value.image, "width-{1000,1200,1400}", class="", loading="lazy", alt=value.image.description) }}
1717
<figcaption class="mza-figcaption">
1818
{{ value.image_caption }}
1919
</figcaption>
@@ -26,4 +26,4 @@
2626
</div>
2727
{% endif %}
2828

29-
</section>
29+
</section>

‎bedrock/mozorg/templates/mozorg/cms/advertising/blocks/list_block.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{#
2+
This Source Code Form is subject to the terms of the Mozilla Public
3+
License, v. 2.0. If a copy of the MPL was not distributed with this
4+
file, You can obtain one at https://mozilla.org/MPL/2.0/.
5+
#}
6+
7+
<ul class="two-column-detail-list">
8+
{% for item in value.list_items %}
9+
{% include_block item %}
10+
{% endfor %}
11+
</ul>

‎bedrock/mozorg/templates/mozorg/cms/advertising/blocks/list_item_block.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{#
2+
This Source Code Form is subject to the terms of the Mozilla Public
3+
License, v. 2.0. If a copy of the MPL was not distributed with this
4+
file, You can obtain one at https://mozilla.org/MPL/2.0/.
5+
#}
6+
7+
{% with li_class='', h3_class='mza-section-subheading', p_class='' %}
8+
{% include 'mozorg/cms/advertising/includes/list_item.html' %}
9+
{% endwith %}

0 commit comments

Comments
 (0)