Forum Replies Created

Viewing 14 replies - 1 through 14 (of 14 total)
  • 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.

    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)

    That did the trick. Thank you so much!

    I’m looking to do the same thing. Did you ever find an answer?

    I had this same issue and ran across this thread while looking for an answer.

    The solution is to go to Appearance -> Menus, and click Screen Options in the top right of the screen. Put a check mark next to Product Categories, and a new Product Categories tab will appear in your menu options area. You will now be able to add categories to your menu just like you would add a normal page.

    ncompass–

    Thanks for the post. Did this method work for you?

    There may be a better way to do this, but here is how I go about it. Open your functions.php file and comment out the commands that generate the link you want to remove.

    To remove the Header link, comment out this line:
    add_custom_image_header( 'twentyeleven_header_style', 'twentyeleven_admin_header_style', 'twentyeleven_admin_header_image' );

    To remove the Background link, comment out this line:
    add_custom_background();

    To remove the Theme Options link. comment out this line:
    require( get_template_directory() . '/inc/theme-options.php' );

    I always keep the Widgets and Menus link, so I don’t know about those. I hope this helps.

    I just looked at your site, and it appears the problem has been resolved. However, what you described is a missing image problem. When Firefox encounters a broken image, it displays the “alt” attribute for the image. Most other browsers just show a small broken-image graphic, similar to what you described. I am guessing that one of the following occurred on your site:

    • The image was deleted from the server.
    • The image was moved to another location on the server.
    • The image tag’s “src” attribute was altered so that it pointed to the wrong location.

    I hope this helps.

    I can’t speak for anyone else, but I don’t post here unless I have read the documentation and FAQ’s. Extensively. If you have found an answer in them that I have missed, please share.

    dbaron

    (@dbaron)

    I would also like to be able to do this. If it is not possible now, it would sure be nice in future upgrade.

    Just a note from experience. I have used Collision Testimonials on several normal installations of WordPress. I usually get the error mentioned in the first post, but I have never had it cause me any problems on the live site.

    I recently started using it on a multisite installation. I had the same problem juarezpaf described, but I found a work around. I installed the plugin in Network Admin mode, but I didn’t network activate it. I went to each child site and activated it there, and it now works like a charm.

    I hope this helps!

    Thread Starter dbaron

    (@dbaron)

    You are very wise, Andrea_r. Instead of team pirate, you should be Team Yoda.

    Following your advice, I installed Collision Testimonials but didn’t network activate it. I went to the individual sites in my network and activated it there, and it works like a charm. Thanks for your help.

    @dbobzien: You are a life saver. Thanks so much for your great write up. It should be required reading for everyone using CF7 and GA!

    I posted a question on http://www.slickrflickr.com, and I got an answer in less than 24 hours. The instructions were clear and concise, and best of all, it fixed my problem!

    I am looking forward to more plugins from this developer.

Viewing 14 replies - 1 through 14 (of 14 total)