[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Overlay Profile
   4   * Slug: ipsum/overlay-profile
   5   * Categories: navigation
   6   * Keywords: menu, author, profile, subscribe
   7   * Block Types: core/template-part/navigation-overlay
   8   * Viewport width: 1280
   9   * Description: A navigation overlay led by the author. It has the author’s avatar, name and role over the menu, extra links, and a full-width subscribe button.
  10   *
  11   * @package Ipsum
  12   * @since Ipsum 1.0
  13   */
  14  
  15  ?>
  16  <!-- 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":"base","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
  17  <div class="wp-block-group has-base-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"}} -->
  18  <div class="wp-block-group alignwide"><!-- wp:navigation-overlay-close /--></div>
  19  <!-- /wp:group -->
  20  
  21  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Identity', 'Name of the identity group', 'ipsum' ); ?>"},"align":"wide","layout":{"type":"constrained"}} -->
  22  <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"} -->
  23  <figure class="wp-block-image aligncenter size-full is-resized"><img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/images/ipsum-portrait-tall.webp' ) ); ?>" 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>
  24  <!-- /wp:image -->
  25  
  26  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Name and Role', 'Name of the group holding the author name and role', 'ipsum' ); ?>"},"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
  27  <div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"textAlign":"center"}},"fontSize":"x-large"} -->
  28  <h2 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php esc_html_e( 'Lorem', 'ipsum' ); ?></h2>
  29  <!-- /wp:heading -->
  30  
  31  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Role', 'Name of the role paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}},"fontSize":"small","fontFamily":"manrope"} -->
  32  <p class="has-text-align-center has-manrope-font-family has-small-font-size"><?php esc_html_e( 'Teacher in Porto', 'ipsum' ); ?></p>
  33  <!-- /wp:paragraph --></div>
  34  <!-- /wp:group --></div>
  35  <!-- /wp:group -->
  36  
  37  <!-- 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"}} -->
  38  <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' ); ?>"} /-->
  39  
  40  <!-- 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"}} -->
  41  <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"}}} -->
  42  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'Subscribe', 'ipsum' ); ?></a></p>
  43  <!-- /wp:paragraph -->
  44  
  45  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Link', 'Name of the link paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}}} -->
  46  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'Say hello', 'ipsum' ); ?></a></p>
  47  <!-- /wp:paragraph -->
  48  
  49  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Link', 'Name of the link paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}}} -->
  50  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'See the dates', 'ipsum' ); ?></a></p>
  51  <!-- /wp:paragraph -->
  52  
  53  <!-- wp:paragraph {"metadata":{"name":"<?php echo esc_html_x( 'Link', 'Name of the link paragraph', 'ipsum' ); ?>"},"style":{"typography":{"textAlign":"center"}}} -->
  54  <p class="has-text-align-center"><a href="#"><?php esc_html_e( 'RSS', 'ipsum' ); ?></a></p>
  55  <!-- /wp:paragraph --></div>
  56  <!-- /wp:group --></div>
  57  <!-- /wp:group -->
  58  
  59  <!-- 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"}} -->
  60  <div class="wp-block-group alignwide"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"stretch"}} -->
  61  <div class="wp-block-buttons"><!-- wp:button {"style":{"dimensions":{"width":"var:preset|dimension|100"}}} -->
  62  <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>
  63  <!-- /wp:button --></div>
  64  <!-- /wp:buttons --></div>
  65  <!-- /wp:group --></div>
  66  <!-- /wp:group -->