diff --git a/src/editor/components/NavBlockList.js b/src/editor/components/NavBlockList.js
index 5beb3b3..5e2857b 100644
--- a/src/editor/components/NavBlockList.js
+++ b/src/editor/components/NavBlockList.js
@@ -22,10 +22,15 @@ const NavBlockList = () => {
 	// get styles for all blocks
 	const themeBlockStyles = getThemeOption( `styles.blocks`, themeConfig );
 
+	// sort the blocks by title
+	const orderedSchema = schemaBlocks.sort( ( a, b ) =>
+		a.title.localeCompare( b.title )
+	);
+
 	return (
 		<section>
 			<ul className="themer-nav-list">
-				{ schemaBlocks.map( ( block ) => {
+				{ orderedSchema.map( ( block ) => {
 					// get all styles for this block
 					const blockStyles = themeBlockStyles[ block.name ] || {};
 
diff --git a/src/editor/components/NavElementList.js b/src/editor/components/NavElementList.js
index ebe14c8..b88ce75 100644
--- a/src/editor/components/NavElementList.js
+++ b/src/editor/components/NavElementList.js
@@ -22,6 +22,11 @@ const NavElementList = ( { selector, route } ) => {
 	// get all valid elements from the schema
 	const schemaElements = getElementsFromSchema( schema );
 
+	// sort the elements by name
+	const orderedSchema = schemaElements.sort( ( a, b ) =>
+		a.name.localeCompare( b.name )
+	);
+
 	// get styles for all elements at this selector
 	const themeElementStyles =
 		getThemeOption( `styles.${ selector }`, themeConfig ) || {};
@@ -29,7 +34,7 @@ const NavElementList = ( { selector, route } ) => {
 	return (
 		<section>
 			<ul className="themer-nav-list">
-				{ schemaElements.map( ( element ) => {
+				{ orderedSchema.map( ( element ) => {
 					// get all styles for this element
 					const elementStyles =
 						themeElementStyles[ element.name ] || {};