Skip to content

Commit

Permalink
feat: featured image support for inline popups
Browse files Browse the repository at this point in the history
  • Loading branch information
@adekbadek
adekbadek committed Jul 29, 2022
1 parent e32c9ec commit 35f7342
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 70 deletions.
92 changes: 43 additions & 49 deletions includes/class-newspack-popups-model.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1045,14 +1045,6 @@ public static function get_data_status_preview_attrs( $popup ) {
public static function generate_inline_popup( $popup ) {
global $wp;

do_action( 'newspack_campaigns_before_campaign_render', $popup );
$blocks = parse_blocks( $popup['content'] );
$body = '';
foreach ( $blocks as $block ) {
$body .= render_block( $block );
}
do_action( 'newspack_campaigns_after_campaign_render', $popup );

$element_id = self::get_uniqid();
$endpoint = self::get_reader_endpoint();
$display_title = $popup['options']['display_title'];
Expand All @@ -1066,6 +1058,38 @@ public static function generate_inline_popup( $popup ) {
$classes[] = $hide_border ? 'newspack-lightbox-no-border' : null;
$classes[] = $is_newsletter_prompt ? 'newspack-newsletter-prompt-inline' : null;

ob_start();
?>
<amp-layout
<?php echo self::get_access_attrs( $popup ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo self::get_data_status_preview_attrs( $popup ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
role="button"
tabindex="0"
style="<?php echo esc_attr( self::container_style( $popup ) ); ?>"
id="<?php echo esc_attr( $element_id ); ?>"
>
<?php echo self::generate_inner_content( $popup, $element_id ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</amp-layout>
<?php
return ob_get_clean();
}

/**
* Create HTML for the popup inner content.
*
* @param string $popup The popup object.
* @param string $element_id The element id.
*/
private static function generate_inner_content( $popup, $element_id ) {
do_action( 'newspack_campaigns_before_campaign_render', $popup );
$blocks = parse_blocks( $popup['content'] );
$body = '';
foreach ( $blocks as $block ) {
$body .= render_block( $block );
}
do_action( 'newspack_campaigns_after_campaign_render', $popup );

$analytics_events = self::get_analytics_events( $popup, $body, $element_id );
if ( ! empty( $analytics_events ) ) {
add_filter(
Expand All @@ -1076,23 +1100,21 @@ function ( $evts ) use ( $analytics_events ) {
);
}

$has_featured_image = has_post_thumbnail( $popup['id'] );
ob_start();
?>
<?php self::insert_event_tracking( $popup, $body, $element_id ); ?>
<amp-layout
<?php echo self::get_access_attrs( $popup ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo self::get_data_status_preview_attrs( $popup ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
role="button"
tabindex="0"
style="<?php echo esc_attr( self::container_style( $popup ) ); ?>"
id="<?php echo esc_attr( $element_id ); ?>"
>
<?php if ( ! empty( $popup['title'] ) && $display_title ) : ?>
<?php if ( $has_featured_image ) : ?>
<div class="newspack-popup__featured-image">
<?php echo get_the_post_thumbnail( $popup['id'], 'large' ); ?>
</div>
<?php endif; ?>
<div class="newspack-popup__content">
<?php if ( ! empty( $popup['title'] ) && $popup['options']['display_title'] ) : ?>
<h1 class="newspack-popup-title"><?php echo esc_html( $popup['title'] ); ?></h1>
<?php endif; ?>
<?php echo do_shortcode( $body ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</amp-layout>
</div>
<?php self::insert_event_tracking( $popup, $body, $element_id ); ?>
<?php
return ob_get_clean();
}
Expand All @@ -1118,14 +1140,6 @@ public static function generate_popup( $popup ) {
return self::generate_inline_popup( $popup );
}

do_action( 'newspack_campaigns_before_campaign_render', $popup );
$blocks = parse_blocks( $popup['content'] );
$body = '';
foreach ( $blocks as $block ) {
$body .= render_block( $block );
}
do_action( 'newspack_campaigns_after_campaign_render', $popup );

$element_id = self::get_uniqid();
$endpoint = self::get_reader_endpoint();
$display_title = $popup['options']['display_title'];
Expand All @@ -1147,17 +1161,8 @@ public static function generate_popup( $popup ) {
$wrapper_classes[] = 'publish' !== $popup['status'] ? 'newspack-inactive-popup-status' : null;
$is_scroll_triggered = 'scroll' === $popup['options']['trigger_type'];

add_filter(
'newspack_analytics_events',
function ( $evts ) use ( $popup, $body, $element_id ) {
return array_merge( $evts, self::get_analytics_events( $popup, $body, $element_id ) );
}
);

$animation_id = 'a_' . $element_id;

$has_featured_image = has_post_thumbnail( $popup['id'] );

ob_start();
?>
<amp-layout
Expand All @@ -1170,17 +1175,7 @@ class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
>
<div class="<?php echo esc_attr( implode( ' ', $wrapper_classes ) ); ?>" data-popup-status="<?php echo esc_attr( $popup['status'] ); ?>" style="<?php echo ! $hide_border ? esc_attr( self::container_style( $popup ) ) : ''; ?>">
<div class="newspack-popup" style="<?php echo $hide_border ? esc_attr( self::container_style( $popup ) ) : ''; ?>">
<?php if ( $has_featured_image ) : ?>
<div class="newspack-popup__featured-image">
<?php echo get_the_post_thumbnail( $popup['id'], 'large' ); ?>
</div>
<?php endif; ?>
<div class="newspack-popup__content">
<?php if ( ! empty( $popup['title'] ) && $display_title ) : ?>
<h1 class="newspack-popup-title"><?php echo esc_html( $popup['title'] ); ?></h1>
<?php endif; ?>
<?php echo do_shortcode( $body ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<?php echo self::generate_inner_content( $popup, $element_id ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<form class="popup-dismiss-form <?php echo esc_attr( self::get_form_class( 'dismiss', $element_id ) ); ?> popup-action-form <?php echo esc_attr( self::get_form_class( 'action', $element_id ) ); ?>"
method="POST"
action-xhr="<?php echo esc_url( $endpoint ); ?>"
Expand Down Expand Up @@ -1252,7 +1247,6 @@ class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
</script>
</amp-animation>
<?php
self::insert_event_tracking( $popup, $body, $element_id );
if ( self::is_overlay( $popup ) && has_block( 'newspack-blocks/homepage-articles', $popup['content'] ) ) {
add_filter( 'newspack_blocks_homepage_enable_duplication', '__return_false' );
add_filter( 'newspack_blocks_homepage_shown_rendered_posts', '__return_false' );
Expand Down
50 changes: 29 additions & 21 deletions src/view/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,27 +84,6 @@ $width__tablet: 782px;
padding: #{2 * $overlay__gap};
}
}
&__featured-image {
display: none;
max-height: #{13 * $overlay__gap};
overflow: hidden;
@media only screen and ( min-width: $width__tablet ) {
align-items: center;
display: flex;
justify-content: center;
}
}

&__content,
.wp-block-column {
> *:first-child {
margin-top: 0;
}

> *:last-child {
margin-bottom: 0;
}
}
}

&.newspack-lightbox-no-border {
Expand Down Expand Up @@ -371,6 +350,10 @@ $width__tablet: 782px;
border: none;
padding: 0;
}

.newspack-popup__featured-image {
margin-bottom: 0.75rem;
}
}

.newspack-inactive-popup-status {
Expand Down Expand Up @@ -401,6 +384,31 @@ $width__tablet: 782px;
}
}

// Universal styles for all popups.
.newspack-popup {
&__featured-image {
display: none;
max-height: #{13 * $overlay__gap};
overflow: hidden;
@media only screen and ( min-width: $width__tablet ) {
align-items: center;
display: flex;
justify-content: center;
}
}

&__content,
.wp-block-column {
> *:first-child {
margin-top: 0;
}

> *:last-child {
margin-bottom: 0;
}
}
}

// This is needed for the scroll-triggered popups to function properly.
// (#page-position-marker element is an absolutely-placed child of .entry-content)
/* stylelint-disable-next-line no-duplicate-selectors */
Expand Down

0 comments on commit 35f7342

Please sign in to comment.