From 42695c424cd784163fec88021ae59320ce4d4c67 Mon Sep 17 00:00:00 2001 From: AaronHans Date: Fri, 11 Jun 2021 12:10:24 -0700 Subject: [PATCH 1/2] homepage design review fixes and moved card to dynamic block --- blocks/card/block.js | 40 ++++--------------------------- blocks/card/plugin.php | 13 ++++++++++ blocks/card/style.css | 12 ++++++---- blocks/hero/style.css | 8 +++---- ca-design-system-gutenberg-blocks | 1 + 5 files changed, 30 insertions(+), 44 deletions(-) create mode 120000 ca-design-system-gutenberg-blocks diff --git a/blocks/card/block.js b/blocks/card/block.js index 245c293..6918b89 100644 --- a/blocks/card/block.js +++ b/blocks/card/block.js @@ -17,9 +17,7 @@ category: 'ca-design-system', attributes: { title: { - type: 'array', - source: 'children', - selector: 'h3' + type: 'string' }, url: { type: 'string' @@ -28,7 +26,7 @@ example: { attributes: { title: __('Card title', 'ca-design-system'), - body: __('Card body', 'ca-design-system') + url: __('CardUrl', 'ca-design-system') } }, edit: function (props) { @@ -100,9 +98,10 @@ el('div', { className: 'cagov-card cagov-stack' }, el(RichText, { - tagName: 'h3', + tagName: 'span', inline: true, withoutInteractiveFormatting: true, + className: 'card-text', placeholder: __( 'Write card title…', 'ca-design-system' @@ -114,37 +113,6 @@ }) ) ]; - }, - save: function (props) { - const attributes = props.attributes; - return el('a', { - href: attributes.url, - className: 'no-deco cagov-card' - }, - el(RichText.Content, { - tagName: 'h3', - value: attributes.title - }), - el('svg', { - xmlns: 'http://www.w3.org/2000/svg', - 'enable-background': 'new 0 0 24 24', - height: '24px', - viewBox: '0 0 24 24', - width: '24px' - }, - el('g', {}, - el('path', { - d: 'M0,0h24v24H0V0z', - fill: 'none' - }) - ), - el('g', {}, - el('polygon', { - points: '6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12' - }) - ) - ) - ); } }); })( diff --git a/blocks/card/plugin.php b/blocks/card/plugin.php index 27c1568..d899311 100644 --- a/blocks/card/plugin.php +++ b/blocks/card/plugin.php @@ -26,6 +26,18 @@ function ca_design_system_gutenberg_block_card() { * * Passes translations to JavaScript. */ +function cagov_card_dynamic_render_callback( $block_attributes, $content ) { + // print_r($block_attributes); + $title = $block_attributes["title"]; + $url = $block_attributes["url"]; + return << + $title + + + EOT; +} + function ca_design_system_register_card() { if ( ! function_exists( 'register_block_type' ) ) { @@ -58,6 +70,7 @@ function ca_design_system_register_card() { 'style' => 'cagov-card', 'editor_style' => 'cagov-card-editor', 'editor_script' => 'california-design-system', + 'render_callback' => 'cagov_card_dynamic_render_callback' ) ); } diff --git a/blocks/card/style.css b/blocks/card/style.css index 63972ee..dd249df 100644 --- a/blocks/card/style.css +++ b/blocks/card/style.css @@ -7,7 +7,7 @@ } .cagov-card { - border: 1px solid; + border: 1px solid #ededef; padding: 1rem; border-bottom: 0.3rem solid #33705B; border-bottom: 0.3rem solid var(--primary-color, #33705B); @@ -19,18 +19,22 @@ justify-content: space-between; } -.cagov-card h3 { +.cagov-card .card-text { color: #33705B; /* defined here for when css vars are not supported */ color: var(--primary-color, #33705B) !important; /* variable used with fallback in case it is not defined */ /* color: #33705B !important; */ + font-size: 24px; + line-height: 40px; + padding: 0; + margin: 0; } .cagov-card svg { - min-width: 24px; fill: #33705B; fill: var(--primary-color, #33705B); - margin-top: 0.5em; + width: 1rem; + margin-top: .2rem; margin-left: 1rem; } diff --git a/blocks/hero/style.css b/blocks/hero/style.css index 228ddc1..ef813ba 100644 --- a/blocks/hero/style.css +++ b/blocks/hero/style.css @@ -1,4 +1,4 @@ -.stack * + * { +.cagov-stack * + * { margin-top: 1.5rem; } .cagov-p-2 { @@ -17,7 +17,7 @@ .cagov-featured-section .components-button.image-button { display: block; height: 100%; - margin: 0; + margin: 0 0 3rem 0; padding: 0; } .cagov-featured-image { @@ -38,7 +38,7 @@ background-color: var(--primary-color, #33705B); /* variable used with fallback in case it is not defined */ color: white; - padding: 1rem; + padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: bold; display: inline-block; @@ -93,6 +93,6 @@ } @media (min-width: 1200px) { .cagov-featured-sidebar { - max-width: 36%; + max-width: 34%; } } diff --git a/ca-design-system-gutenberg-blocks b/ca-design-system-gutenberg-blocks new file mode 120000 index 0000000..9a69e82 --- /dev/null +++ b/ca-design-system-gutenberg-blocks @@ -0,0 +1 @@ +ca-design-system-gutenberg-blocks \ No newline at end of file From 5b735bb30f598ea87268b32a7640005c2da39f85 Mon Sep 17 00:00:00 2001 From: AaronHans Date: Fri, 11 Jun 2021 12:47:07 -0700 Subject: [PATCH 2/2] fix hover styles --- blocks/card/style.css | 2 +- blocks/hero/style.css | 24 ++++++++++++++---------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/blocks/card/style.css b/blocks/card/style.css index dd249df..7c646a7 100644 --- a/blocks/card/style.css +++ b/blocks/card/style.css @@ -25,7 +25,7 @@ color: var(--primary-color, #33705B) !important; /* variable used with fallback in case it is not defined */ /* color: #33705B !important; */ - font-size: 24px; + font-size: 1.75rem; line-height: 40px; padding: 0; margin: 0; diff --git a/blocks/hero/style.css b/blocks/hero/style.css index ef813ba..ab4e471 100644 --- a/blocks/hero/style.css +++ b/blocks/hero/style.css @@ -1,6 +1,7 @@ .cagov-stack * + * { margin-top: 1.5rem; } +.cagov-stack h2 { padding-bottom: 0; } .cagov-p-2 { padding: 2rem; } @@ -45,20 +46,23 @@ border: none; text-decoration: none; } - -.cagov-hero-body-content .wp-block-button__link { - overflow-wrap: normal; - white-space: nowrap; -} - .cagov-hero-body-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { - background-color: #33705B !important; - color: #fff !important; - padding: 1rem; - border-radius: .5rem !important; + background-color: #33705B; + /* defined here for when css vars are not supported */ + background-color: var(--primary-color, #33705B); + /* variable used with fallback in case it is not defined */ + color: white; + padding: 0.5rem 1rem; + border-radius: 0.5rem; font-weight: bold; display: inline-block; border: none; + text-decoration: underline; +} + +.cagov-hero-body-content .wp-block-button__link { + overflow-wrap: normal; + white-space: nowrap; } /* sidebar layout */