https://www.berea.edu/_next/static/chunks/pages/styleguide/custom-embed-45f27da5c6c33a83.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},r=(new e.Error).stack;r&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[r]="cefb6d6a-ad61-43ad-a7e4-ba28878c6ab0",e._sentryDebugIdIdentifier="sentry-dbid-cefb6d6a-ad61-43ad-a7e4-ba28878c6ab0")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5404],{97963:function(e,r,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styleguide/custom-embed",function(){return s(59744)}])},17171:function(e,r,s){"use strict";s.d(r,{Z:function(){return d}});var t=s(85893),a=s(67294),n=s(41664),l=s.n(n),o=s(17627);function d(e){let{title:r,description:s,filePath:n,bgClass:d,showEditor:i=!1,defaultData:c,linkTo:u,children:x}=e,[g,b]=(0,a.useState)(c?JSON.stringify(c,null,2):""),[h,m]=(0,a.useState)(c),[p,y]=(0,a.useState)(null);return(0,a.useEffect)(()=>{if(i&&g)try{let e=JSON.parse(g);m(e),y(null)}catch(e){y(e.message)}},[g,i]),(0,t.jsxs)("div",{className:"mb-6",children:[(0,t.jsxs)("div",{className:"mb-3 flex items-start justify-between",children:[(0,t.jsxs)("div",{className:"min-w-0",children:[(0,t.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:r}),s&&(0,t.jsx)("p",{className:"mt-0.5 text-sm text-gray-500",children:s}),n&&(0,t.jsx)("code",{className:"mt-1 block font-mono text-xs break-all text-gray-400",children:n})]}),u&&(0,t.jsxs)(l(),{href:u,className:"flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200",children:["View details",(0,t.jsx)("svg",{className:"h-3 w-3",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})]})]}),(0,t.jsxs)("div",{className:"rounded-lg border border-gray-300 shadow-lg",children:[(0,t.jsx)("div",{className:"rounded-t-lg bg-gray-800 px-3 py-2 text-xs text-gray-300",children:"Preview"}),(0,t.jsx)("div",{className:"relative min-h-[100px] ".concat(d||""),children:x(i?h:void 0)})]}),i&&c&&(0,t.jsx)(o.Z,{data:h,defaultData:c,onChange:(e,r)=>{m(e),b(r)},error:p})]})}},17627:function(e,r,s){"use strict";s.d(r,{Z:function(){return l}});var t=s(85893),a=s(67294),n=s(13464);function l(e){let{data:r,defaultData:s,onChange:l,error:o}=e,[d,i]=(0,a.useState)("tree"),[c,u]=(0,a.useState)(1),[x,g]=(0,a.useState)(r?JSON.stringify(r,null,2):JSON.stringify(s,null,2)),[b,h]=(0,a.useState)(null),m=(0,a.useRef)(JSON.parse(JSON.stringify(r||s)));(0,a.useEffect)(()=>{r&&(g(JSON.stringify(r,null,2)),m.current=JSON.parse(JSON.stringify(r)))},[r]);let p=e=>{g(e);try{let r=JSON.parse(e);h(null),m.current=JSON.parse(JSON.stringify(r)),l(r,e)}catch(e){h(e.message)}},y=()=>{let e=JSON.stringify(s,null,2);g(e),h(null),m.current=JSON.parse(JSON.stringify(s)),l(s,e)},f=o||b;return(0,t.jsxs)("div",{className:"mt-4 rounded-lg border border-gray-200 bg-white",children:[(0,t.jsxs)("div",{className:"grid gap-3 border-b border-gray-200 px-4 py-3 sm:flex sm:items-center sm:justify-between",children:[(0,t.jsx)("h4",{className:"text-sm font-medium text-gray-700",children:"Component Data"}),(0,t.jsxs)("div",{className:"flex flex-wrap items-center gap-2 sm:gap-4",children:[(0,t.jsxs)("div",{className:"flex rounded-md border border-gray-300 text-xs",children:[(0,t.jsx)("button",{onClick:()=>i("tree"),className:"px-3 py-1.5 transition-colors ".concat("tree"===d?"bg-gray-800 text-white":"bg-white text-gray-600 hover:bg-gray-50"," rounded-l-md"),children:"Tree"}),(0,t.jsx)("button",{onClick:()=>i("raw"),className:"px-3 py-1.5 transition-colors ".concat("raw"===d?"bg-gray-800 text-white":"bg-white text-gray-600 hover:bg-gray-50"," rounded-r-md border-l border-gray-300"),children:"Edit"})]}),"tree"===d?(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)("button",{onClick:()=>u(!1),className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Expand All"}),(0,t.jsx)("button",{onClick:()=>u(1),className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Collapse All"}),(0,t.jsx)("button",{onClick:y,className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Reset"})]}):(0,t.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,t.jsx)("button",{onClick:y,className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Reset"}),(0,t.jsx)("button",{onClick:()=>{try{let e=JSON.parse(x),r=JSON.stringify(e,null,2);g(r),h(null)}catch(e){}},className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Format"})]})]})]}),f&&(0,t.jsx)("div",{className:"border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-600",children:f}),(0,t.jsx)("div",{className:"p-4",children:"tree"===d?(0,t.jsx)("div",{className:"max-h-96 overflow-auto rounded bg-gray-50 p-3",children:(0,t.jsx)(n.Z,{value:m.current,collapsed:c,displayDataTypes:!1,onEdit:e=>(setTimeout(()=>{let e=JSON.stringify(m.current,null,2);g(e),l(JSON.parse(JSON.stringify(m.current)),e)},0),!0),style:{backgroundColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",fontSize:"12px"}})}):(0,t.jsx)("textarea",{value:x,onChange:e=>p(e.target.value),className:"h-64 w-full rounded border p-3 font-mono text-xs ".concat(f?"border-red-300 focus:border-red-500 focus:ring-red-500":"border-gray-300 focus:border-blue-500 focus:ring-blue-500"," focus:outline-none focus:ring-1"),spellCheck:!1})})]})}},59744:function(e,r,s){"use strict";s.r(r),s.d(r,{default:function(){return u}});var t=s(85893),a=s(1340),n=s(17171),l=s(82938);let o={attributes:{url:"https://www.youtube.com/watch?v=frpJ04Bgxkc",providerNameSlug:"youtube"}},d={attributes:{url:"https://youtu.be/frpJ04Bgxkc",providerNameSlug:"youtube"}},i={attributes:{url:"https://example.com/not-a-youtube-url",providerNameSlug:"youtube"}},c={attributes:{url:"https://www.youtube.com/embed/frpJ04Bgxkc",providerNameSlug:"embed-handler"}};function u(){return(0,t.jsxs)(a.ZP,{children:[(0,t.jsxs)("div",{className:"mb-8 max-w-3xl",children:[(0,t.jsx)("h1",{className:"mb-2 text-2xl font-bold",children:"CustomEmbed (CoreEmbed)"}),(0,t.jsxs)("p",{className:"text-gray-600",children:["The redesign"," ",(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"CoreEmbed"})," block renders content-editor-embedded YouTube videos. The iframe"," ",(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"src"})," is built by the"," ",(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"youtubeEmbed"})," helper (",(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"player"})," intent), so it always carries the GTM-required"," ",(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"enablejsapi=1"})," and"," ",(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"origin="})," params."]})]}),(0,t.jsx)(n.Z,{title:"watch?v= URL",description:"A standard content-editor paste (watch URL) resolves to the canonical embed iframe.",filePath:"wp-blocks/custom-core-blocks/next/CustomCoreEmbedBlock.tsx",bgClass:"bg-white",children:()=>(0,t.jsx)(l.Z,{...o})}),(0,t.jsx)(n.Z,{title:"youtu.be/ short URL",description:"A shortened share URL resolves to the same canonical embed.",bgClass:"bg-white",children:()=>(0,t.jsx)(l.Z,{...d})}),(0,t.jsx)(n.Z,{title:"Unrecognized URL (renders nothing)",description:"A URL with no extractable video id renders nothing (no broken iframe) and logs a dev-only console.warn.",bgClass:"bg-white",children:()=>(0,t.jsx)(l.Z,{...i})}),(0,t.jsx)(n.Z,{title:"providerNameSlug 'embed-handler'",description:"WordPress stores some YouTube embeds under the generic 'embed-handler' provider. Gating on the label alone dropped these; the block sniffs the URL too.",bgClass:"bg-white",children:()=>(0,t.jsx)("div",{"data-testid":"embed-handler-case",children:(0,t.jsx)(l.Z,{...c})})}),(0,t.jsx)(n.Z,{title:"Inside a flex-column Section (layout regression guard)",description:"Blocks render into flex-column Sections, where the block's mx-auto wrapper overrides align-items:stretch and shrink-wraps. Its content is an absolutely-positioned iframe with no intrinsic width, so without w-full the player collapses to 0x0 — in the DOM, invisible on screen. Playwright asserts real dimensions here.",bgClass:"bg-white",children:()=>(0,t.jsx)("section",{"data-testid":"embed-in-flex-column",className:"flex flex-col gap-6",children:(0,t.jsx)(l.Z,{...o})})}),(0,t.jsxs)("div",{className:"mt-8 max-w-3xl rounded-lg bg-gray-50 p-4",children:[(0,t.jsx)("h3",{className:"mb-2 font-semibold",children:"Files"}),(0,t.jsxs)("ul",{className:"space-y-1 text-sm text-gray-600",children:[(0,t.jsxs)("li",{children:[(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"wp-blocks/custom-core-blocks/next/CustomCoreEmbedBlock.tsx"})," ","— Redesign block"]}),(0,t.jsxs)("li",{children:[(0,t.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"helpers/youtubeEmbed.ts"})," ","— Embed URL helper (extractYouTubeId + youTubeEmbedUrl)"]})]})]})]})}}},function(e){e.O(0,[3464,1340,2888,9774,179],function(){return e(e.s=97963)}),_N_E=e.O()}]);