Merge pull request #11 from shimotmk/update_format

update format

functions.php

@@ -33,10 +33,7 @@
 require_once __DIR__ . '/includes/update/index.php';
 require_once __DIR__ . '/build/components/index.php';
 require_once __DIR__ . '/build/edit-post/index.php';
-require_once __DIR__ . '/build/format-library/bold/index.php';
-require_once __DIR__ . '/build/format-library/code/index.php';
-require_once __DIR__ . '/build/format-library/font-size/index.php';
-require_once __DIR__ . '/build/format-library/icon/index.php';
+require_once __DIR__ . '/build/format-library/index.php';
 require_once __DIR__ . '/build/utils/index.php';
 require_once __DIR__ . '/build/plugins/index.php';
 require_once __DIR__ . '/build/preferences/index.php';

readme.txt

@@ -10,6 +10,10 @@ License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
 == Changelog ==
 
+= 1.4.0 = 
+
+- Added Format Settings
+
 = 1.3.0 = 2024-12-30
 
 - Added Table of Contents block

src/format-library/block-toolbar/index.js

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { BlockFormatControls } from '@wordpress/block-editor';
+import { registerFormatType } from '@wordpress/rich-text';
+import { ToolbarItem, Slot, DropdownMenu } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+
+import { blockCategoryIcon } from '../../icons';
+
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
+const BlockToolbar = () => {
+	return (
+		<BlockFormatControls>
+			<Slot name={ `RichText.ToolbarControls.moneMenu` }>
+				{ ( fills ) => {
+					if ( ! fills.length ) {
+						return null;
+					}
+
+					const allProps = fills.map( ( [ { props } ] ) => props );
+					const hasActive = allProps.some(
+						( { isActive } ) => isActive
+					);
+
+					return (
+						<ToolbarItem>
+							{ ( toggleProps ) => (
+								<DropdownMenu
+									icon={ <Icon icon={ blockCategoryIcon } /> }
+									label={ __( 'Mone Menu', 'mone' ) }
+									toggleProps={ {
+										...toggleProps,
+										className: clsx(
+											toggleProps.className,
+											{ 'is-pressed': hasActive }
+										),
+										description: __(
+											'Displays more mone tools'
+										),
+									} }
+									controls={ fills.map(
+										( [ { props } ] ) => props
+									) }
+									popoverProps={ POPOVER_PROPS }
+								/>
+							) }
+						</ToolbarItem>
+					);
+				} }
+			</Slot>
+		</BlockFormatControls>
+	);
+};
+
+registerFormatType( 'mone/block-toolbar', {
+	title: __( 'Block Toolbar', 'mone' ),
+	tagName: 'block-toolbar',
+	className: null,
+	edit: BlockToolbar,
+} );

src/format-library/bold/bold.js

@@ -36,7 +36,7 @@ export const bag = {
 					onUse={ onToggle }
 				/>
 				<RichTextToolbarButton
-					// name="bold"
+					name="moneMenu"
 					icon={ formatBold }
 					title={ title }
 					onClick={ onClick }

src/format-library/font-size/index.js

@@ -45,6 +45,7 @@ function FontSizeEdit( {
 	return (
 		<>
 			<RichTextToolbarButton
+				name="moneMenu"
 				title={ __( 'Inline Font Size', 'mone' ) }
 				onClick={
 					hasFontSizeToChoose

src/format-library/icon/index.js

@@ -26,6 +26,7 @@ const InlineIcon = ( props ) => {
 	return (
 		<>
 			<RichTextToolbarButton
+				name="moneMenu"
 				title={ __( 'Icon', 'mone' ) }
 				icon={ fontSizeIcon }
 				onClick={ () => {

src/format-library/index.js

@@ -0,0 +1,7 @@
+import './block-toolbar';
+import './bold';
+import './code';
+import './font-size';
+import './icon';
+
+import './style.scss';

src/format-library/icon/index.php → src/format-library/index.php

@@ -1,63 +1,42 @@
 <?php
 /**
- * Icon
+ * Block_Toolbar
  *
  * @package mone
  */
 
-namespace Mone_Theme\Format_Library\Icon;
+namespace Mone_Theme\Format_Library;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
 
 /**
- * Enqueue_block_editor_icon
+ * Enqueue_block_editor_font_size
  */
-function enqueue_block_editor_icon() {
+function enqueue_block_editor_format() {
+	$asset_file = include MONE_TEMPLATE_DIR_PATH . '/build/format-library/index.asset.php';
 	if ( is_admin() ) {
-		$asset_file = include MONE_TEMPLATE_DIR_PATH . '/build/format-library/icon/index.asset.php';
-		wp_register_script(
-			'mone-icon-script',
-			MONE_TEMPLATE_DIR_URL . '/build/format-library/icon/index.js',
+		wp_enqueue_script(
+			'mone-format-script',
+			MONE_TEMPLATE_DIR_URL . '/build/format-library/index.js',
 			$asset_file['dependencies'],
 			$asset_file['version'],
 			true
 		);
-
-		wp_enqueue_script( 'mone-icon-script' );
-		$data_to_pass = array(
-			'some_value'  => 'This is a value from PHP',
-			'templateUri' => MONE_TEMPLATE_DIR_URL,
-		);
-		wp_localize_script( 'mone-icon-script', 'moneData', $data_to_pass );
 		wp_set_script_translations(
-			'mone-icon-script',
+			'mone-format-script',
 			'mone',
 			MONE_TEMPLATE_DIR_PATH . '/languages'
 		);
 	}
 
 	wp_enqueue_style(
-		'mone/icon',
-		MONE_TEMPLATE_DIR_URL . '/build/format-library/icon/style-index.css'
-	);
-}
-add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_block_editor_icon' );
-
-/**
- * Enqueue_style_icon
- */
-function register_format_icon() {
-	$asset_file = include MONE_TEMPLATE_DIR_PATH . '/build/format-library/icon/index.asset.php';
-	wp_enqueue_style(
-		'mone/icon',
-		MONE_TEMPLATE_DIR_URL . '/build/format-library/icon/style-index.css',
-		array(),
-		$asset_file['version']
+		'mone/format',
+		MONE_TEMPLATE_DIR_URL . '/build/format-library/style-index.css'
 	);
 }
-add_action( 'init', __NAMESPACE__ . '\register_format_icon' );
+add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_block_editor_format' );
 
 /**
  * Mark CSS safe if it contains a "--the-icon-svg: url(data:image/svg+xml" rule.

src/format-library/style.scss

@@ -0,0 +1,2 @@
+@import './code/style.scss';
+@import './icon/style.scss';