Skip to content

Commit

Permalink
Changes to PJR to accomodate End User reports, new quote styling
Browse files Browse the repository at this point in the history 
Signed-off-by: James Hunt <[email protected]>
  • Loading branch information
@thetwopct
thetwopct committed Jun 16, 2024
1 parent ece6f96 commit 24bbe1d
Show file tree
Hide file tree
Showing 11 changed files with 449 additions and 31 deletions.
20 changes: 18 additions & 2 deletions web/wp-content/themes/cncf-twenty-two/acf-json/group_646840fbbe94f.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand All @@ -123,5 +139,5 @@
"active": true,
"description": "",
"show_in_rest": 0,
"modified": 1685625500
}
"modified": 1718551513
}
128 changes: 128 additions & 0 deletions web/wp-content/themes/cncf-twenty-two/acf-json/group_666f072665825.json
View file
Original file line number Diff line number Diff line change
@@ -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
}
45 changes: 45 additions & 0 deletions web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/block.json
View file
Original file line number Diff line number Diff line change
@@ -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": {}
}
1 change: 1 addition & 0 deletions web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

95 changes: 95 additions & 0 deletions web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<?php
/**
* Quote with Quote Mark Block
*
* This block was generated by create-acf-block-json.
*
* @package WordPress
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/

// Block Name (sluggified).
$block_name = 'quote-with-image';

$namespace = 'lf';

// Create full block name to use in classes.
$block_name = 'wp-block-' . $namespace . '-' . $block_name;

// setup various classes sent through from $block.
$background = ( empty( $block['backgroundColor'] ) ) ? '' : 'has-' . $block['backgroundColor'] . '-background-color';

$has_background = $background ? 'has-background' : '';

$font_size = ( empty( $block['fontSize'] ) ) ? '' : 'has-' . $block['fontSize'] . '-font-size';

$align = ( empty( $block['align'] ) ) ? '' : 'align' . $block['align'];

$align_text = ( empty( $block['align_text'] ) ) ? '' : 'has-text-align-' . $block['align_text'];

$additional_classes = $block['className'] ?? '';

$all_classes = array(
$block_name,
$background,
$has_background,
$font_size,
$align,
$align_text,
$additional_classes,
);

$classes = implode( ' ', $all_classes );

$quote_image_border_color = get_field( 'quote_image_border_color' ) ?? '#000000';
$quote_image_cite_line_1 = get_field( 'quote_image_cite_line_1' ) ?? null;
$quote_image_cite_line_2 = get_field( 'quote_image_cite_line_2' ) ?? null;
$quote_image_cite_line_3 = get_field( 'quote_image_cite_line_3' ) ?? null;
$quote_image_id = get_field( 'quote_image_id' ) ?? null;

$allowed_inner_blocks = array(
array(
'core/paragraph',
array(
'placeholder' => 'This is a quote',
'className' => 'wp-block-lf-quote-with-image__quote',
),
),
);
?>

<style>
html .wp-block-lf-quote-with-image:not(.block-editor-block-list__block) {
border-left: 5px solid <?php echo esc_html( $quote_image_border_color ); ?>;
}
</style>

<div class="<?php echo esc_attr( $classes ); ?>">
<?php
echo '<InnerBlocks template="' . esc_attr( wp_json_encode( $allowed_inner_blocks ) ) . '" templateLock=true />';
?>
<div class="wp-block-lf-quote-with-image__align">

<?php
if ( $quote_image_id ) :
LF_Utils::display_responsive_images( esc_html( $quote_image_id ), 'medium', '148px', 'wp-block-lf-quote-with-image__image', 'lazy', esc_attr( $quote_image_cite_line_1 ) );
endif;
?>

<div class="wp-block-lf-quote-with-image__cite">
<?php if ( $quote_image_cite_line_1 ) : ?>
<p class="wp-block-lf-quote-with-image__name"><?php echo esc_html( $quote_image_cite_line_1 ); ?></p>
<?php endif; ?>
<?php if ( $quote_image_cite_line_2 ) : ?>
<p class="wp-block-lf-quote-with-image__position"><?php echo wp_kses_post( $quote_image_cite_line_2 ); ?></p>
<?php endif; ?>
<?php if ( $quote_image_cite_line_3 ) : ?>
<p class="wp-block-lf-quote-with-image__additional"><?php echo wp_kses_post( $quote_image_cite_line_3 ); ?></p>
<?php endif; ?>
</div>
</div>
</div>
44 changes: 44 additions & 0 deletions web/wp-content/themes/cncf-twenty-two/blocks/quote-with-image/quote-with-image.scss
View file
Original file line number Diff line number Diff line change
@@ -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%;
}
}
Loading

0 comments on commit 24bbe1d

Please sign in to comment.