Handle custom media layout specs. (#2077)

## Summary:
We weren't taking into account custom ones, which was a problem if you wante to use a custom one!

Issue: XXX-XXXX

## Test plan:

Author: jeresig

Reviewers: #wonder-blocks

Required Reviewers:

Approved By:

Checks: ❌ codecov/project, ✅ Chromatic - Get results on non-draft regular PRs (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Chromatic - Build on non-draft regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ⏭  dependabot, ✅ gerald

Pull Request URL: #2077

.changeset/dull-jobs-leave.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-layout": patch
+---
+
+Handle custom media layout specs.

packages/wonder-blocks-layout/src/components/media-layout.tsx

@@ -11,12 +11,6 @@ import {
     MEDIA_MODAL_SPEC,
 } from "../util/specs";
 
-const queries = [
-    ...Object.values(MEDIA_DEFAULT_SPEC).map((spec: any) => spec.query),
-    ...Object.values(MEDIA_INTERNAL_SPEC).map((spec: any) => spec.query),
-    ...Object.values(MEDIA_MODAL_SPEC).map((spec: any) => spec.query),
-];
-
 const mediaQueryLists: {
     [key: string]: MediaQueryList;
 } = {};
@@ -213,6 +207,15 @@ class MediaLayoutInternal extends React.Component<CombinedProps, State> {
     render(): React.ReactNode {
         const {children, mediaSpec, ssrSize, overrideSize} = this.props;
 
+        const queries = [
+            ...Object.values(MEDIA_DEFAULT_SPEC).map((spec: any) => spec.query),
+            ...Object.values(MEDIA_INTERNAL_SPEC).map(
+                (spec: any) => spec.query,
+            ),
+            ...Object.values(MEDIA_MODAL_SPEC).map((spec: any) => spec.query),
+            ...Object.values(mediaSpec).map((spec: any) => spec.query),
+        ];
+
         // We need to create the MediaQueryLists during the first render in order
         // to query whether any of them match.
         if (!this.isServerSide()) {