Picking up from where I left off in v2.8, I know I’ll need to adjust edit.js so that it grabs the version number from the last published post. This function then increments that number, and outputs it via the Block.

const handleVersionTypeChange = (value) => {
	setAttributes({
		versionType: value,
		versionNumber: calculatedVersionNumber(value)
	});
};

return (
	<div { ...useBlockProps() }>
		<RadioControl
			label="Version type"
			help="Is this a major version or a minor update?"
			selected={versionType}
			options={[
				{ label: 'Major', value: 'major' },
				{ label: 'Minor', value: 'minor' },
			]}
			onChange={handleVersionTypeChange}
		/>
		<h2>{ 'Core Confidence v' + attributes.versionNumber }</h2>
	</div>
);

At first I thought I’d need to change the default: 2.8 key-value pair in my block.json file, and reference a constant there instead, but that’s not the way. I floated that idea to Chat GPT, and was pointed to a few articles on querying the latest post, grabbing its title, and extracting the version Number from that post’s title.

WordPress Core Data ~ getEntityRecords

Redux glossary

@wordpress/data package guide

@wordpress/element package

I read them and made notes, then started experimenting in edit.js file.

Using examples from Core Data selectors and building a list of pages, I first came up with this:

const postTypes = useSelect( ( select ) => { return select( coreDataStore ).getPostTypes( { per_page: 1, order: 'desc', 'orderby': 'date' } );

} );
const versionNumber = {post.title.rendered};

I knew that wasn’t right but it gave me a starting point to ask for guidance—and to think through the logic step by step. Once I had the correct useSelect syntax, the next hurdle was extracting only the version number from the rendered post title.

After a few more iterations, I landed here, and this now works:

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/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/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';
import { RadioControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store as coreDataStore } from '@wordpress/core-data';
import { useEffect, useRef } from '@wordpress/element';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */


export default function Edit({ attributes, setAttributes }) {
const postId = useSelect( s => s('core/editor').getCurrentPostId(), [] );
const lastPosts = useSelect( s => s(coreDataStore).getEntityRecords(
  'postType','post',
  { per_page:1, order:'desc', orderby:'date', status:'publish', exclude: postId ? [postId] : undefined }
), [postId]);

const lastPost = lastPosts?.[0];

const init = useRef(false);

useEffect(() => {
  if (!lastPost || init.current) return;
  const m = (lastPost.title?.rendered || '').match(/v\s*(\d+(?:\.\d+)?)/i);
  if (m) { setAttributes({ versionNumber: parseFloat(m[1]) }); init.current = true; }
}, [lastPost, setAttributes]);

const { versionType, versionNumber } = attributes;
const calculatedVersionNumber = (type) =>
  type === 'major' ? Math.floor(versionNumber) + 1 : +( (versionNumber + 0.1).toFixed(1) );

	const handleVersionTypeChange = (value) => {
		setAttributes({ versionType: value,
						versionNumber: calculatedVersionNumber(value) });
	};

		return (
		<div { ...useBlockProps() }>
		  <RadioControl
			label="Version type"
			help="Is this a major version or a minor update?"
			selected={versionType}
			options={[
			  { label: 'Major', value: 'major' },
			  { label: 'Minor', value: 'minor' },
			]}
			onChange={handleVersionTypeChange}
		  />
		  <h2>{ 'Core Confidence v' + versionNumber }</h2>
		  </div>
		);
	}

Now that it pulls the previous post title’s version number, the next step is adjusting my selector. Right now, the only way to increment “Minor” is to toggle to Major and back again — which results in a +1.1. What I want instead is both radio buttons unselected by default, so nothing increments until one is chosen.

I follow the dev.to community, and I remember reading an article there last year about habitually reading difficult material. That practice has been invaluable here. Reading things I don’t yet understand isn’t wasteful:

• First, it trains patience — just reading through carefully – taking the time to absorb and practice/experiment even while I read.
• Second, something almost magical happens when you follow a train of thought diligently. What once seemed impenetrable eventually becomes readable, and then understood.

Until next time!