Update from vk-filter-search-pro

vektor-inc · Oct 15, 2024 · d6791b6 · d6791b6
1 parent 1428e42
commit d6791b6
Show file tree

Hide file tree

Showing 10 changed files with 1,780 additions and 1,274 deletions.
diff --git a/inc/filter-search/package/class-vk-filter-search.php b/inc/filter-search/package/class-vk-filter-search.php
@@ -719,11 +719,13 @@ public static function get_taxonomy_design_html( $taxonomy, $options = array() )
 
  public static function get_search_count_html( $options ) {
  $default = array(
- 'outer' => true,
- 'before_text' => __( 'Search Results:', 'vk-filter-search' ),
- 'after_text' => __( 'articles found.', 'vk-filter-search' ),
- 'number_color' => '',
- 'number_font_size' => '',
+ 'outer' => true,
+ 'before_text' => __( 'Search Results:', 'vk-filter-search' ),
+ 'after_text' => __( 'articles found.', 'vk-filter-search' ),
+ 'number_color' => '',
+ 'number_font_size' => '',
+ 'number_font_style' => '',
+ 'number_font_weight' => '',
  );
  $options = wp_parse_args( $options, $default );
 
@@ -750,6 +752,16 @@ public static function get_search_count_html( $options ) {
  $number_style .= 'font-size: ' . $options['number_font_size'] . ';';
  }
 
+ // 数字のフォントスタイル
+ if ( ! empty( $options['number_font_style'] ) ) {
+ $number_style .= 'font-style: ' . $options['number_font_style'] . ';';
+ }
+
+ // 数字のフォントウェイト
+ if ( ! empty( $options['number_font_weight'] ) ) {
+ $number_style .= 'font-weight: ' . $options['number_font_weight'] . ';';
+ }
+
  // スタイルの処理
  if ( ! empty( $number_style ) ) {
  $number_style = ' style="' . $number_style . '"';

diff --git a/inc/filter-search/package/src/editor.scss b/inc/filter-search/package/src/editor.scss
@@ -4,7 +4,7 @@
  --wp-components-color-accent : #cc1818;
  padding: 2em;
  color:var(--wp-components-color-accent);
-
+ border:1px solid var(--wp-components-color-accent);
  // ※ 公開画面と違ってユーザーに上書きしやすさは気にしなくて良いので、
  // readme.md の命名規則ではなく強めの指定をしています。
  .vkfs__alert-title {
@@ -16,7 +16,7 @@
  p:last-child {
  margin-bottom:0;
  }
- border:1px solid var(--wp-components-color-accent);
+
  }
 }
 

diff --git a/inc/filter-search/package/src/filter-search/editor.scss b/inc/filter-search/package/src/filter-search/editor.scss
@@ -48,15 +48,16 @@ html :where(.editor-styles-wrapper) {
  .vkfs {
 
  &__input-wrap {
+ //ulタグの横に余白ができるので追加
+ padding-left: 0;
+ margin: 0;
 
  label {
  //これがないとラベル内が崩れる
  display: block;
  margin-bottom: 0; // .editor-styles-wrapper label { .5rem 打ち消し
  }
- //ulタグの横に余白ができるので追加
- padding-left: 0;
- margin: 0;
+
  }
 
  &__labels {
@@ -171,15 +172,15 @@ html :where(.editor-styles-wrapper) {
  */
 
 .vkfs__alert {
-
+ border-radius: 3px;
  .editor-styles-wrapper & {
  padding: 1.5em;
  }
 
  .components-panel__body & {
  padding: 1em;
  }
- border-radius: 3px;
+
 
  &--danger {
  background-color: #f2dede;

diff --git a/inc/filter-search/package/src/search-result-count/block.json b/inc/filter-search/package/src/search-result-count/block.json
@@ -20,6 +20,12 @@
  },
  "numberFontSize": {
  "type": "string"
+ },
+ "numberFontStyle": {
+ "type": "string"
+ },
+ "numberFontWeight": {
+ "type": "string"
  }
  },
  "supports": {

diff --git a/inc/filter-search/package/src/search-result-count/edit.js b/inc/filter-search/package/src/search-result-count/edit.js
@@ -4,6 +4,7 @@ import {
  BaseControl,
  TextControl,
  FontSizePicker,
+ SelectControl,
 } from '@wordpress/components';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { select } from '@wordpress/data';
@@ -16,31 +17,112 @@ import {
 
 export default function SearchResultEdit( props ) {
  const { attributes, setAttributes } = props;
- const { beforeText, afterText, numberColor, numberFontSize } = attributes;
+ const {
+ beforeText,
+ afterText,
+ numberColor,
+ numberFontSize,
+ numberFontStyle,
+ numberFontWeight,
+ } = attributes;
  const blockProps = useBlockProps( {
  className: `vkfs-search-result-count`,
  } );
 
- const fontSizes = select( 'core/editor' ).getEditorSettings().fontSizes;
+ const fontSizes = select( 'core/block-editor' )?.getSettings()?.fontSizes;
+
+ /*
+ Github の Gutenberg の下記から取得
+ packages/block-editor/src/utils/format-font-style.js
+ packages/block-editor/src/utils/get-font-styles-and-weights.js
+ */
+ const FONT_STYLES = [
+ {
+ label: __( 'Regular', 'vk-filter-search' ),
+ value: 'normal',
+ },
+ {
+ label: __( 'Italic', 'vk-filter-search' ),
+ value: 'italic',
+ },
+ {
+ label: __( 'Oblique', 'vk-filter-search' ),
+ value: 'oblique',
+ },
+ ];
+ /*
+ Github の Gutenberg の下記から取得
+ packages/block-editor/src/utils/format-font-weight.js
+ packages/block-editor/src/utils/get-font-styles-and-weights.js
+ */
+ const FONT_WEIGHTS = [
+ {
+ label: __( 'Thin (100)', 'vk-filter-search' ),
+ value: '100',
+ },
+ {
+ label: __( 'Extra Light (200)', 'vk-filter-search' ),
+ value: '200',
+ },
+ {
+ label: __( 'Light (300)', 'vk-filter-search' ),
+ value: '300',
+ },
+ {
+ label: __( 'Regular (400)', 'vk-filter-search' ),
+ value: '400',
+ },
+ {
+ label: __( 'Medium (500)', 'vk-filter-search' ),
+ value: '500',
+ },
+ {
+ label: __( 'Semi Bold (600)', 'vk-filter-search' ),
+ value: '600',
+ },
+ {
+ label: __( 'Bold (700)', 'vk-filter-search' ),
+ value: '700',
+ },
+ {
+ label: __( 'Extra Bold (800)', 'vk-filter-search' ),
+ value: '800',
+ },
+ {
+ label: __( 'Black (900)', 'vk-filter-search' ),
+ value: '900',
+ },
+ {
+ label: __( 'Extra Black (1000)', 'vk-filter-search' ),
+ value: '1000',
+ },
+ ];
 
  const numberAttributes = {};
+ if ( ! numberAttributes.style ) {
+ numberAttributes.style = {};
+ }
 
  if ( numberFontSize ) {
- numberAttributes.style = { fontSize: numberFontSize };
+ numberAttributes.style.fontSize = numberFontSize;
  }
 
  if ( numberColor ) {
- if ( ! numberAttributes.style ) {
- numberAttributes.style = {};
- }
-
  if ( isHexColor( numberColor ) ) {
  numberAttributes.style.color = numberColor;
  } else {
  numberAttributes.className = `has-text-color has-${ numberColor }-color`;
  }
  }
 
+ if ( numberFontStyle ) {
+ numberAttributes.style.fontStyle = numberFontStyle;
+ }
+
+ if ( numberFontWeight ) {
+ numberAttributes.style.fontWeight = numberFontWeight;
+ }
+
  let editContent = '';
  const pathString = window.location.pathname;
  if (
@@ -97,9 +179,18 @@ export default function SearchResultEdit( props ) {
  }
  />
  </BaseControl>
+ </PanelBody>
+ <PanelBody
+ title={ __(
+ 'Search Result Count Number Setting',
+ 'vk-filter-search'
+ ) }
+ initialOpen={ true }
+ className="components-panel__vkfs-panel-body-number"
+ >
  <BaseControl
  id={ 'vkfs-pro-numberFontSize' }
- label={ __( 'Number Font Size', 'vk-filter-search' ) }
+ label={ __( 'Font Size', 'vk-filter-search' ) }
  >
  <FontSizePicker
  fontSizes={ fontSizes }
@@ -109,9 +200,33 @@ export default function SearchResultEdit( props ) {
  }
  />
  </BaseControl>
+ <BaseControl id={ 'vkfs-pro-numberFontStyle' }>
+ <SelectControl
+ label={ __( 'Font Style', 'vk-filter-search' ) }
+ value={ numberFontStyle }
+ options={ FONT_STYLES }
+ onChange={ ( value ) => {
+ setAttributes( {
+ numberFontStyle: value,
+ } );
+ } }
+ />
+ </BaseControl>
+ <BaseControl id={ 'vkfs-pro-numberFontWeight' }>
+ <SelectControl
+ label={ __( 'Font Weight', 'vk-filter-search' ) }
+ value={ numberFontWeight }
+ options={ FONT_WEIGHTS }
+ onChange={ ( value ) => {
+ setAttributes( {
+ numberFontWeight: value,
+ } );
+ } }
+ />
+ </BaseControl>
  <BaseControl
  id={ 'vkfs-pro-numberColor' }
- label={ __( 'Number Color', 'vk-filter-search' ) }
+ label={ __( 'Text Color', 'vk-filter-search' ) }
  >
  <AdvancedColorPalette
  schema={ 'numberColor' }

diff --git a/inc/filter-search/package/src/search-result-count/index.php b/inc/filter-search/package/src/search-result-count/index.php
@@ -26,10 +26,12 @@ function vkfs_search_result_count_render_callback( $attributes, $content ) {
  $attributes = wp_parse_args(
  $attributes,
  array(
- 'beforeText' => '',
- 'afterText' => '',
- 'numberColor' => '',
- 'numberFontSize' => '',
+ 'beforeText' => '',
+ 'afterText' => '',
+ 'numberColor' => '',
+ 'numberFontSize' => '',
+ 'numberFontStyle' => '',
+ 'numberFontWeight' => '',
  )
  );
 
@@ -41,11 +43,13 @@ function vkfs_search_result_count_render_callback( $attributes, $content ) {
  $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
  $options = array(
- 'outer' => false,
- 'before_text' => $attributes['beforeText'],
- 'after_text' => $attributes['afterText'],
- 'number_color' => $attributes['numberColor'],
- 'number_font_size' => $attributes['numberFontSize'],
+ 'outer' => false,
+ 'before_text' => $attributes['beforeText'],
+ 'after_text' => $attributes['afterText'],
+ 'number_color' => $attributes['numberColor'],
+ 'number_font_size' => $attributes['numberFontSize'],
+ 'number_font_style' => $attributes['numberFontStyle'],
+ 'number_font_weight' => $attributes['numberFontWeight'],
  );
 
  $content = sprintf(