wp-red-orbital/src/save.js

52 lines
1.3 KiB
JavaScript

/**
* Retrieves the translation of text.
*
* @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
*/
import { __ } from "@wordpress/i18n";
/**
* React hook that is used to mark the block wrapper element.
* It provides all the necessary props like the class name.
*
* @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
*/
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
/**
* The save function defines the way in which the different attributes should
* be combined into the final markup, which is then serialized by the block
* editor into `post_content`.
*
* @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
*
* @return {WPElement} Element to render.
*/
export default function save({ attributes }) {
const blockProps = useBlockProps.save({
className: "pulse",
});
return (
<div {...blockProps}>
<ul className={`orbiters clockwise`}>
<InnerBlocks.Content />
</ul>
<div className="inner-content">
<div className="image-hover">
<img
className="img"
src="https://via.placeholder.com/256x256/999/333"
/>
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
</div>
</div>
</div>
);
}