Wolfram Embed

Go back to the list of Blocks

With the Wolfram embed block, you can embed Wolfram Notebook content into your posts and pages (deployed through the Wolfram Cloud). All of the Wolfram services are tied together by the Wolfram Language: Wolfram Cloud Notebooks are the cloud-hosted version of Wolfram Language Notebooks.

Example of a Wolfram embed:

Screenshot of  Wolfram

Steps to embed Wolfram Notebook content

  1. First, find the Wolfram Notebook content that you want to embed. If already embedded in a page, open the Notebook in the Wolfram Cloud to locate and copy its wolframcloud.com URL.
Screenshot of Wolfram and the correct URL to copy to use the embed block.
  1. Go to your post or page and add the Wolfram embed block. One way to do this is to press the “/” key to open the block inserter and type /wolfram.
Embed option for the Wolfram block to paste the URL.

Detailed instructions on adding blocks

  1. Paste the link into the text box and click the “Embed” button.
Embed option for the Wolfram block to paste the URL.

If the link can be successfully embedded into your post/page, you will see the preview in your block editor.

Preview of the embedded Wolfram video within the WordPress editor.

If you use a URL that can’t be embedded, the block displays the message: “Sorry, this content could not be embedded.” You will have two choices: try again with a different URL or convert it to a link.

Example of a URL that cannot be embedded. Two options are presented, try again or convert to link.
  1. Click the “Preview” button in the top right corner of the post/page to see how it will look on the front end.
Preview of the embedded Wolfram
 within the WordPress editor.

Block Toolbar

Besides the “Mover” and “Drag & Drop Handle”, the Block Toolbar for the Wolfram embed block shows four buttons:

  • Transform to – also the icon for the block
  • Change alignment
  • Edit URL, and
  • More options
Block Toolbar with options available for the Wolfram embed

Transform to

The first option will allow you to transform a Wolfram embed into a Paragraph. This will convert the Notebook content embedded to a link. Additionally, you can transform a Wolfram embed into Columns or into a Group.

Options to transform the Wolfram block to Paragraph, Columns or Group.

Transforming it into a Group will give you the ability to change the following, among other options:

  • The background color around the Wolfram embed
  • The padding, margin, and spacing dimensions of the block
  • The block border settings (width, style, color, and radius)

Note: you can preview what each block (paragraph, column, or group) will look like by hovering the mouse over each option.

Left image: Editor view of a Wolfram embed block as a group with color, dimension, and border settings. Right image: Front-end view of a Wolfram embed block with a border and a light grey background.

Change Alignment

  • None – Default alignment option
  • Wide width – Increase the width of the post beyond the content size
  • Full width – Extend the block to cover the full width of the screen
  • Align left – Make the block left-aligned
  • Align center – Make the block alignment centered
  • Align right – Make the block right-aligned
Alignment options for the Wolfram block: wide width, full width, align left, align center, and align right.

Edit URL

Via the edit URL, you can change the Wolfram embed URL in the embed block. Overwrite the existing URL and click on the “Embed” button on the right.

Editing the block URL via the "edit" option.

More Options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Block Settings

There are two additional options in the block settings sidebar: Media Settings and Advanced.

Media Settings

Via the Media Settings, you can control the behavior of the Wolfram embed block when viewed on the screen of a smaller device.

Media settings for the embed block with the toggle OFF for resizing on smaller devices.
Media settings for the embed block with the toggle ON for resizing on smaller devices.

The toggle switch turns on or off the resize functionality for smaller devices. The default setting is “on” or blue.

  • “On”: This embed will preserve its aspect ratio when the browser is resized. The toggle switch turns blue in the “On” position.
  • “Off”: This embed may not preserve its aspect ratio when the browser is resized.

Advanced

In the Advanced tab, you can add additional CSS class(es) to your block. This allows you to write custom CSS and style the block as you see fit.

Additional CSS Class(es) option for the Wolfram Embed block.

Changelog

  • Updated 2022-11-25
    • Removed redundant content
    • Aligned images for mobile view
    • Added alt text to images
  • Updated 2022-05-14
    • Added link to Wolfram Notebooks for more information
  • Created 2022-04-29

Was this article helpful? How could it be improved?

First published

Last updated