From 24bbe1d6c9b9382ff739630cb72815ea2542005c Mon Sep 17 00:00:00 2001 From: James Hunt <10615884+thetwopct@users.noreply.github.com> Date: Sun, 16 Jun 2024 23:38:57 +0700 Subject: [PATCH] Changes to PJR to accomodate End User reports, new quote styling Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com> --- .../acf-json/group_646840fbbe94f.json | 20 ++- .../acf-json/group_666f072665825.json | 128 ++++++++++++++++++ .../blocks/quote-with-image/block.json | 45 ++++++ .../blocks/quote-with-image/editor.css | 1 + .../blocks/quote-with-image/editor.scss | 21 +++ .../quote-with-image/quote-with-image.css | 1 + .../quote-with-image/quote-with-image.php | 95 +++++++++++++ .../quote-with-image/quote-with-image.scss | 44 ++++++ .../cncf-twenty-two/components/pjr-page.php | 87 ++++++++---- .../themes/cncf-twenty-two/includes/acf.php | 1 + .../source/scss/detached/pjr-template.scss | 37 ++++- 11 files changed, 449 insertions(+), 31 deletions(-) create mode 100644 web/wp-content/themes/cncf-twenty-two/acf-json/group_666f072665825.json create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/block.json create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.css create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.scss create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.css create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.php create mode 100644 web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.scss diff --git a/web/wp-content/themes/cncf-twenty-two/acf-json/group_646840fbbe94f.json b/web/wp-content/themes/cncf-twenty-two/acf-json/group_646840fbbe94f.json index b1653a3ab..5a61fa0f9 100644 --- a/web/wp-content/themes/cncf-twenty-two/acf-json/group_646840fbbe94f.json +++ b/web/wp-content/themes/cncf-twenty-two/acf-json/group_646840fbbe94f.json @@ -103,6 +103,22 @@ "ui_on_text": "", "ui_off_text": "", "ui": 1 + }, + { + "key": "field_666f029568573", + "label": "Download Link", + "name": "pjr_download_link", + "aria-label": "", + "type": "link", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "return_format": "url" } ], "location": [ @@ -123,5 +139,5 @@ "active": true, "description": "", "show_in_rest": 0, - "modified": 1685625500 -} \ No newline at end of file + "modified": 1718551513 +} diff --git a/web/wp-content/themes/cncf-twenty-two/acf-json/group_666f072665825.json b/web/wp-content/themes/cncf-twenty-two/acf-json/group_666f072665825.json new file mode 100644 index 000000000..101e0f3e3 --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/acf-json/group_666f072665825.json @@ -0,0 +1,128 @@ +{ + "key": "group_666f072665825", + "title": "Block - Quote with Image", + "fields": [ + { + "key": "field_666f07266800e", + "label": "Border Color", + "name": "quote_image_border_color", + "aria-label": "", + "type": "color_picker", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "#ef7b4d", + "enable_opacity": 0, + "return_format": "string" + }, + { + "key": "field_666f0726683bc", + "label": "Cite Line 1", + "name": "quote_image_cite_line_1", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_666f0726687b2", + "label": "Cite Line 2", + "name": "quote_image_cite_line_2", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_666f0758e51f4", + "label": "Cite Line 3", + "name": "quote_image_cite_line_3", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_666f0763e51f5", + "label": "Quote Image", + "name": "quote_image_id", + "aria-label": "", + "type": "image", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "return_format": "id", + "library": "all", + "min_width": "", + "min_height": "", + "min_size": "", + "max_width": "", + "max_height": "", + "max_size": "", + "mime_types": "", + "preview_size": "medium" + } + ], + "location": [ + [ + { + "param": "block", + "operator": "==", + "value": "lf\/quote-with-image" + } + ] + ], + "menu_order": 0, + "position": "side", + "style": "default", + "label_placement": "top", + "instruction_placement": "label", + "hide_on_screen": "", + "active": true, + "description": "", + "show_in_rest": 0, + "modified": 1718553279 +} diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/block.json b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/block.json new file mode 100644 index 000000000..048e27751 --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/block.json @@ -0,0 +1,45 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "lf/quote-with-image", + "title": "Quote with Image", + "description": "A quote with two lined citation alongside an image", + "style": "file:./quote-with-image.css", + "editorStyle": "file:./editor.css", + "editorScript": [], + "category": "lf", + "icon": "format-quote", + "keywords": [ + "testimonial", + "comment" + ], + "acf": { + "mode": "preview", + "renderTemplate": "quote-with-image.php", + "postTypes": [ "lf_report" ] + }, + "supports": { + "mode": false, + "align": false, + "alignWide": false, + "alignContent": false, + "alignText": false, + "anchor": false, + "color": { + "background": false, + "gradients": false, + "link": false, + "text": true + }, + "spacing": { + "margin": false, + "padding": false + }, + "typography": { + "fontSize": false, + "lineHeight": false + }, + "fullHeight": false + }, + "example": {} +} \ No newline at end of file diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.css b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.css new file mode 100644 index 000000000..6eb0bbf53 --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.css @@ -0,0 +1 @@ +.wp-block.wp-block-lf-quote-with-image{border:1px solid #757ba2;padding-left:0}.wp-block.wp-block-lf-quote-with-image:before{color:#757ba2;content:"Quote with Image";font-size:10px;font-style:normal;left:1px;line-height:1;position:absolute;top:0}#editor .wp-block .wp-block-lf-quote-with-image__cite p{-webkit-margin-before:0;-webkit-margin-after:0;line-height:inherit;margin-block-end:0;margin-block-start:0} \ No newline at end of file diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.scss b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.scss new file mode 100644 index 000000000..f32650966 --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.scss @@ -0,0 +1,21 @@ +.wp-block.wp-block-lf-quote-with-image { + border: 1px solid #757ba2; + padding-left: 0; + + &:before { + content: 'Quote with Image'; + color: #757ba2; + position: absolute; + left: 1px; + top: 0; + line-height: 1; + font-size: 10px; + font-style: normal; + } +} + +#editor .wp-block .wp-block-lf-quote-with-image__cite p { + line-height: inherit; + margin-block-start: 0; + margin-block-end: 0; +} diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.css b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.css new file mode 100644 index 000000000..2d4fab181 --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.css @@ -0,0 +1 @@ +.wp-block-lf-quote-with-image{font-style:italic;padding-left:40px}@media(min-width:700px){.wp-block-lf-quote-with-image{max-width:643px}}.wp-block-lf-quote-with-image__quote{font-size:20px;line-height:160%;margin-bottom:32px}.wp-block-lf-quote-with-image__align{align-items:center;display:flex;gap:32px}.wp-block-lf-quote-with-image__image{border-radius:50%;height:74px;width:74px}.wp-block-lf-quote-with-image__cite{font-family:"Source Serif Pro",Apple Garamond,Baskerville,Times New Roman,"Droid Serif",Times,serif}.wp-block-lf-quote-with-image__name{font-size:18px;font-weight:700;line-height:130%;margin:0}@media(min-width:1000px){.wp-block-lf-quote-with-image__name{font-size:20px}}.wp-block-lf-quote-with-image__additional,.wp-block-lf-quote-with-image__position{font-size:16px;line-height:160%;margin:0;margin-top:2px!important} \ No newline at end of file diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.php b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.php new file mode 100644 index 000000000..5838483a3 --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.php @@ -0,0 +1,95 @@ + 'This is a quote', + 'className' => 'wp-block-lf-quote-with-image__quote', + ), + ), +); +?> + + + +
+ '; + ?> +
+ + + +
+ +

+ + +

+ + +

+ +
+
+
diff --git a/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.scss b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.scss new file mode 100644 index 000000000..d1a34bef4 --- /dev/null +++ b/web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.scss @@ -0,0 +1,44 @@ +$font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Roman', 'Droid Serif', 'Times', + 'Source Serif Pro', serif; + +.wp-block-lf-quote-with-image { + font-style: italic; + padding-left: 40px; + @media (min-width: 700px) { + max-width: 643px; + } + &__quote { + margin-bottom: 32px; + font-size: 20px; + line-height: 160%; + } + &__align { + display: flex; + align-items: center; + gap: 32px; + } + &__image { + border-radius: 50%; + width: 74px; + height: 74px; + } + &__cite { + font-family: $font-serif; + } + &__name { + font-weight: 700; + line-height: 130%; + margin: 0; + font-size: 18px; + @media (min-width: 1000px) { + font-size: 20px; + } + } + &__position, + &__additional { + font-size: 16px; + margin: 0; + margin-top: 2px !important; // Needed to override p+p + line-height: 160%; + } +} diff --git a/web/wp-content/themes/cncf-twenty-two/components/pjr-page.php b/web/wp-content/themes/cncf-twenty-two/components/pjr-page.php index b2a67db17..701f78a51 100644 --- a/web/wp-content/themes/cncf-twenty-two/components/pjr-page.php +++ b/web/wp-content/themes/cncf-twenty-two/components/pjr-page.php @@ -14,6 +14,7 @@ $project_url = get_field( 'pjr_project_url' ); $report_title = get_field( 'pjr_report_title' ); $show_social_share = get_field( 'pjr_show_social_share' ) ?? false; +$download_link = get_field( 'pjr_download_link' ) ?? false; wp_enqueue_style( 'pjr', get_template_directory_uri() . '/build/pjr-template.min.css', array(), filemtime( get_template_directory() . '/build/pjr-template.min.css' ), 'all' ); @@ -46,25 +47,26 @@ if ( $report_title ) { ?>
-

+

+

- -
+ if ( $show_social_share ) { + ?> +
+
- +
-
-
- - - Published: +
+
+ +
Download PDF +
+ +
+ + + + + Published: +
- - - + + + + + +
- -
+ - + diff --git a/web/wp-content/themes/cncf-twenty-two/includes/acf.php b/web/wp-content/themes/cncf-twenty-two/includes/acf.php index f317dbdca..f3e50a573 100644 --- a/web/wp-content/themes/cncf-twenty-two/includes/acf.php +++ b/web/wp-content/themes/cncf-twenty-two/includes/acf.php @@ -26,6 +26,7 @@ function lf_register_all_our_blocks() { register_block_type( $block_directory . '/phippy-family/block.json' ); register_block_type( $block_directory . '/phippy-group/block.json' ); register_block_type( $block_directory . '/post-breadcrumb/block.json' ); + register_block_type( $block_directory . '/quote-with-image/block.json' ); register_block_type( $block_directory . '/quote-with-quote-mark/block.json' ); } add_action( 'init', 'lf_register_all_our_blocks' ); diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/detached/pjr-template.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/detached/pjr-template.scss index 77d85b40b..9d9f18551 100644 --- a/web/wp-content/themes/cncf-twenty-two/source/scss/detached/pjr-template.scss +++ b/web/wp-content/themes/cncf-twenty-two/source/scss/detached/pjr-template.scss @@ -2,8 +2,19 @@ @import 'report_fonts'; .pjr { - font-family: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto, - Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: + 'Clarity City', + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Helvetica, + Arial, + sans-serif, + Roboto, + Ubuntu, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol'; color: #000000; line-height: 180%; @@ -29,6 +40,9 @@ display: flex; flex-direction: column; align-items: flex-start; + @media (min-width: 1000px) { + margin-bottom: 15px; + } &__title { margin-bottom: 15px; color: #747474; @@ -66,6 +80,9 @@ } &__grid { + @media (min-width: 1000px) { + align-items: flex-end; + } &-col1 { grid-column: span 12; @media (min-width: 600px) { @@ -85,6 +102,22 @@ } } } + &__meta.hero__grid { + align-items: center; + } + &__meta-align { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + @media (min-width: 1000px) { + gap: 50px; + flex-direction: row; + } + @media (min-width: 1200px) { + gap: 80px; + } + } .published, .project-website { font-weight: 700;