WordPress.org
Get WordPress

Making WordPress.org

Changeset 11466


Ignore:
Timestamp:
01/24/2022 08:56:49 PM (3 years ago)
Author:
iandunn
Message:

Openverse: Fix 404s and embed height, send frame meta data

  • changes supplied path to lowercase to prevent 404 on case variations of ​https://wordpress.org/openverse
  • uses a fixed value of --header-height to make the iframe occupy 100vh - header height
  • adds functionality for sending meta-data from iframe to the parent window
  • updates test page (also adds tips for certain fields)
  • updates README.md and .wp-env.json to setup a dev environment

Props dhruvkb, sarayourfriend, zackkrida
Fixes #6041

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/.wp-env.json

    r11060 r11466  
    11{
     2  "core": "WordPress/WordPress#master",
    23  "themes": [
    34    ".",
    45    "../wporg"
    5   ]
     6  ],
     7  "mappings": {
     8    "wp-content/mu-plugins": "./wporg-mu-plugins/mu-plugins",
     9    "wp-content/mu-plugins/mu-plugins.php": "./mu-plugins.php"
     10  },
     11  "config": {
     12    "FEATURE_2021_GLOBAL_HEADER_FOOTER": true
     13  }
    614}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/README.md

    r11060 r11466  
    14141.  Build the parent theme WordPress.org theme.
    1515
    16     1.  `cd` into the parent theme directory at `../wporg` 
     16    1.  `cd` into the parent theme directory at `../wporg`
    1717        (i.e. `wordpress.org/wordpress.org/public_html/wp-content/themes/pub/wporg`).
    18     3.  Install all the required `npm` packages.
     18    2.  Install all the required `npm` packages.
    1919        ```bash
    2020        $ npm install
    … …  
    2727        (i.e. `wordpress.org/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse`).
    2828
    29 2.  You can choose to set up a new environment automatically or work in an
     292.  Build the MU plugins.
     30
     31    1.  Clone the `WordPress/wporg-mu-plugins` repo right into this directory.
     32        It's `.gitignored` so it shouldn't affect anything.
     33        ```bash
     34        $ git clone https://github.com/WordPress/wporg-mu-plugins.git
     35        ```
     36    2.  `cd` into this directory at `./wporg-mu-plugins`
     37        (i.e. `wordpress.org/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/wporg-mu-plugins`).
     38    3.  Install all the required `npm` packages.
     39        ```bash
     40        $ npm install
     41        ```
     42    4.  Build the theme assets.
     43        ```bash
     44        $ npm run build
     45        ```
     46    5.  `cd` back to the Openverse theme directory at `..`
     47        (i.e. `wordpress.org/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse`).
     48
     493.  You can choose to set up a new environment automatically or work in an
    3050    existing environment with manual setup.
    3151
    … …  
    5070    If you prefer a manual approach, you can also set up your own WordPress
    5171    instance and load both the `wporg` (parent) and `wporg-openverse` (child)
    52     themes into the `wp-content/themes` directory.
     72    themes into the `wp-content/themes` directory. You must also load the MU
     73    plugins and activate them using the `mu-plugins.php` file.
    5374
    54 3.  Activate and customize the theme.
     754.  Activate and customize the theme.
    5576
    5677    1.  Log into `/wp-admin`.
    … …  
    5980        and update the value in the 'Openverse embed' panel.
    6081
    61 4.  Test message passing.
     825.  Test message passing.
    6283
    6384    1.  Change the Openverse embed to

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/css/openverse.css

    r11253 r11466  
     1:root {
     2    --header-height: 117px;
     3}
     4
     5@media (min-width: 890px) {
     6    :root {
     7        --header-height: 104.453px;
     8    }
     9}
     10
     11
    112#openverse_embed {
    213    display: block;
    314
    415    width: 100%;
    5     height: var(--openverse-embed-height, 100vh); /* This will be updated by JavaScript */
     16    height: calc(100vh - var(--header-height));
    617
    718    border: none;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/header.php

    r11448 r11466  
    1414\WordPressdotorg\skip_to( '#content' );
    1515
    16 if ( FEATURE_2021_GLOBAL_HEADER_FOOTER ) {
    17     echo do_blocks( '<!-- wp:wporg/global-header /-->' );
    18 } else {
    19     get_template_part( 'header', 'wporg' );
    20 }
     16get_template_part( 'header', 'wporg' );
     17?>
    2118
    22 ?>
    2319<div id="page" class="site">
    2420    <div id="content" class="site-content">

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/js/iframe_nav.js

    r11060 r11466  
    22  const { pathname: path, search: query } = window.location; // starts with /
    33
    4   let iframePath = path.replace(openverseSubpath, '').replace(/^\/$/, ''); // Remove Openverse site subpath
     4  let iframePath = path
     5    .toLocaleLowerCase()
     6    .replace(openverseSubpath, '')
     7    .replace(/^\/$/, ''); // Remove Openverse site subpath
    58  iframePath = `${openverseUrl}${iframePath}${query}`; // Add domain and query
    69

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/js/message.js

    r11217 r11466  
    1 /**
    2  * Update the height of the nested `iframe` to match the height of the nested
    3  * element. This function sets the value of the `--openverse-embed-height` CSS
    4  * custom property (which is `100vh`, by default).
    5  *
    6  * @param {{ height: number }} value - the new dimensions of the iframe
    7  */
    8 function updateHeight(value) {
    9   const height = value.height;
    10   let heightProp;
    11   if (height) {
    12     heightProp = `${height}px`;
    13   } else {
    14     heightProp = '100vh';
    15   }
    16   document
    17     .documentElement
    18     .style
    19     .setProperty('--openverse-embed-height', heightProp);
    20 }
    21 
    221/**
    232 * Update the URL in the address bar when a page navigation occurs inside the
    … …  
    4625    document.title = value.title;
    4726  }
     27}
     28
     29/**
     30 * Set the meta attributes on the top-level document based on the meta tags
     31 * passed by the `iframe`.
     32 *
     33 * @param {{
     34 *   meta: [{
     35 *     name: string,
     36 *     content: string,
     37 *  }]
     38 * }} value - the meta data data supplied by the `iframe`
     39 */
     40function updateMeta(value) {
     41  value.meta.forEach((metaItem) => {
     42    let metaTag = document.head.querySelector(`meta[name="${metaItem.name}"]`);
     43    if (metaTag) {
     44      // Update the tag, if it already exists
     45      metaTag.content = metaItem.content;
     46    } else {
     47      // Create a new tag, otherwise
     48      metaTag = document.createElement('meta');
     49      metaTag.name = metaItem.name;
     50      metaTag.content = metaItem.content;
     51      document.head.appendChild(metaTag);
     52    }
     53  })
    4854}
    4955
    … …  
    96102  let handler;
    97103  switch (data.type) {
    98     case 'resize':
    99       handler = updateHeight;
    100       break;
    101104    case 'urlChange':
    102105      handler = updatePath;
     106      break;
     107    case 'setMeta':
     108      handler = updateMeta;
    103109      break;
    104110    case 'localeGet':

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-openverse/js/message_test.html

    r11217 r11466  
    1212        display: inline-block;
    1313        width: 5em;
     14      }
     15
     16      .tip {
     17        color: #555;
     18        font-size: 0.875em;
     19        margin-top: 2px;
     20      }
     21
     22      .tip::before {
     23        content: '💡'
    1424      }
    1525    </style>
    … …  
    6777        });
    6878
     79        document.forms.setMeta.addEventListener('submit', (event) => {
     80          event.preventDefault();
     81
     82          const metaInput = document.getElementById('metaInput');
     83          const meta = JSON.parse(metaInput.value);
     84
     85          const message = { meta };
     86          sendMessage('setMeta', message);
     87        });
     88
    6989        document.forms.localeGet.addEventListener('submit', (event) => {
    7090          event.preventDefault();
    … …  
    90110    <h1>Message exchange</h1>
    91111
    92     <h2>Test resize</h2>
    93     <form name="resize">
    94       <div class="row">
    95         <label for="height">Height*:</label>
    96         <input
    97             id="height"
    98             type="number"
    99             placeholder="Height (px)"
    100             required/>
    101         <code>{number}</code>
    102       </div>
    103       <div class="row">
    104         <button type="submit">
    105           Send message
    106         </button>
    107       </div>
    108     </form>
    109 
    110112    <h2>Test URL change</h2>
    111113    <form name="urlChange">
    … …  
    118120            required/>
    119121        <code>{string}</code>
     122        <p class="tip">Start the path with a '/'.</p>
    120123      </div>
    121124      <div class="row">
    … …  
    126129            placeholder="Title"/>
    127130        <code>{string?}</code>
     131        <p class="tip">Add the '- Openverse' suffix.</p>
     132      </div>
     133      <div class="row">
     134        <button type="submit">
     135          Send message
     136        </button>
     137      </div>
     138    </form>
     139
     140    <h2>Test meta tag passing</h2>
     141    <form name="setMeta">
     142      <div class="row">
     143        <label for="metaInput">Meta*:</label>
     144        <textarea
     145            id="metaInput"
     146            type="text"
     147            placeholder="Meta JSON"
     148            cols="24"
     149            rows="4"
     150            required></textarea>
     151        <code>JSON ~ [{name: string, content: string}]</code>
     152        <p class="tip">Try a 'theme-color' meta tag if your browser supports it.</p>
    128153      </div>
    129154      <div class="row">
Note: See TracChangeset for help on using the changeset viewer.