[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Overlay Profile
   4   * Slug: ipsum/overlay-profile
   5   * Categories: navigation
   6   * Block Types: core/template-part/navigation-overlay
   7   * Viewport width: 1280
   8   * Description: A navigation overlay led by the author — avatar, name and role over the menu, extra links, and a full-width subscribe button.
   9   *
  10   * @package Ipsum
  11   * @since Ipsum 1.0
  12   */
  13  
  14  ?>
  15  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Overlay Profile', 'Name of the profile overlay group', 'ipsum' ); ?>"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|50"},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"theme-1","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  16  <div class="wp-block-group has-theme-1-background-color has-background" style="min-height:100vh;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Action Bar', 'Name of the action bar group', 'ipsum' ); ?>"},"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
  17  <div class="wp-block-group alignwide"><!-- wp:navigation-overlay-close /--></div>
  18  <!-- /wp:group -->
  19  
  20  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Identity', 'Name of the identity group', 'ipsum' ); ?>"},"align":"wide","layout":{"type":"constrained"}} -->
  21  <div class="wp-block-group alignwide"><!-- wp:image {"width":"160px","aspectRatio":"1","scale":"cover","focalPoint":{"x":0.5,"y":1},"sizeSlug":"full","linkDestination":"none","align":"center"} -->
  22  <figure class="wp-block-image aligncenter size-full is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-portrait-tall.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php esc_attr_e( 'Portrait of the author.', 'ipsum' ); ?>" style="aspect-ratio:1;object-fit:cover;object-position:50% 100%;width:160px;height:auto"/></figure>
  23  <!-- /wp:image -->
  24  
  25  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Identity', 'Name of the identity group', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
  26  <div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"textAlign":"center"}},"fontSize":"x-large"} -->
  27  <h2 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php esc_html_e( 'Lorem', 'ipsum' ); ?></h2>
  28  <!-- /wp:heading -->
  29  
  30  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Role', 'Name of the role paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}},"fontSize":"small","fontFamily":"manrope"} -->
  31  <p class="has-text-align-center has-manrope-font-family has-small-font-size"><?php esc_html_e( 'Teacher in Porto', 'ipsum' ); ?></p>
  32  <!-- /wp:paragraph --></div>
  33  <!-- /wp:group --></div>
  34  <!-- /wp:group -->
  35  
  36  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Menu', 'Name of the menu group', 'ipsum' ); ?>"},"align":"full","style":{"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"constrained"}} -->
  37  <div class="wp-block-group alignfull"><!-- wp:navigation {"showSubmenuIcon":false,"submenuVisibility":"always","overlayMenu":"never","fontSize":"large","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"},"ariaLabel":"<?php echo esc_attr_x( 'Expanded', 'Accessible name of the navigation in the overlay', 'ipsum' ); ?>"} /-->
  38  
  39  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Extra Links', 'Name of the extra links group', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|20","margin":{"top":"var:preset|spacing|40"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
  40  <div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Link', 'Name of the link paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}}} -->
  41  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'Subscribe', 'ipsum' ); ?></a></p>
  42  <!-- /wp:paragraph -->
  43  
  44  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Link', 'Name of the link paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}}} -->
  45  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'Say hello', 'ipsum' ); ?></a></p>
  46  <!-- /wp:paragraph -->
  47  
  48  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Link', 'Name of the link paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}}} -->
  49  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'See the dates', 'ipsum' ); ?></a></p>
  50  <!-- /wp:paragraph -->
  51  
  52  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Link', 'Name of the link paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}}} -->
  53  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'RSS', 'ipsum' ); ?></a></p>
  54  <!-- /wp:paragraph --></div>
  55  <!-- /wp:group --></div>
  56  <!-- /wp:group -->
  57  
  58  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Overlay Footer', 'Name of the overlay footer group', 'ipsum' ); ?>"},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  59  <div class="wp-block-group alignwide"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"stretch"}} -->
  60  <div class="wp-block-buttons"><!-- wp:button {"style":{"dimensions":{"width":"var:preset|dimension|100"}}} -->
  61  <div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Get the next post!', 'ipsum' ); ?></a></div>
  62  <!-- /wp:button --></div>
  63  <!-- /wp:buttons --></div>
  64  <!-- /wp:group --></div>
  65  <!-- /wp:group -->