From f2d352baba0615d2327a921467521bde316efcb0 Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Tue, 29 Jan 2019 18:04:26 +0000 Subject: [PATCH 1/7] additional header options. need to add styles for header bleeding into nav. --- block-languages/benenson-blocks.pot | 36 +++++---- header.php | 45 +++++++---- includes/blocks/header/render.php | 81 +++++++++++-------- includes/blocks/meta.php | 3 + src/scripts/blocks/header/DisplayComponent.js | 24 +++++- src/scripts/blocks/header/index.js | 15 ++++ src/styles/layout/_page-hero-editor.scss | 5 ++ src/styles/layout/_page-hero.scss | 8 ++ 8 files changed, 154 insertions(+), 63 deletions(-) diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot index 2b8927e..2423a23 100644 --- a/block-languages/benenson-blocks.pot +++ b/block-languages/benenson-blocks.pot @@ -23,7 +23,7 @@ msgstr "" #: src/scripts/blocks/action/BlockEdit.js:62 #: src/scripts/blocks/blockquote/index.js:246 -#: src/scripts/blocks/header/DisplayComponent.js:134 +#: src/scripts/blocks/header/DisplayComponent.js:137 #: src/scripts/blocks/tweet/index.js:91 msgid "Size" msgstr "" @@ -125,7 +125,7 @@ msgstr "" #: src/scripts/blocks/call-to-action/DisplayComponent.js:46 #: src/scripts/blocks/category-list/DisplayComponent.js:62 #: src/scripts/blocks/columns/DisplayComponent.js:28 -#: src/scripts/blocks/header/DisplayComponent.js:120 +#: src/scripts/blocks/header/DisplayComponent.js:123 #: src/scripts/blocks/iframe/DisplayComponent.js:89 #: src/scripts/blocks/link/DisplayComponent.js:53 #: src/scripts/blocks/menu/DisplayComponent.js:96 @@ -197,7 +197,7 @@ msgid "Right" msgstr "" #: src/scripts/blocks/blockquote/index.js:214 -#: src/scripts/blocks/header/DisplayComponent.js:114 +#: src/scripts/blocks/header/DisplayComponent.js:117 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:223 #: src/scripts/blocks/logo-list/InnerBlockEdit.js:139 #: src/scripts/blocks/section/DisplayComponent.js:60 @@ -236,7 +236,7 @@ msgid "Add a blockquote block" msgstr "" #: src/scripts/blocks/blockquote/index.js:240 -#: src/scripts/blocks/header/DisplayComponent.js:122 +#: src/scripts/blocks/header/DisplayComponent.js:125 #: src/scripts/blocks/image/BlockEdit.js:220 msgid "Alignment" msgstr "" @@ -446,7 +446,11 @@ msgstr "" msgid "Normal" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:128 +#: src/scripts/blocks/header/DisplayComponent.js:114 +msgid "Full height" +msgstr "" + +#: src/scripts/blocks/header/DisplayComponent.js:131 #: src/scripts/blocks/key-facts/index.js:68 #: src/scripts/blocks/links-with-icons/BlockEdit.js:81 #: src/scripts/blocks/logo-list/BlockEdit.js:67 @@ -455,44 +459,48 @@ msgstr "" msgid "Background Colour" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:140 +#: src/scripts/blocks/header/DisplayComponent.js:143 #: src/scripts/blocks/image/BlockEdit.js:387 msgid "Background Type" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:146 +#: src/scripts/blocks/header/DisplayComponent.js:149 #: src/scripts/blocks/media-aside/DisplayComponent.js:52 msgid "Embed url" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:150 +#: src/scripts/blocks/header/DisplayComponent.js:153 msgid "" "Setting this will override the cta link and will now open a modal with the " "embed in the hero." msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:152 +#: src/scripts/blocks/header/DisplayComponent.js:155 +msgid "Bleed into navigation/header" +msgstr "" + +#: src/scripts/blocks/header/DisplayComponent.js:160 #: src/scripts/blocks/section/DisplayComponent.js:105 msgid "Background Image" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:152 +#: src/scripts/blocks/header/DisplayComponent.js:160 msgid "Featured Image" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:155 +#: src/scripts/blocks/header/DisplayComponent.js:163 msgid "Featured Video" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:177 +#: src/scripts/blocks/header/DisplayComponent.js:185 msgid "(Header Title)" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:186 +#: src/scripts/blocks/header/DisplayComponent.js:194 msgid "(Header Content)" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:197 +#: src/scripts/blocks/header/DisplayComponent.js:219 msgid "(Call to action)" msgstr "" diff --git a/header.php b/header.php index b49feca..92c82d6 100644 --- a/header.php +++ b/header.php @@ -16,17 +16,20 @@ $hero_identifier = substr( md5( uniqid( wp_rand(), true ) ), 0, 8 ); -$header_style = benenson_get_meta_field( '_nav_style', $page_id ); -$hero_title = benenson_get_meta_field( '_hero_title' ); -$hero_content = benenson_get_meta_field( '_hero_content' ); -$hero_cta_text = benenson_get_meta_field( '_hero_cta_text' ); -$hero_cta_link = benenson_get_meta_field( '_hero_cta_link' ); -$hero_alignment = benenson_get_meta_field( '_hero_alignment' ) ?: 'left'; -$hero_background = benenson_get_meta_field( '_hero_background', $page_id ); -$hero_size = benenson_get_meta_field( '_hero_size', $page_id ); -$hero_type = benenson_get_meta_field( '_hero_type', $page_id ); -$hero_video_id = benenson_get_meta_field( '_hero_video_id', $page_id ); -$hero_embed = benenson_get_meta_field( '_hero_embed', $page_id ); +$header_style = benenson_get_meta_field( '_nav_style', $page_id ); +$hero_title = benenson_get_meta_field( '_hero_title' ); +$hero_content = benenson_get_meta_field( '_hero_content' ); +$hero_cta_text = benenson_get_meta_field( '_hero_cta_text' ); +$hero_cta_link = benenson_get_meta_field( '_hero_cta_link' ); +$hero_cta_two_text = benenson_get_meta_field( '_hero_cta_two_text' ); +$hero_cta_two_link = benenson_get_meta_field( '_hero_cta_two_link' ); +$hero_bleed = benenson_get_meta_field( '_hero_bleed' ) ? 'page-heroStyle--behindNav' : ''; +$hero_alignment = benenson_get_meta_field( '_hero_alignment' ) ?: 'left'; +$hero_background = benenson_get_meta_field( '_hero_background', $page_id ); +$hero_size = benenson_get_meta_field( '_hero_size', $page_id ); +$hero_type = benenson_get_meta_field( '_hero_type', $page_id ); +$hero_video_id = benenson_get_meta_field( '_hero_video_id', $page_id ); +$hero_embed = benenson_get_meta_field( '_hero_embed', $page_id ); $hero_show = false; $media_lg = false; @@ -130,7 +133,7 @@ } -
> +
> description ) : ?>

description ); ?>

- +
- class="btn" >%s', esc_html__( 'Play Icon', 'benenson' ) ); ?> + + class="btn" >%s', esc_html__( 'Play Icon', 'benenson' ) ); ?> + + + class="btn"> +
@@ -177,9 +185,14 @@ description ) : ?>

description ); ?>

- +
- class="btn" >%s', esc_html__( 'Play Icon', 'benenson' ) ); ?> + + class="btn" >%s', esc_html__( 'Play Icon', 'benenson' ) ); ?> + + + class="btn"> +
diff --git a/includes/blocks/header/render.php b/includes/blocks/header/render.php index dd4b8be..9940052 100644 --- a/includes/blocks/header/render.php +++ b/includes/blocks/header/render.php @@ -1,11 +1,11 @@
'; - - if ( $attributes['title'] ) { - printf( '

%s

', wp_kses_post( $attributes['title'] ) ); - } - - if ( $attributes['content'] ) { - printf( '

%s

', wp_kses_post( $attributes['content'] ) ); - } - - if ( $attributes['ctaText'] ) { - if ( $attributes['ctaLink'] && ! $attributes['embed'] ) { - printf( - '
%s
', - esc_url( $attributes['ctaLink'] ), - esc_html( wp_strip_all_tags( $attributes['ctaText'] ) ) - ); - } elseif ( $attributes['embed'] ) { - printf( - '
%s%s
', - esc_url( $attributes['ctaLink'] ), - esc_url( $attributes['embed'] ), - esc_html__( 'Play video', 'benenson' ), - esc_html( $attributes['ctaText'] ) - ); + ?> +
+
+ %s', wp_kses_post( $attributes['title'] ) ); } - } - - print '
'; + if ( $attributes['content'] ) { + printf( '

%s

', wp_kses_post( $attributes['content'] ) ); + } + ?> + +
+ %s', + esc_url( $attributes['ctaLink'] ), + esc_html( wp_strip_all_tags( $attributes['ctaText'] ) ) + ); + } elseif ( $attributes['embed'] ) { + printf( + '
%s%s
', + esc_url( $attributes['ctaLink'] ), + esc_url( $attributes['embed'] ), + esc_html__( 'Play video', 'benenson' ), + esc_html( $attributes['ctaText'] ) + ); + } + } + + if ( $attributes['ctaTwoText'] && $attributes['ctaTwoLink'] ) { + printf( + '%s', + esc_url( $attributes['ctaTwoLink'] ), + esc_html( wp_strip_all_tags( $attributes['ctaTwoText'] ) ) + ); + } + ?> +
+ + +
+ 'boolean' ] ) ); register_meta( 'post', '_hero_video_id', array_merge( $args, [ 'type' => 'integer' ] ) ); register_meta( 'post', '_hide_featured_image', array_merge( $args, [ 'type' => 'boolean' ] ) ); register_meta( 'post', '_stretch_thumbnail', array_merge( $args, [ 'type' => 'boolean' ] ) ); diff --git a/src/scripts/blocks/header/DisplayComponent.js b/src/scripts/blocks/header/DisplayComponent.js index 8ea7daf..4abf440 100644 --- a/src/scripts/blocks/header/DisplayComponent.js +++ b/src/scripts/blocks/header/DisplayComponent.js @@ -7,7 +7,7 @@ const { applyFilters } = wp.hooks; const { compose } = wp.compose; const { withSelect } = wp.data; const { - withFilters, PanelBody, SelectControl, TextControl, + withFilters, PanelBody, SelectControl, TextControl, ToggleControl, } = wp.components; const { RichText, URLInputButton, InspectorControls } = wp.editor; const { PostFeaturedImage } = wp.editor; @@ -110,6 +110,9 @@ class DisplayComponent extends Component { const sizeOptions = applyFilters('benenson.block.banner.sizeOptions', [{ label: __('Normal', 'benenson'), value: '', + }, { + label: __('Full height', 'benenson'), + value: 'fullHeight', }, { label: __('Small', 'benenson'), value: 'small', @@ -148,6 +151,11 @@ class DisplayComponent extends Component { onChange={ this.createUpdateAttribute('embed') } />

{ __('Setting this will override the cta link and will now open a modal with the embed in the hero.', 'benenson') }

+ @@ -204,6 +212,20 @@ class DisplayComponent extends Component { onChange={ this.createUpdateAttribute('ctaLink') } /> } +
+ + +
diff --git a/src/scripts/blocks/header/index.js b/src/scripts/blocks/header/index.js index bc47064..1f2c43b 100644 --- a/src/scripts/blocks/header/index.js +++ b/src/scripts/blocks/header/index.js @@ -64,6 +64,21 @@ registerBlockType('benenson/block-hero', { source: 'meta', meta: '_hero_video_id', }, + bleed: { + type: 'boolean', + source: 'meta', + meta: '_hero_bleed', + }, + ctaTwoLink: { + type: 'string', + source: 'meta', + meta: '_hero_cta_two_link', + }, + ctaTwoText: { + type: 'string', + source: 'meta', + meta: '_hero_cta_two_text', + }, }, edit: DisplayComponent, diff --git a/src/styles/layout/_page-hero-editor.scss b/src/styles/layout/_page-hero-editor.scss index f1752d2..5d88b51 100644 --- a/src/styles/layout/_page-hero-editor.scss +++ b/src/styles/layout/_page-hero-editor.scss @@ -47,6 +47,10 @@ p.page-heroContent { min-height: 450px; } +.page-heroSize--fullHeight { + min-height: 100vh; +} + .page-heroBackground--dark .page-heroContent, .page-heroBackground--dark .page-heroCta, .page-heroBackground--dark .page-heroTitle { @@ -182,4 +186,5 @@ p.page-heroContent { .page-heroCta .btn { display: flex; align-items: center; + height: 55px; } diff --git a/src/styles/layout/_page-hero.scss b/src/styles/layout/_page-hero.scss index 9c245be..0486202 100644 --- a/src/styles/layout/_page-hero.scss +++ b/src/styles/layout/_page-hero.scss @@ -84,12 +84,20 @@ p.page-heroContent { } } +.page-heroCta .btn + .btn { + margin-left: 15px; +} + .page-heroSize--small { @include mq(small) { min-height: 450px; } } +.page-heroSize--fullHeight { + min-height: 100vh; +} + .page-heroBackground--dark .page-heroContent, .page-heroBackground--dark .page-heroCta, .page-heroBackground--dark .page-heroTitle span { From b070b975aabbd3c8cb4441283572be3bdacef405 Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Wed, 30 Jan 2019 12:57:05 +0000 Subject: [PATCH 2/7] Remove meta from header upon component removal. --- block-languages/benenson-blocks.pot | 52 +++++++++---------- includes/remove-hero-meta-on-removal.php | 3 ++ src/scripts/blocks/header/DisplayComponent.js | 1 + 3 files changed, 30 insertions(+), 26 deletions(-) diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot index 2423a23..9b73616 100644 --- a/block-languages/benenson-blocks.pot +++ b/block-languages/benenson-blocks.pot @@ -23,7 +23,7 @@ msgstr "" #: src/scripts/blocks/action/BlockEdit.js:62 #: src/scripts/blocks/blockquote/index.js:246 -#: src/scripts/blocks/header/DisplayComponent.js:137 +#: src/scripts/blocks/header/DisplayComponent.js:138 #: src/scripts/blocks/tweet/index.js:91 msgid "Size" msgstr "" @@ -88,7 +88,7 @@ msgstr "" #: src/scripts/blocks/appearance-options/index.js:39 #: src/scripts/blocks/blockquote/index.js:232 -#: src/scripts/blocks/header/DisplayComponent.js:95 +#: src/scripts/blocks/header/DisplayComponent.js:96 #: src/scripts/blocks/menu/DisplayComponent.js:12 #: src/scripts/blocks/section/DisplayComponent.js:49 msgid "White" @@ -96,7 +96,7 @@ msgstr "" #: src/scripts/blocks/appearance-options/index.js:42 #: src/scripts/blocks/blockquote/index.js:226 -#: src/scripts/blocks/header/DisplayComponent.js:98 +#: src/scripts/blocks/header/DisplayComponent.js:99 msgid "Black" msgstr "" @@ -125,7 +125,7 @@ msgstr "" #: src/scripts/blocks/call-to-action/DisplayComponent.js:46 #: src/scripts/blocks/category-list/DisplayComponent.js:62 #: src/scripts/blocks/columns/DisplayComponent.js:28 -#: src/scripts/blocks/header/DisplayComponent.js:123 +#: src/scripts/blocks/header/DisplayComponent.js:124 #: src/scripts/blocks/iframe/DisplayComponent.js:89 #: src/scripts/blocks/link/DisplayComponent.js:53 #: src/scripts/blocks/menu/DisplayComponent.js:96 @@ -173,7 +173,7 @@ msgstr "" # text alignment. for RTL languages, localise as 'Right' #: src/scripts/blocks/blockquote/index.js:164 -#: src/scripts/blocks/header/DisplayComponent.js:76 +#: src/scripts/blocks/header/DisplayComponent.js:77 #: src/scripts/blocks/image/BlockEdit.js:201 #: src/scripts/blocks/link/DisplayComponent.js:41 #: src/scripts/blocks/slider/DisplayComponent.js:37 @@ -189,7 +189,7 @@ msgstr "" # text alignment. for RTL languages, localise as 'Left' #: src/scripts/blocks/blockquote/index.js:170 -#: src/scripts/blocks/header/DisplayComponent.js:83 +#: src/scripts/blocks/header/DisplayComponent.js:84 #: src/scripts/blocks/image/BlockEdit.js:208 #: src/scripts/blocks/link/DisplayComponent.js:47 #: src/scripts/blocks/slider/DisplayComponent.js:44 @@ -197,7 +197,7 @@ msgid "Right" msgstr "" #: src/scripts/blocks/blockquote/index.js:214 -#: src/scripts/blocks/header/DisplayComponent.js:117 +#: src/scripts/blocks/header/DisplayComponent.js:118 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:223 #: src/scripts/blocks/logo-list/InnerBlockEdit.js:139 #: src/scripts/blocks/section/DisplayComponent.js:60 @@ -236,7 +236,7 @@ msgid "Add a blockquote block" msgstr "" #: src/scripts/blocks/blockquote/index.js:240 -#: src/scripts/blocks/header/DisplayComponent.js:125 +#: src/scripts/blocks/header/DisplayComponent.js:126 #: src/scripts/blocks/image/BlockEdit.js:220 msgid "Alignment" msgstr "" @@ -431,26 +431,26 @@ msgstr "" msgid "Edit File" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:103 +#: src/scripts/blocks/header/DisplayComponent.js:104 #: src/scripts/blocks/image/BlockEdit.js:389 msgid "Image" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:106 +#: src/scripts/blocks/header/DisplayComponent.js:107 #: src/scripts/blocks/image/BlockEdit.js:392 msgid "Video" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:111 +#: src/scripts/blocks/header/DisplayComponent.js:112 #: src/scripts/blocks/section/DisplayComponent.js:68 msgid "Normal" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:114 +#: src/scripts/blocks/header/DisplayComponent.js:115 msgid "Full height" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:131 +#: src/scripts/blocks/header/DisplayComponent.js:132 #: src/scripts/blocks/key-facts/index.js:68 #: src/scripts/blocks/links-with-icons/BlockEdit.js:81 #: src/scripts/blocks/logo-list/BlockEdit.js:67 @@ -459,62 +459,62 @@ msgstr "" msgid "Background Colour" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:143 +#: src/scripts/blocks/header/DisplayComponent.js:144 #: src/scripts/blocks/image/BlockEdit.js:387 msgid "Background Type" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:149 +#: src/scripts/blocks/header/DisplayComponent.js:150 #: src/scripts/blocks/media-aside/DisplayComponent.js:52 msgid "Embed url" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:153 +#: src/scripts/blocks/header/DisplayComponent.js:154 msgid "" "Setting this will override the cta link and will now open a modal with the " "embed in the hero." msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:155 +#: src/scripts/blocks/header/DisplayComponent.js:156 msgid "Bleed into navigation/header" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:160 +#: src/scripts/blocks/header/DisplayComponent.js:161 #: src/scripts/blocks/section/DisplayComponent.js:105 msgid "Background Image" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:160 +#: src/scripts/blocks/header/DisplayComponent.js:161 msgid "Featured Image" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:163 +#: src/scripts/blocks/header/DisplayComponent.js:164 msgid "Featured Video" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:185 +#: src/scripts/blocks/header/DisplayComponent.js:186 msgid "(Header Title)" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:194 +#: src/scripts/blocks/header/DisplayComponent.js:195 msgid "(Header Content)" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:219 +#: src/scripts/blocks/header/DisplayComponent.js:220 msgid "(Call to action)" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:79 +#: src/scripts/blocks/header/DisplayComponent.js:80 #: src/scripts/blocks/image/BlockEdit.js:205 #: src/scripts/blocks/slider/DisplayComponent.js:40 msgid "Centre" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:89 +#: src/scripts/blocks/header/DisplayComponent.js:90 msgid "Translucent black" msgstr "" -#: src/scripts/blocks/header/DisplayComponent.js:92 +#: src/scripts/blocks/header/DisplayComponent.js:93 #: src/scripts/blocks/key-facts/index.js:50 #: src/scripts/blocks/link/DisplayComponent.js:30 #: src/scripts/blocks/links-with-icons/BlockEdit.js:57 diff --git a/includes/remove-hero-meta-on-removal.php b/includes/remove-hero-meta-on-removal.php index d27dfbd..6f32fed 100644 --- a/includes/remove-hero-meta-on-removal.php +++ b/includes/remove-hero-meta-on-removal.php @@ -23,6 +23,9 @@ function benenson_remove_hero_meta( $post_id, $post ) { '_hero_content', '_hero_cta_text', '_hero_title', + '_hero_cta_two_link', + '_hero_cta_two_text', + '_hero_bleed', ]; foreach ( $meta_to_remove as $meta_key ) { diff --git a/src/scripts/blocks/header/DisplayComponent.js b/src/scripts/blocks/header/DisplayComponent.js index 4abf440..fe191b0 100644 --- a/src/scripts/blocks/header/DisplayComponent.js +++ b/src/scripts/blocks/header/DisplayComponent.js @@ -68,6 +68,7 @@ class DisplayComponent extends Component { [`page-heroSize--${attributes.size}`]: attributes.size || false, [`page-heroBackground--${attributes.background}`]: attributes.background || false, [`page-heroAlignment--${attributes.alignment}`]: attributes.alignment || false, + ['page-heroStyle--behindNav']: attributes.bleed, 'page-hero--video': attributes.type === 'video', }); From d621273b74ba2812c366179b929d341cdc65290a Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Wed, 30 Jan 2019 16:13:02 +0000 Subject: [PATCH 3/7] header behind nav. --- src/scripts/app.js | 2 ++ src/scripts/blocks/header/DisplayComponent.js | 2 +- src/scripts/modules/pageHero-position.js | 20 +++++++++++++++++++ src/styles/layout/_page-head.scss | 4 ++++ src/styles/layout/_page-hero-editor.scss | 4 ++++ src/styles/layout/_page-hero.scss | 4 ++++ 6 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/scripts/modules/pageHero-position.js diff --git a/src/scripts/app.js b/src/scripts/app.js index 22a140f..d6a7b76 100755 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -4,6 +4,7 @@ import languageSelector from './modules/language-selector'; import searchToggle from './modules/search-toggle'; import mobileMenu from './modules/mobile-menu'; import headerPosition from './modules/header-position'; +import pagerHeroPosition from './modules/pageHero-position'; // import fluidIframe from './modules/fluid-iframe'; import tweetAction from './modules/tweet-action'; import stickyNav from './modules/sticky-nav'; @@ -22,6 +23,7 @@ const App = () => { filterPosts(); languageSelector(); headerPosition(); + pagerHeroPosition(); searchToggle(document.querySelector('.page-header:not(.page-header--sticky)')); mobileMenu(); // fluidIframe(); diff --git a/src/scripts/blocks/header/DisplayComponent.js b/src/scripts/blocks/header/DisplayComponent.js index fe191b0..c10bcfa 100644 --- a/src/scripts/blocks/header/DisplayComponent.js +++ b/src/scripts/blocks/header/DisplayComponent.js @@ -68,7 +68,7 @@ class DisplayComponent extends Component { [`page-heroSize--${attributes.size}`]: attributes.size || false, [`page-heroBackground--${attributes.background}`]: attributes.background || false, [`page-heroAlignment--${attributes.alignment}`]: attributes.alignment || false, - ['page-heroStyle--behindNav']: attributes.bleed, + 'page-heroStyle--behindNav': attributes.bleed, 'page-hero--video': attributes.type === 'video', }); diff --git a/src/scripts/modules/pageHero-position.js b/src/scripts/modules/pageHero-position.js new file mode 100644 index 0000000..981eb4c --- /dev/null +++ b/src/scripts/modules/pageHero-position.js @@ -0,0 +1,20 @@ +export const workoutHeaderPosition = () => { + const hero = document.querySelector('.page-hero.page-heroStyle--behindNav'); + const selector = document.querySelector('.page-header:not(.page-header--sticky'); + + if (!hero || !selector) { + return; + } + + document.body.classList.add('page--heroBehindNav'); + + const { bottom } = selector.getBoundingClientRect(); + hero.style.top = `-${bottom}px`; +}; + +const init = () => { + workoutHeaderPosition(); + window.addEventListener('resize', workoutHeaderPosition); +}; + +export default init; diff --git a/src/styles/layout/_page-head.scss b/src/styles/layout/_page-head.scss index 72c2ca0..f7123c7 100755 --- a/src/styles/layout/_page-head.scss +++ b/src/styles/layout/_page-head.scss @@ -54,6 +54,10 @@ color: $color-black; } +body.page--heroBehindNav .page-header { + background-color: transparent; +} + .page-headerSearch { position: relative; display: flex; diff --git a/src/styles/layout/_page-hero-editor.scss b/src/styles/layout/_page-hero-editor.scss index 5d88b51..6ea06f2 100644 --- a/src/styles/layout/_page-hero-editor.scss +++ b/src/styles/layout/_page-hero-editor.scss @@ -188,3 +188,7 @@ p.page-heroContent { align-items: center; height: 55px; } + +.page-heroStyle--behindNav { + z-index: 1; +} diff --git a/src/styles/layout/_page-hero.scss b/src/styles/layout/_page-hero.scss index 0486202..8c0473c 100644 --- a/src/styles/layout/_page-hero.scss +++ b/src/styles/layout/_page-hero.scss @@ -201,6 +201,10 @@ p.page-heroContent { z-index: 0; } +.page-heroStyle--behindNav { + z-index: -1; +} + .page-heroVideoContainer { position: absolute; top: 0; From 7aab99d716c46f1636612c61d36d6d9bcebeac01 Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Wed, 30 Jan 2019 17:54:12 +0000 Subject: [PATCH 4/7] Add bullet option. --- block-languages/benenson-blocks.pot | 4 + header.php | 7 ++ includes/block-translations.php | 106 ++++++++++-------- includes/blocks/header/render.php | 5 + includes/blocks/meta.php | 1 + includes/remove-hero-meta-on-removal.php | 1 + src/scripts/blocks/header/DisplayComponent.js | 12 ++ src/scripts/blocks/header/index.js | 5 + src/styles/layout/_page-hero.scss | 15 ++- 9 files changed, 105 insertions(+), 51 deletions(-) diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot index 9b73616..3dd767c 100644 --- a/block-languages/benenson-blocks.pot +++ b/block-languages/benenson-blocks.pot @@ -504,6 +504,10 @@ msgstr "" msgid "(Call to action)" msgstr "" +#: src/scripts/blocks/header/DisplayComponent.js:237 +msgid "(Bullets)" +msgstr "" + #: src/scripts/blocks/header/DisplayComponent.js:80 #: src/scripts/blocks/image/BlockEdit.js:205 #: src/scripts/blocks/slider/DisplayComponent.js:40 diff --git a/header.php b/header.php index 92c82d6..5d13589 100644 --- a/header.php +++ b/header.php @@ -23,6 +23,7 @@ $hero_cta_link = benenson_get_meta_field( '_hero_cta_link' ); $hero_cta_two_text = benenson_get_meta_field( '_hero_cta_two_text' ); $hero_cta_two_link = benenson_get_meta_field( '_hero_cta_two_link' ); +$hero_bullets = benenson_get_meta_field( '_hero_bullets' ); $hero_bleed = benenson_get_meta_field( '_hero_bleed' ) ? 'page-heroStyle--behindNav' : ''; $hero_alignment = benenson_get_meta_field( '_hero_alignment' ) ?: 'left'; $hero_background = benenson_get_meta_field( '_hero_background', $page_id ); @@ -165,6 +166,9 @@ +
    %s
', wp_kses_post( $hero_bullets ) ); + endif; ?> @@ -195,6 +199,9 @@ +
    %s
', wp_kses_post( $hero_bullets ) ); + endif; ?> diff --git a/includes/block-translations.php b/includes/block-translations.php index 7c928b8..cb39fdd 100644 --- a/includes/block-translations.php +++ b/includes/block-translations.php @@ -12,12 +12,12 @@ __( 'Standard', 'benenson' ), // Reference: src/scripts/blocks/action/BlockEdit.js:37 - // Reference: src/scripts/blocks/section/DisplayComponent.js:62 + // Reference: src/scripts/blocks/section/DisplayComponent.js:74 __( 'Wide', 'benenson' ), // Reference: src/scripts/blocks/action/BlockEdit.js:62 // Reference: src/scripts/blocks/blockquote/index.js:246 - // Reference: src/scripts/blocks/header/DisplayComponent.js:134 + // Reference: src/scripts/blocks/header/DisplayComponent.js:138 // Reference: src/scripts/blocks/tweet/index.js:91 __( 'Size', 'benenson' ), @@ -68,14 +68,14 @@ // Reference: src/scripts/blocks/appearance-options/index.js:39 // Reference: src/scripts/blocks/blockquote/index.js:232 - // Reference: src/scripts/blocks/header/DisplayComponent.js:95 + // Reference: src/scripts/blocks/header/DisplayComponent.js:96 // Reference: src/scripts/blocks/menu/DisplayComponent.js:12 - // Reference: src/scripts/blocks/section/DisplayComponent.js:37 + // Reference: src/scripts/blocks/section/DisplayComponent.js:49 __( 'White', 'benenson' ), // Reference: src/scripts/blocks/appearance-options/index.js:42 // Reference: src/scripts/blocks/blockquote/index.js:226 - // Reference: src/scripts/blocks/header/DisplayComponent.js:98 + // Reference: src/scripts/blocks/header/DisplayComponent.js:99 __( 'Black', 'benenson' ), // Reference: src/scripts/blocks/appearance-options/index.js:47 @@ -98,12 +98,12 @@ // Reference: src/scripts/blocks/call-to-action/DisplayComponent.js:46 // Reference: src/scripts/blocks/category-list/DisplayComponent.js:62 // Reference: src/scripts/blocks/columns/DisplayComponent.js:28 - // Reference: src/scripts/blocks/header/DisplayComponent.js:120 + // Reference: src/scripts/blocks/header/DisplayComponent.js:124 // Reference: src/scripts/blocks/iframe/DisplayComponent.js:89 // Reference: src/scripts/blocks/link/DisplayComponent.js:53 // Reference: src/scripts/blocks/menu/DisplayComponent.js:96 // Reference: src/scripts/blocks/post-list/DisplayComponent.js:91 - // Reference: src/scripts/blocks/section/DisplayComponent.js:68 + // Reference: src/scripts/blocks/section/DisplayComponent.js:80 // Reference: src/scripts/blocks/slider/DisplayComponent.js:215 __( 'Options', 'benenson' ), @@ -135,7 +135,7 @@ __( 'Sidebar', 'benenson' ), // Reference: src/scripts/blocks/blockquote/index.js:164 - // Reference: src/scripts/blocks/header/DisplayComponent.js:76 + // Reference: src/scripts/blocks/header/DisplayComponent.js:77 // Reference: src/scripts/blocks/image/BlockEdit.js:201 // Reference: src/scripts/blocks/link/DisplayComponent.js:41 // Reference: src/scripts/blocks/slider/DisplayComponent.js:37 @@ -144,11 +144,12 @@ // Reference: src/scripts/blocks/blockquote/index.js:165 // Reference: src/scripts/blocks/image/BlockEdit.js:197 + // Reference: src/scripts/blocks/section/index.js:53 // Reference: src/scripts/blocks/tweet/index.js:26 __( 'Default', 'benenson' ), // Reference: src/scripts/blocks/blockquote/index.js:170 - // Reference: src/scripts/blocks/header/DisplayComponent.js:83 + // Reference: src/scripts/blocks/header/DisplayComponent.js:84 // Reference: src/scripts/blocks/image/BlockEdit.js:208 // Reference: src/scripts/blocks/link/DisplayComponent.js:47 // Reference: src/scripts/blocks/slider/DisplayComponent.js:44 @@ -156,10 +157,10 @@ __( 'Right', 'benenson' ), // Reference: src/scripts/blocks/blockquote/index.js:214 - // Reference: src/scripts/blocks/header/DisplayComponent.js:114 + // Reference: src/scripts/blocks/header/DisplayComponent.js:118 // Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:223 // Reference: src/scripts/blocks/logo-list/InnerBlockEdit.js:139 - // Reference: src/scripts/blocks/section/DisplayComponent.js:48 + // Reference: src/scripts/blocks/section/DisplayComponent.js:60 __( 'Small', 'benenson' ), // Reference: src/scripts/blocks/blockquote/index.js:217 @@ -181,7 +182,7 @@ // Reference: src/scripts/blocks/links-with-icons/BlockEdit.js:60 // Reference: src/scripts/blocks/logo-list/BlockEdit.js:52 // Reference: src/scripts/blocks/menu/DisplayComponent.js:15 - // Reference: src/scripts/blocks/section/DisplayComponent.js:40 + // Reference: src/scripts/blocks/section/DisplayComponent.js:52 // Reference: src/scripts/blocks/section/index.js:27 __( 'Grey', 'benenson' ), @@ -189,7 +190,7 @@ __( 'Add a blockquote block', 'benenson' ), // Reference: src/scripts/blocks/blockquote/index.js:240 - // Reference: src/scripts/blocks/header/DisplayComponent.js:122 + // Reference: src/scripts/blocks/header/DisplayComponent.js:126 // Reference: src/scripts/blocks/image/BlockEdit.js:220 __( 'Alignment', 'benenson' ), @@ -322,85 +323,94 @@ // Reference: src/scripts/blocks/download/index.js:13 __( 'Add a button to download a resource', 'benenson' ), - // Reference: src/scripts/blocks/download/index.js:44 + // Reference: src/scripts/blocks/download/index.js:43 __( 'File', 'benenson' ), - // Reference: src/scripts/blocks/download/index.js:45 + // Reference: src/scripts/blocks/download/index.js:44 __( 'A File', 'benenson' ), - // Reference: src/scripts/blocks/download/index.js:67 + // Reference: src/scripts/blocks/download/index.js:66 __( '[Download Resource]', 'benenson' ), - // Reference: src/scripts/blocks/download/index.js:75 + // Reference: src/scripts/blocks/download/index.js:74 __( 'Remove Resource', 'benenson' ), - // Reference: src/scripts/blocks/download/index.js:85 + // Reference: src/scripts/blocks/download/index.js:84 __( 'Edit File', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:103 + // Reference: src/scripts/blocks/header/DisplayComponent.js:104 // Reference: src/scripts/blocks/image/BlockEdit.js:389 __( 'Image', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:106 + // Reference: src/scripts/blocks/header/DisplayComponent.js:107 // Reference: src/scripts/blocks/image/BlockEdit.js:392 __( 'Video', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:111 - // Reference: src/scripts/blocks/section/DisplayComponent.js:56 + // Reference: src/scripts/blocks/header/DisplayComponent.js:112 + // Reference: src/scripts/blocks/section/DisplayComponent.js:68 __( 'Normal', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:128 + // Reference: src/scripts/blocks/header/DisplayComponent.js:115 + __( 'Full height', 'benenson' ), + + // Reference: src/scripts/blocks/header/DisplayComponent.js:132 // Reference: src/scripts/blocks/key-facts/index.js:68 // Reference: src/scripts/blocks/links-with-icons/BlockEdit.js:81 // Reference: src/scripts/blocks/logo-list/BlockEdit.js:67 // Reference: src/scripts/blocks/menu/DisplayComponent.js:107 - // Reference: src/scripts/blocks/section/DisplayComponent.js:70 + // Reference: src/scripts/blocks/section/DisplayComponent.js:82 __( 'Background Colour', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:140 + // Reference: src/scripts/blocks/header/DisplayComponent.js:144 // Reference: src/scripts/blocks/image/BlockEdit.js:387 __( 'Background Type', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:146 + // Reference: src/scripts/blocks/header/DisplayComponent.js:150 // Reference: src/scripts/blocks/media-aside/DisplayComponent.js:52 __( 'Embed url', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:150 + // Reference: src/scripts/blocks/header/DisplayComponent.js:154 __( 'Setting this will override the cta link and will now open a modal with the embed in the hero.', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:152 - // Reference: src/scripts/blocks/section/DisplayComponent.js:93 + // Reference: src/scripts/blocks/header/DisplayComponent.js:156 + __( 'Bleed into navigation/header', 'benenson' ), + + // Reference: src/scripts/blocks/header/DisplayComponent.js:161 + // Reference: src/scripts/blocks/section/DisplayComponent.js:105 __( 'Background Image', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:152 + // Reference: src/scripts/blocks/header/DisplayComponent.js:161 __( 'Featured Image', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:155 + // Reference: src/scripts/blocks/header/DisplayComponent.js:164 __( 'Featured Video', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:177 + // Reference: src/scripts/blocks/header/DisplayComponent.js:186 __( '(Header Title)', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:186 + // Reference: src/scripts/blocks/header/DisplayComponent.js:195 __( '(Header Content)', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:197 + // Reference: src/scripts/blocks/header/DisplayComponent.js:220 __( '(Call to action)', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:79 + // Reference: src/scripts/blocks/header/DisplayComponent.js:237 + __( '(Bullets)', 'benenson' ), + + // Reference: src/scripts/blocks/header/DisplayComponent.js:80 // Reference: src/scripts/blocks/image/BlockEdit.js:205 // Reference: src/scripts/blocks/slider/DisplayComponent.js:40 __( 'Centre', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:89 + // Reference: src/scripts/blocks/header/DisplayComponent.js:90 __( 'Translucent black', 'benenson' ), - // Reference: src/scripts/blocks/header/DisplayComponent.js:92 + // Reference: src/scripts/blocks/header/DisplayComponent.js:93 // Reference: src/scripts/blocks/key-facts/index.js:50 // Reference: src/scripts/blocks/link/DisplayComponent.js:30 // Reference: src/scripts/blocks/links-with-icons/BlockEdit.js:57 // Reference: src/scripts/blocks/logo-list/BlockEdit.js:49 - // Reference: src/scripts/blocks/section/DisplayComponent.js:51 + // Reference: src/scripts/blocks/section/DisplayComponent.js:63 __( 'None', 'benenson' ), // Reference: src/scripts/blocks/header/PostFeaturedVideo.js:6 @@ -438,7 +448,7 @@ __( 'Write caption…', 'benenson' ), // Reference: src/scripts/blocks/iframe/DisplayComponent.js:91 - // Reference: src/scripts/blocks/section/DisplayComponent.js:82 + // Reference: src/scripts/blocks/section/DisplayComponent.js:94 __( 'Width', 'benenson' ), // Reference: src/scripts/blocks/iframe/DisplayComponent.js:95 @@ -507,13 +517,13 @@ // Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268 // Reference: src/scripts/blocks/media-aside/DisplayComponent.js:83 // Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30 - // Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:27 + // Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:29 // Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55 // Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38 __( '(Insert Title)', 'benenson' ), // Reference: src/scripts/blocks/key-facts/fact.js:39 - // Reference: src/scripts/blocks/media-aside/DisplayComponent.js:94 + // Reference: src/scripts/blocks/media-aside/DisplayComponent.js:93 // Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:46 // Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:71 // Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:54 @@ -645,7 +655,7 @@ // Reference: src/scripts/blocks/logo-list/index.js:21 __( 'Add a repeatable logo block', 'benenson' ), - // Reference: src/scripts/blocks/media-aside/DisplayComponent.js:104 + // Reference: src/scripts/blocks/media-aside/DisplayComponent.js:103 __( '(Insert Link text)', 'benenson' ), // Reference: src/scripts/blocks/media-aside/DisplayComponent.js:57 @@ -760,7 +770,7 @@ // Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:22 __( '(Insert Tag)', 'benenson' ), - // Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:12 + // Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:13 __( '(Tag Name)', 'benenson' ), // Reference: src/scripts/blocks/post-list/components/post-selector/PostList.js:21 @@ -790,15 +800,15 @@ // Reference: src/scripts/blocks/post-list/index.js:49 __( 'Posts', 'benenson' ), - // Reference: src/scripts/blocks/section/DisplayComponent.js:59 + // Reference: src/scripts/blocks/section/DisplayComponent.js:100 + __( 'Id (scroll location)', 'benenson' ), + + // Reference: src/scripts/blocks/section/DisplayComponent.js:71 // Reference: src/scripts/blocks/tweet/index.js:27 __( 'Narrow', 'benenson' ), - // Reference: src/scripts/blocks/section/DisplayComponent.js:76 - __( 'Padding', 'benenson' ), - // Reference: src/scripts/blocks/section/DisplayComponent.js:88 - __( 'Id (scroll location)', 'benenson' ), + __( 'Padding', 'benenson' ), // Reference: src/scripts/blocks/section/index.js:26 __( 'Section', 'benenson' ), diff --git a/includes/blocks/header/render.php b/includes/blocks/header/render.php index 9940052..5553830 100644 --- a/includes/blocks/header/render.php +++ b/includes/blocks/header/render.php @@ -123,6 +123,11 @@ function benenson_render_header_block( array $attributes = [] ) { } ?> +
    <%s
', wp_kses_post( $attributes['bullets'] ) ); + } + ?> diff --git a/includes/blocks/meta.php b/includes/blocks/meta.php index b4e7691..cdc492d 100644 --- a/includes/blocks/meta.php +++ b/includes/blocks/meta.php @@ -30,6 +30,7 @@ function benenson_register_meta() { register_meta( 'post', '_hero_show', $args ); register_meta( 'post', '_hero_type', $args ); register_meta( 'post', '_hero_embed', $args ); + register_meta( 'post', '_hero_bullets', $args ); register_meta( 'post', '_hero_bleed', array_merge( $args, [ 'type' => 'boolean' ] ) ); register_meta( 'post', '_hero_video_id', array_merge( $args, [ 'type' => 'integer' ] ) ); register_meta( 'post', '_hide_featured_image', array_merge( $args, [ 'type' => 'boolean' ] ) ); diff --git a/includes/remove-hero-meta-on-removal.php b/includes/remove-hero-meta-on-removal.php index 6f32fed..09b07ad 100644 --- a/includes/remove-hero-meta-on-removal.php +++ b/includes/remove-hero-meta-on-removal.php @@ -26,6 +26,7 @@ function benenson_remove_hero_meta( $post_id, $post ) { '_hero_cta_two_link', '_hero_cta_two_text', '_hero_bleed', + '_hero_bullets', ]; foreach ( $meta_to_remove as $meta_key ) { diff --git a/src/scripts/blocks/header/DisplayComponent.js b/src/scripts/blocks/header/DisplayComponent.js index c10bcfa..76b473f 100644 --- a/src/scripts/blocks/header/DisplayComponent.js +++ b/src/scripts/blocks/header/DisplayComponent.js @@ -228,6 +228,18 @@ class DisplayComponent extends Component { /> +
+
+ +
+
diff --git a/src/scripts/blocks/header/index.js b/src/scripts/blocks/header/index.js index 1f2c43b..db6bfd0 100644 --- a/src/scripts/blocks/header/index.js +++ b/src/scripts/blocks/header/index.js @@ -79,6 +79,11 @@ registerBlockType('benenson/block-hero', { source: 'meta', meta: '_hero_cta_two_text', }, + bullets: { + type: 'string', + source: 'meta', + meta: '_hero_bullets', + }, }, edit: DisplayComponent, diff --git a/src/styles/layout/_page-hero.scss b/src/styles/layout/_page-hero.scss index 8c0473c..d4dbbe6 100644 --- a/src/styles/layout/_page-hero.scss +++ b/src/styles/layout/_page-hero.scss @@ -88,6 +88,12 @@ p.page-heroContent { margin-left: 15px; } +.page-heroBullets > div { + display: inline-block; + background-color: rgba($color-black, .45); + padding: 10px 20px 20px; +} + .page-heroSize--small { @include mq(small) { min-height: 450px; @@ -100,7 +106,8 @@ p.page-heroContent { .page-heroBackground--dark .page-heroContent, .page-heroBackground--dark .page-heroCta, -.page-heroBackground--dark .page-heroTitle span { +.page-heroBackground--dark .page-heroTitle span, +.page-heroBackground--dark .page-heroBullets > div { background-color: $color-black; } @@ -114,7 +121,8 @@ p.page-heroContent { .page-heroBackground--light .page-heroContent, .page-heroBackground--light .page-heroCta, -.page-heroBackground--light .page-heroTitle span { +.page-heroBackground--light .page-heroTitle span, +.page-heroBackground--light .page-heroBullets > div { background-color: $color-white; color: $color-black; } @@ -141,7 +149,8 @@ p.page-heroContent { .page-heroBackground--none .page-heroContent, .page-heroBackground--none .page-heroCta, .page-heroBackground--none .page-heroTitle, -.page-heroBackground--none .page-heroTitle span { +.page-heroBackground--none .page-heroTitle span, +.page-heroBackground--none .page-heroBullets > div { padding-left: 0; padding-right: 0; color: $color-white; From 12da29a5eb833262e6b7fa8b00c1da6565f72359 Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Thu, 31 Jan 2019 10:49:41 +0000 Subject: [PATCH 5/7] Fix nav background when header behind. --- src/styles/layout/_page-head.scss | 4 +++- src/styles/layout/_page-hero.scss | 4 ---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/styles/layout/_page-head.scss b/src/styles/layout/_page-head.scss index f7123c7..a77af1e 100755 --- a/src/styles/layout/_page-head.scss +++ b/src/styles/layout/_page-head.scss @@ -19,6 +19,8 @@ display: flex; align-items: center; padding: 0; + z-index: 1; + position: relative; } .page-header .page-nav { @@ -54,7 +56,7 @@ color: $color-black; } -body.page--heroBehindNav .page-header { +body.page--heroBehindNav .page-header:not(.page-header--sticky) { background-color: transparent; } diff --git a/src/styles/layout/_page-hero.scss b/src/styles/layout/_page-hero.scss index d4dbbe6..13ff260 100644 --- a/src/styles/layout/_page-hero.scss +++ b/src/styles/layout/_page-hero.scss @@ -210,10 +210,6 @@ p.page-heroContent { z-index: 0; } -.page-heroStyle--behindNav { - z-index: -1; -} - .page-heroVideoContainer { position: absolute; top: 0; From 03178e1b2111ece96c02ffa749513cf835d52e22 Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Thu, 31 Jan 2019 10:54:56 +0000 Subject: [PATCH 6/7] Fix phpcs errors. --- header.php | 12 ++++++++---- includes/blocks/header/render.php | 6 +++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/header.php b/header.php index 5d13589..0ee2ffe 100644 --- a/header.php +++ b/header.php @@ -166,9 +166,11 @@ -
    %s
', wp_kses_post( $hero_bullets ) ); - endif; ?> + endif; + ?> @@ -199,9 +201,11 @@ -
    %s
', wp_kses_post( $hero_bullets ) ); - endif; ?> + endif; + ?> diff --git a/includes/blocks/header/render.php b/includes/blocks/header/render.php index 5553830..1a8c22d 100644 --- a/includes/blocks/header/render.php +++ b/includes/blocks/header/render.php @@ -19,9 +19,9 @@ function benenson_render_header_block( array $attributes = [] ) { $attributes['alignment'] = 'left'; } - $size = ! empty( $attributes['size'] ) ? $attributes['size'] : ''; - $alignment = ! empty( $attributes['alignment'] ) ? $attributes['alignment'] : ''; - $bleed = ! empty( $attributes['bleed'] ) ? 'page-heroStyle--behindNav' : ''; + $size = ! empty( $attributes['size'] ) ? $attributes['size'] : ''; + $alignment = ! empty( $attributes['alignment'] ) ? $attributes['alignment'] : ''; + $bleed = ! empty( $attributes['bleed'] ) ? 'page-heroStyle--behindNav' : ''; $classlist = [ 'page-hero', From 0eb8a4d4463c738bfa41ddd7e35b5cc3bc0f7fe6 Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Mon, 4 Feb 2019 13:05:38 +0000 Subject: [PATCH 7/7] Code fixes. --- header.php | 4 +- includes/blocks/header/render.php | 98 ++++++++++++------------ src/scripts/app.js | 4 +- src/styles/layout/_page-hero-editor.scss | 4 + src/styles/layout/_page-hero.scss | 4 + 5 files changed, 61 insertions(+), 53 deletions(-) diff --git a/header.php b/header.php index 0ee2ffe..72e1793 100644 --- a/header.php +++ b/header.php @@ -156,7 +156,7 @@ description ) : ?>

description ); ?>

- +
class="btn" >%s', esc_html__( 'Play Icon', 'benenson' ) ); ?> @@ -191,7 +191,7 @@ description ) : ?>

description ); ?>

- +
class="btn" >%s', esc_html__( 'Play Icon', 'benenson' ) ); ?> diff --git a/includes/blocks/header/render.php b/includes/blocks/header/render.php index 1a8c22d..41047ce 100644 --- a/includes/blocks/header/render.php +++ b/includes/blocks/header/render.php @@ -1,11 +1,11 @@ -
-
- %s', wp_kses_post( $attributes['title'] ) ); + + print '
'; + + if ( $attributes['title'] ) { + printf( '

%s

', wp_kses_post( $attributes['title'] ) ); + } + + if ( $attributes['content'] ) { + printf( '

%s

', wp_kses_post( $attributes['content'] ) ); + } + + if ( $attributes['ctaText'] && ( $attributes['ctaLink'] || $attributes['embed'] ) || $attributes['ctaTwoText'] && $attributes['ctaTwoLink'] ) { + + print '
'; + + if ( $attributes['ctaText'] ) { + if ( $attributes['ctaLink'] && ! $attributes['embed'] ) { + printf( + '%s', + esc_url( $attributes['ctaLink'] ), + esc_html( wp_strip_all_tags( $attributes['ctaText'] ) ) + ); + } elseif ( $attributes['embed'] ) { + printf( + '
%s%s
', + esc_url( $attributes['ctaLink'] ), + esc_url( $attributes['embed'] ), + esc_html__( 'Play video', 'benenson' ), + esc_html( $attributes['ctaText'] ) + ); + } } - if ( $attributes['content'] ) { - printf( '

%s

', wp_kses_post( $attributes['content'] ) ); + if ( $attributes['ctaTwoText'] && $attributes['ctaTwoLink'] ) { + printf( + '%s', + esc_url( $attributes['ctaTwoLink'] ), + esc_html( wp_strip_all_tags( $attributes['ctaTwoText'] ) ) + ); } - ?> - -
- %s', - esc_url( $attributes['ctaLink'] ), - esc_html( wp_strip_all_tags( $attributes['ctaText'] ) ) - ); - } elseif ( $attributes['embed'] ) { - printf( - '
%s%s
', - esc_url( $attributes['ctaLink'] ), - esc_url( $attributes['embed'] ), - esc_html__( 'Play video', 'benenson' ), - esc_html( $attributes['ctaText'] ) - ); - } - } - - if ( $attributes['ctaTwoText'] && $attributes['ctaTwoLink'] ) { - printf( - '%s', - esc_url( $attributes['ctaTwoLink'] ), - esc_html( wp_strip_all_tags( $attributes['ctaTwoText'] ) ) - ); - } - ?> -
-
    <%s
', wp_kses_post( $attributes['bullets'] ) ); - } - ?> -
-
- - '; + + } + + if ( $attributes['bullets'] ) { + printf( '
    <%s
', wp_kses_post( $attributes['bullets'] ) ); + } + + print '
'; + return endspaceless( false ); } } diff --git a/src/scripts/app.js b/src/scripts/app.js index d6a7b76..2d4a71e 100755 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -4,7 +4,7 @@ import languageSelector from './modules/language-selector'; import searchToggle from './modules/search-toggle'; import mobileMenu from './modules/mobile-menu'; import headerPosition from './modules/header-position'; -import pagerHeroPosition from './modules/pageHero-position'; +import pageHeroPosition from './modules/pageHero-position'; // import fluidIframe from './modules/fluid-iframe'; import tweetAction from './modules/tweet-action'; import stickyNav from './modules/sticky-nav'; @@ -23,7 +23,7 @@ const App = () => { filterPosts(); languageSelector(); headerPosition(); - pagerHeroPosition(); + pageHeroPosition(); searchToggle(document.querySelector('.page-header:not(.page-header--sticky)')); mobileMenu(); // fluidIframe(); diff --git a/src/styles/layout/_page-hero-editor.scss b/src/styles/layout/_page-hero-editor.scss index 6ea06f2..b5f737f 100644 --- a/src/styles/layout/_page-hero-editor.scss +++ b/src/styles/layout/_page-hero-editor.scss @@ -43,6 +43,10 @@ p.page-heroContent { padding: 10px 20px 20px; } +.page-heroBullets ul { + margin-left: 20px !important; +} + .page-heroSize--small { min-height: 450px; } diff --git a/src/styles/layout/_page-hero.scss b/src/styles/layout/_page-hero.scss index 13ff260..e4a166b 100644 --- a/src/styles/layout/_page-hero.scss +++ b/src/styles/layout/_page-hero.scss @@ -88,6 +88,10 @@ p.page-heroContent { margin-left: 15px; } +.page-heroBullets ul { + margin-bottom: 0px; +} + .page-heroBullets > div { display: inline-block; background-color: rgba($color-black, .45);