Recreating the CodePen Gutenberg Embed Block for Sanity.io

This tutorial demonstrates how to build a Sanity.io Portable Text editor block for embedding CodePens, mirroring a similar Gutenberg block. It leverages structured data for queryability and future-proofing. The process takes under seven minutes, showcasing the efficiency of Sanity's approach.

Recreating @chriscoyier’s CodePen Gutenberg Block for @sanity_io’s rich text editor in under 7 minutes! Structured data makes it queryable, future-proof, and easily integrable with any frontend. Link to Tweet

Let's get started.

Setting up Sanity Studio

This tutorial assumes basic JavaScript and React knowledge, along with Node.js and npm. Install the Sanity CLI:

npm install --global @sanity/cli

Create a new Sanity project using sanity init, selecting the "Blog" template. Navigate to the project directory (cd your-project-name) and start the development server with sanity start (press Ctrl C to stop).

Adding CodePen Schemas

Schemas define document types and input fields. Create /yourproject/schemas/codepen.js:

export default {
  name: "codepen",
  type: "object",
  title: "CodePen Embed",
  fields: [
    {
      name: "url",
      type: "url",
      title: "CodePen URL"
    },
    {
      name: "themeId",
      type: "string",
      title: "Theme ID (e.g., dark)",
      defaultValue: "dark"
    }
  ]
};

Import this schema into /yourproject/schemas/schema.js:

// ... other imports
import codepen from "./codepen"; // Import the CodePen schema

export default createSchema({
  // ... other schema types
  types: schemaTypes.concat([
    /* Your other schema types */
    codepen,
  ]),
});

Now, add the codepen type to your rich text field in /yourproject/schemas/blockContent.js:

export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    // ... existing types
    { type: "codepen" }
  ]
};

Restart the sanity start server. The CodePen field should now appear in your rich text editor.

Creating the CodePen Preview Component

Create a React preview component in /yourproject/schemas/codepen.js:

import React from "react";

const CodePenPreview = ({ value }) => {
  const { url, themeId = "dark" } = value;
  if (!url) return <div>Add a CodePen URL</div>;

  const [user, hash] = url.split("/").slice(-2); //Simplified URL parsing
  const embedUrl = `https://codepen.io/${user}/embed/${hash}?height=370&theme-id=${themeId}&default-tab=result`;

  return (
    <iframe src="%7BembedUrl%7D" style="{{" width: height: title="CodePen Embed" frameborder="0" allowfullscreen allowtransparency></iframe>
  );
};

export default {
  // ... existing schema definition
  preview: {
    select: { url: "url", themeId: "themeId" },
    component: CodePenPreview
  }
};

This component extracts the CodePen URL and theme, constructs the embed URL, and renders the iframe. Update the preview section in your codepen.js file to use this component.

Conclusion

This enhanced tutorial provides a more robust and efficient method for creating a custom CodePen embed block within Sanity.io's Portable Text editor. By using structured data and a custom preview component, you gain flexibility and maintainability. Further customization, such as adding more CodePen embed options, is easily achievable by extending the schema and preview component.

The above is the detailed content of Recreating the CodePen Gutenberg Embed Block for Sanity.io. For more information, please follow other related articles on the PHP Chinese website!