Post content in the Gutenberg block

  • Resolved Serge Gusev

    (@serge-gusev)


    2 years, 8 months ago

    Good day.

    For my Gutenberg block I need to show an another post’s content (it is created by Gutenberg too). I can read and show the content, but it is shown as a html text, not as result. For example:

    <strong>My post content</strong>

    instead of My post content

    This is my code:

    export default function Edit({ attributes, isSelected }) {

	const blockProps = useBlockProps();

	const data = useSelect((select) => {
		return select('core').getEntityRecords('postType', 'slider', { per_page: 1 });
	});

	// Has the request resolved?
	const isLoading = useSelect((select) => {
		return select('core/data').isResolving('core', 'getEntityRecords', [
			'postType', 'slider'
		]);
	});

	// Show the loading state if we're still waiting.
	if (isLoading) {
		return <h3>Loading...</h3>;
	}

	return (

		<div {...blockProps}>
		{
			data && data.map(({ content: { rendered: postContent } }) => {
				return <div>{postContent}</div>;
			})
		}
		</div>
	);
}

    Is there way to show already formatted content, not its html presentation?

    Thank you in advance,
    Serge

    • This topic was modified 2 years, 8 months ago by Serge Gusev.
Viewing 1 replies (of 1 total)
  • Thread Starter Serge Gusev

    (@serge-gusev)

    Found this solution myself (using wp.element.RawHTML):

    export default function Edit({ attributes, isSelected }) {

	const blockProps = useBlockProps();

	const data = useSelect((select) => {
		return select('core').getEntityRecords('postType', 'slider', { per_page: 1 });
	});

	// Has the request resolved?
	const isLoading = useSelect((select) => {
		return select('core/data').isResolving('core', 'getEntityRecords', [
			'postType', 'slider'
		]);
	});

	const el = wp.element.createElement;
	const htmlToElem = (html) => wp.element.RawHTML({ children: html });

	// Show the loading state if we're still waiting.
	if (isLoading) {
		return <h3>Loading...</h3>;
	}

	return (

		<div {...blockProps}>
		{
			data && data.map(({ content: { rendered: postContent } }) => {
				return <div>{htmlToElem(postContent)}</div>;
			})
		}
		</div>
	);
}
Viewing 1 replies (of 1 total)
  • The topic ‘Post content in the Gutenberg block’ is closed to new replies.