steroyle

// Using two contrasting box-shadow colours means it doesn't matter what background colour the element is over.

&:focus {
  outline: transparent;
  box-shadow: 0 0 0 2px black, /* inner colour here */
              0 0 0 4px white; /* outer colour here */
}

steroyle

SELECT 
  ID, post_title, post_content, post_name	
FROM
  wp_posts
WHERE
  post_content
LIKE
  '%wp:acf/block-name%'

steroyle

SELECT
  wp_postmeta.post_id,
  wp_postmeta.meta_value,
  wp_posts.post_title,
  wp_posts.post_name
FROM
  wp_postmeta
  INNER JOIN wp_posts ON wp_postmeta.post_id = wp_posts.ID
WHERE
  meta_key = "_wp_page_template"

steroyle

// displays blocks used on a page, helpful when trying to disable core/3rd party blocks from the block editor. Add to page template.
echo '<pre>' . esc_html( $post->post_content ) . '</pre>';

// remove Contact 7 plugin css and scripts. Add to functions.php
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

steroyle

Use the IE prefix:

display: -ms-grid;
-ms-grid-columns: 540px auto;

Although you can use "auto" in grid columes IE doesn't seem to take note of them and only uses up as much space as it needs. You have to give it a fixed pixel value instead.

In order for css grid child elements to display properly on the grid you need to give them specific positions as grid-area doesn't work:

.item-1 {

steroyle

<?php /* Template Name: Blog List Page */ ?>

<!-- create a WordPress Page and set this as the template -->

<?php get_header(); ?>

<?php
  $args = array(
    'post_type' => 'post',
    'post_status' => 'publish',

steroyle

<!-- Button -->
<button id="menu-button" class="hide-for-medium">Menu</button>

<!-- Menu -->
<div id="menu" class="show-for-medium">
  <ul>
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
  </ul>

steroyle

<?php
  $categories = get_categories(
    array(
      'taxonomy'     => 'product_cat',
      'orderby'      => 'name',
      'hide_empty'   => '0'
    )
  );
?>

steroyle

//convert kerning to letter spacing
@function calc-letter-spacing($kerningValue) {
  @return #{$kerningValue / 1000}em;
}