Skip to content

Commit

Permalink
Update banners on Premium page
Browse files Browse the repository at this point in the history
  • Loading branch information
Joost de Valk committed Oct 30, 2019
1 parent aca33f3 commit 4fd5c80
Show file tree
Hide file tree
Showing 18 changed files with 152 additions and 235 deletions.
17 changes: 9 additions & 8 deletions admin/views/licenses.php
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
'title' => 'Local SEO',
'display_title' => 'Stop losing customers to other local businesses',
'desc' => __( 'Rank better locally and in Google Maps, without breaking a sweat!', 'wordpress-seo' ),
'image' => plugins_url( 'images/extensions-local.png?v=' . WPSEO_VERSION, WPSEO_FILE ),
'image' => plugins_url( 'images/local_plugin_assistant.svg?v=' . WPSEO_VERSION, WPSEO_FILE ),
'benefits' => array(
__( 'Get better search results in local search', 'wordpress-seo' ),
__( 'Easily insert Google Maps, a store locator, opening hours and more', 'wordpress-seo' ),
Expand All @@ -54,7 +54,7 @@
'title' => 'Video SEO',
'display_title' => 'Start ranking better for your videos',
'desc' => __( 'Optimize your videos to show them off in search results and get more clicks!', 'wordpress-seo' ),
'image' => plugins_url( 'images/extensions-video.png?v=' . WPSEO_VERSION, WPSEO_FILE ),
'image' => plugins_url( 'images/video_plugin_assistant.svg?v=' . WPSEO_VERSION, WPSEO_FILE ),
'benefits' => array(
__( 'Show your videos in Google Videos', 'wordpress-seo' ),
__( 'Enhance the experience of sharing posts with videos', 'wordpress-seo' ),
Expand All @@ -69,7 +69,7 @@
'title' => 'News SEO',
'display_title' => 'Everything you need for Google News',
'desc' => __( 'Are you in Google News? Increase your traffic from Google News by optimizing for it!', 'wordpress-seo' ),
'image' => plugins_url( 'images/extensions-news.png?v=' . WPSEO_VERSION, WPSEO_FILE ),
'image' => plugins_url( 'images/news_plugin_assistant.svg?v=' . WPSEO_VERSION, WPSEO_FILE ),
'benefits' => array(
__( 'Optimize your site for Google News', 'wordpress-seo' ),
__( 'Immediately pings Google on the publication of a new post', 'wordpress-seo' ),
Expand All @@ -89,7 +89,7 @@
'display_title' => 'Make your products stand out in Google',
/* translators: %1$s expands to Yoast SEO */
'desc' => sprintf( __( 'Seamlessly integrate WooCommerce with %1$s and get extra features!', 'wordpress-seo' ), 'Yoast SEO' ),
'image' => plugins_url( 'images/extensions-woo.png?v=' . WPSEO_VERSION, WPSEO_FILE ),
'image' => plugins_url( 'images/woo_plugin_assistant.svg?v=' . WPSEO_VERSION, WPSEO_FILE ),
'benefits' => array(
sprintf( __( 'Improve sharing on Facebook and Pinterest', 'wordpress-seo' ) ),
/* translators: %1$s expands to Yoast, %2$s expands to WooCommerce */
Expand Down Expand Up @@ -248,16 +248,17 @@ class="yoast-link--more-info">

<?php foreach ( $extensions as $slug => $extension ) : ?>
<section class="yoast-promoblock secondary yoast-promo-extension">
<img alt="" width="280" height="147" src="<?php echo esc_attr( $extension->get_image() ); ?>"/>
<h3><?php echo esc_html( $extension->get_display_title() ); ?></h3>

<h3>
<img alt="" width="100" height="100" src="<?php echo esc_attr( $extension->get_image() ); ?>"/>
<?php echo esc_html( $extension->get_display_title() ); ?>
</h3>
<ul class="yoast-list--usp">
<?php foreach ( $extension->get_benefits() as $benefit ) : ?>
<li><?php echo esc_html( $benefit ); ?></li>
<?php endforeach; ?>
</ul>

<div class="yoast-button-container">
<div class="yoast-button-container">
<?php if ( $extension_list->is_installed( $extension->get_title() ) ) : ?>
<div class="yoast-button yoast-button--noarrow yoast-button--extension yoast-button--extension-installed"><?php esc_html_e( 'Installed', 'wordpress-seo' ); ?></div>

Expand Down
194 changes: 114 additions & 80 deletions admin/views/sidebar.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,113 +10,147 @@

?>
<div class="wpseo_content_cell" id="sidebar-container">
<div id="sidebar" class="yoast-sidebar">
<div class="wpseo_content_cell_title yoast-sidebar__title">
<div id="sidebar" class="yoast-sidebar">
<div class="wpseo_content_cell_title yoast-sidebar__title">
<?php
/* translators: %1$s expands to Yoast */
printf( esc_html__( '%1$s recommendations for you', 'wordpress-seo' ), 'Yoast' );
?>
</div>
<div class="yoast-sidebar__section">
<h2>
</div>
<div class="yoast-sidebar__section">
<h2>
<?php
/* translators: %s expands to Yoast SEO Premium */
printf( esc_html__( 'Upgrade to %s', 'wordpress-seo' ), 'Yoast SEO Premium' );
?>
</h2>
<ul>
<li><strong><?php esc_html_e( 'Rank better with synonyms & related keyphrases', 'wordpress-seo' ); ?></strong></li>
<li><strong><?php esc_html_e( 'Preview your page in Facebook and Twitter', 'wordpress-seo' ); ?></strong></li>
<li><strong><?php esc_html_e( 'Get real-time suggestions for internal links', 'wordpress-seo' ); ?></strong></li>
<li><strong><?php esc_html_e( 'No more dead links a.k.a. 404 pages', 'wordpress-seo' ); ?></strong></li>
<li><strong><?php esc_html_e( '24/7 email support', 'wordpress-seo' ); ?></strong></li>
<li><strong><?php esc_html_e( 'No ads!', 'wordpress-seo' ); ?></strong></li>
</ul>
</h2>
<ul>
<li>
<strong><?php esc_html_e( 'Rank better with synonyms & related keyphrases', 'wordpress-seo' ); ?></strong>
</li>
<li>
<strong><?php esc_html_e( 'Preview your page in Facebook and Twitter', 'wordpress-seo' ); ?></strong>
</li>
<li>
<strong><?php esc_html_e( 'Get real-time suggestions for internal links', 'wordpress-seo' ); ?></strong>
</li>
<li><strong><?php esc_html_e( 'No more dead links a.k.a. 404 pages', 'wordpress-seo' ); ?></strong></li>
<li><strong><?php esc_html_e( '24/7 email support', 'wordpress-seo' ); ?></strong></li>
<li><strong><?php esc_html_e( 'No ads!', 'wordpress-seo' ); ?></strong></li>
</ul>

<a id="wpseo-premium-button" class="yoast-button-upsell" href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jj' ); ?>" target="_blank">
<a id="wpseo-premium-button" class="yoast-button-upsell"
href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jj' ); ?>" target="_blank">
<?php
/* translators: %s expands to Yoast SEO Premium */
printf( esc_html__( 'Get %s', 'wordpress-seo' ), 'Yoast SEO Premium' );
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
echo '<span aria-hidden="true" class="yoast-button-upsell__caret"></span>';
?>
</a><br>
</div>
<div class="yoast-sidebar__product-list">
<div class="yoast-sidebar__section">
<h2>
</a><br>
</div>
<div class="yoast-sidebar__product-list">
<div class="yoast-sidebar__section">
<h2>
<?php
/* translators: %s expands to Yoast SEO */
printf( esc_html__( 'Extend %s', 'wordpress-seo' ), 'Yoast SEO' );
/* translators: %s expands to Yoast SEO */
printf( esc_html__( 'Extend %s', 'wordpress-seo' ), 'Yoast SEO' );
?>
</h2>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jq' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/Local_SEO_Icon.svg' ); ?>" alt="">
<strong>Local SEO</strong>
</h2>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jq' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/local_plugin_assistant.svg' ); ?>"
alt="">
<strong>Be found on Google Maps!</strong>
<?php
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
?>
</a><br>
<?php esc_html_e( 'Be found in Google Maps and local results.', 'wordpress-seo' ); ?>
</p>
</div>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jo' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/Video_SEO_Icon.svg' ); ?>" alt="">
<strong>Video SEO</strong>
</a><br>
<?php esc_html_e( 'Our Local SEO plugin will help you rank in Google Maps and local results.', 'wordpress-seo' ); ?>
</p>
</div>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jo' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/video_plugin_assistant.svg' ); ?>" class="alignleft"
alt="">
<strong>Rank in Google Video</strong>
<?php
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
?>
</a><br>
<?php esc_html_e( 'Be found in Google Video search and enhance your video sharing on social media.', 'wordpress-seo' ); ?>
</p>
</div>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jp' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/Woo_SEO_Icon.svg' ); ?>" alt="">
<strong>WooCommerce SEO</strong>
</a><br>
<?php esc_html_e( 'Make sure your videos rank and are easy to share with our Video SEO plugin.', 'wordpress-seo' ); ?>
</p>
</div>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jp' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/woo_plugin_assistant.svg' ); ?>"
alt="">
<strong>WooCommerce SEO</strong>
<?php
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
?>
</a><br>
</a><br>
<?php esc_html_e( 'Optimize your shop\'s SEO and sell more products!', 'wordpress-seo' ); ?>
</p>
</div>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jr' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/News_SEO_Icon.svg' ); ?>" alt="">
<strong>News SEO</strong>
</p>
</div>
<div class="wp-clearfix">
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jr' ); ?>" target="_blank">
<img src="<?php echo esc_url( $wpseo_plugin_dir_url . 'images/news_plugin_assistant.svg' ); ?>" class="alignleft"
alt="">
<strong>Rank in Google News</strong>
<?php
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
?>
</a><br>
<?php esc_html_e( 'Optimize your site for Google News.', 'wordpress-seo' ); ?>
</p>
</div>
</div>
</div>
<div class="yoast-sidebar__section">
<strong><?php esc_html_e( 'Remove these ads?', 'wordpress-seo' ); ?></strong>
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jy' ); ?>" target="_blank">
</a><br>
<?php esc_html_e( 'Start to optimize your site for Google News traffic today!', 'wordpress-seo' ); ?>
</p>
</div>
</div>
</div>
<div class="yoast-sidebar__section">
<h2>
<?php
esc_html_e( 'Learn SEO', 'wordpress-seo' );
?>
</h2>
<p>
<?php
$url = WPSEO_Shortlinker::get( 'https://yoa.st/3t6' );

/* translators: %1$s expands to Yoast SEO academy, which is a clickable link. */
printf( esc_html__( 'Want to learn SEO from Team Yoast? Check out our %1$s!', 'wordpress-seo' ), '<a href="' . $url . '"><strong>Yoast SEO academy</strong></a>' );
echo '<br/>';
esc_html_e( 'We have both free and premium online courses to learn everything you need to know about SEO.', 'wordpress-seo' );
?>
</p>
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/3t6' ); ?>" target="_blank"><?php
/* translators: %1$s expands to Yoast SEO academy */
printf( esc_html__( 'Check out %1$s', 'wordpress-seo' ), 'Yoast SEO academy' );
?></a>
</p>
</div>
<div class="yoast-sidebar__section">
<h2><?php esc_html_e( 'Remove these ads?', 'wordpress-seo' ); ?></h2>
<p>
<a href="<?php WPSEO_Shortlinker::show( 'https://yoa.st/jy' ); ?>" target="_blank">
<?php
/* translators: %s expands to Yoast SEO Premium */
printf( esc_html__( 'Upgrade to %s', 'wordpress-seo' ), 'Yoast SEO Premium' );
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
/* translators: %s expands to Yoast SEO Premium */
printf( esc_html__( 'Upgrade to %s', 'wordpress-seo' ), 'Yoast SEO Premium' );
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Reason: $new_tab_message is properly escaped.
echo $new_tab_message;
?>
</a>
</p>
</div>
</div>
</a>
</p>
</div>
</div>
</div>
10 changes: 4 additions & 6 deletions css/src/extensions.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
margin: 0;
border: 0;
padding-bottom: 1.88rem;
border-top: 1px solid $scheme-academy-secondary;
position: relative;
}

Expand Down Expand Up @@ -125,17 +124,17 @@
// Then we style it as flex container to layout its content in a vertical flexbox.
display: flex;
flex-direction: column;
background-color: transparent;
border-color: $scheme-academy-secondary;
background-color: #fff;
margin-left: $gutter;

&:first-child {
margin-left: 0;
}

img {
width: 100%;
height: auto;
float: right;
width: 100px;
height: 100px;
margin-bottom: 0.8rem;

@media screen and (max-width: 900px) {
Expand Down Expand Up @@ -214,7 +213,6 @@

&-link--license,
&-link--more-info {
font-family: $font-stack-default;
color: $color-pink-dark;
font-weight: 600;
}
Expand Down
4 changes: 2 additions & 2 deletions css/src/yoastcom/0-settings/_type.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
$font-stack-default: 'Open Sans', Arial, sans-serif;
$font-stack-article: 'Merriweather', Georgia, serif;
$font-stack-default: Arial, sans-serif;
$font-stack-article: Georgia, serif;
$font-stack-icon: 'FontAwesome', 'Open Sans', Arial, sans-serif;

$font-size-default: 1em;
Expand Down
Loading

0 comments on commit 4fd5c80

Please sign in to comment.