Setting up TabPanel in custom block

  • I’m sure this is a noob question, but I could really use some help. I’m building a custom block and started with the @wordpress/create-block scaffolding. I need the block to display some tabbed data in both the block editor and on the published page. I found the TabPanel component in the documentation, and it seems to be perfect for what I’m looking for. I can get the tabs to appear and function just fine in the block editor, but I can’t figure out how to get it to show on the published page. I’m new to React, so a shove in the right direction would be most helpful.

    My edit.js file:

    import { useBlockProps } from '@wordpress/block-editor';
import { TabPanel } from '@wordpress/components';

export default function Edit({ attributes, setAttributes, isSelected, className }) {
	const onSelect = (tabName) => {
		console.log('Selecting tab', tabName);
	};
	const blockProps = useBlockProps();

	const MyTabPanel = () => (
		<TabPanel
			className="my-tab-panel"
			activeClass="active-tab"
			onSelect={onSelect}
			tabs={[
				{
					name: 'tab1',
					title: 'Tab 1',
					className: 'tab-one',
				},
				{
					name: 'tab2',
					title: 'Tab 2',
					className: 'tab-two',
				},
			]}
		>
			{(tab) => <p>{tab.title}</p>}
		</TabPanel>
	);

	return (
		<div {...blockProps} >
			{MyTabPanel()}
		</div>
	)
}

    Can someone show me what the save.js file should look like so that the tabbed component will display on the front end of the site?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter dbaron

    (@dbaron)

    Additional info: Whenever I try to add the TabPanel component to my save.js file, it throws the following error.

    Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

    It doesn’t matter what parameters I have on the TabPanel component; it will always throw this error. I’ve gone through the tips to fix the error with no success.

    I’m starting to wonder if the component has an inherent issue or if my local setup has something weird going on. Any suggestions are welcome!

    my save.js file;

    import { __ } from '@wordpress/i18n';

import { useBlockProps } from '@wordpress/block-editor';
import { TabPanel } from '@wordpress/components';

export default function save({ attributes }) {
	const { imgID, imgURL, imgAlt } = attributes;

	const onSelect = (tabName) => {
		console.log('Selecting tab', tabName);
	};

	return (
		<div {...useBlockProps.save()}>
			<TabPanel
				className="my-tab-panel"
				activeClass="active-tab"
				onSelect={onSelect}
				tabs={[
					{
						name: 'tab1',
						title: 'Tab 1',
						className: 'tab-one',
					},
					{
						name: 'tab2',
						title: 'Tab 2',
						className: 'tab-two',
					},
				]}
			>
				{(tab) => <p>{tab.title}</p>}
			</TabPanel>
		</div>
	);
}
    Thread Starter dbaron

    (@dbaron)

    I think I figured out my issue. It turns out that most of the components listed in Component Reference of the Block Editor Handbook can not be dropped directly into the ‘save:’ function of registerBlockType. The only exception I’ve found is RichText.Content. I’m guessing RichText.Content works because it only returns raw html, and that’s about all you can put in the save function.

    If anyone can confirm this or offer a better explanation, I’d appreciate it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Setting up TabPanel in custom block’ is closed to new replies.