Making WordPress.org

Changeset 13280


Ignore:
Timestamp:
03/05/2024 04:37:19 PM (4 months ago)
Author:
ryelle
Message:

Main: Update the homepage banner with the WordCamp Asia Q&A.

Props dansoschin.
See https://github.com/WordPress/wporg-main-2022/pull/397.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-main/front-page.php

    r13214 r13280  
    2828$user_class = $showcase ? 'col-12' : 'col-2';
    2929
    30 $banner_url = 'https://wordpress.org/state-of-the-word/';
    31 
    3230// The blocks code sets up the layout, but there is also inline CSS to refine things that aren't supported in classic themes.
    33 $banner_blocks = '<!-- wp:wporg/link-wrapper {"align":"full","layout":{"type":"constrained"}} -->
    34 <a class="wp-block-wporg-link-wrapper alignfull" style="background-color:#000000;color:#fff;font-size:16px;" href="' . $banner_url . '"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
    35 <div class="wp-block-group" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;gap:40px;max-width:50rem"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
    36 <figure class="wp-block-image size-full is-resized" style="flex-shrink: 0;flex-basis:45%"><img src="https://wordpress.org/files/2023/12/sotw-dotorg-drawer.png" alt="' . __( 'State of the Word', 'wporg' ) . '" /></figure>
     31$banner_blocks = '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"black","className":"wporg-homepage-banner","layout":{"type":"constrained"}} -->
     32<div class="wp-block-group alignfull wporg-homepage-banner has-black-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
     33<div class="wp-block-group"><!-- wp:image {"sizeSlug":"full","className":"is-resized"} -->
     34<figure class="wp-block-image size-full is-resized"><img src="https://wordpress.org/files/2024/03/wcasia-white-rectangle.png" alt="' . esc_attr__( 'WordCamp Asia 2024', 'wporg' ) . '"/></figure>
    3735<!-- /wp:image -->
    3836
    39 <!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6","fontSize":"14px"}}} -->
    40 <p style="font-size:14px;line-height:1.6">' . __( 'Watch State of the Word, the annual keynote address delivered by the WordPress project&#039;s co-founder, Matt Mullenweg, recorded on Dec. 11, live from Madrid.', 'wporg' ) . ' ↗</p>
     37<!-- wp:group {"layout":{"type":"default"}} -->
     38<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"lineHeight":1.6},"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}},"spacing":{"margin":{"top":"0"}}},"textColor":"white","fontSize":"small"} -->
     39<p class="has-white-color has-text-color has-link-color has-small-font-size" style="margin-top:0;line-height:1.6">' . __( 'Stream the Q&amp;A session with the WordPress project&#039;s co-founder, Matt Mullenweg, live from WordCamp Asia 2024. <br>March 9 at 7:30 a.m. UTC. <a href="https://wordpress.org/news/2024/03/wordcamp-asia-2024-qa-with-matt-mullenweg/">More details</a>.', 'wporg' ) . '</p>
     40<!-- /wp:paragraph -->
     41
     42<!-- wp:paragraph {"style":{"typography":{"lineHeight":1.6},"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}},"spacing":{"margin":{"bottom":"0"}}},"textColor":"white","fontSize":"small"} -->
     43<p class="has-white-color has-text-color has-link-color has-small-font-size" style="margin-bottom:0;line-height:1.6">' . __( '<a href="https://www.youtube.com/wordpress"><strong>Watch now ↗</strong></a>', 'wporg' ) . '</p>
    4144<!-- /wp:paragraph --></div>
    42 <!-- /wp:group --></a>
    43 <!-- /wp:wporg/link-wrapper -->';
     45<!-- /wp:group --></div>
     46<!-- /wp:group --></div>
     47<!-- /wp:group -->';
    4448
    4549\WordPressdotorg\skip_to( '#masthead' );
     
    5256
    5357    <style>
    54         .wp-block-wporg-link-wrapper {
    55             /* This property is used in the focus state, and should match (or at least compliment) the background color. */
    56             --wp--preset--color--blueberry-1: #0a4b78;
    57         }
    58         @media (max-width: 499px) {
    59             .wp-block-wporg-link-wrapper > .wp-block-group {
     58        /* Set a few custom properties as they appear in the parent theme. */
     59        .wporg-homepage-banner {
     60            --wp--preset--spacing--20: 20px;
     61            --wp--preset--spacing--30: 30px;
     62            --wp--preset--spacing--60: clamp(20px, calc(10vw - 40px), 80px);
     63            --wp--preset--font-size--small: 14px;
     64        }
     65        .wporg-homepage-banner a:hover {
     66            text-decoration: none;
     67        }
     68        .wporg-homepage-banner > * {
     69            margin-left: auto !important;
     70            margin-right: auto !important;
     71            max-width: 1160px;
     72        }
     73        .wporg-homepage-banner .is-layout-flex {
     74            gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60);
     75        }
     76        .wporg-homepage-banner .is-layout-flex > * {
     77            flex: 1;
     78        }
     79        @media (max-width: 650px) {
     80            .wporg-homepage-banner .is-layout-flex {
    6081                flex-direction: column;
    61                 gap: 16px !important;
    6282            }
    6383        }
Note: See TracChangeset for help on using the changeset viewer.