From 50ba79e5061d85ebdae7c3fbf43309e156c2d2aa Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Wed, 20 Sep 2023 15:37:26 +0300 Subject: [PATCH] feat: add RankMath for Posts block --- inc/render/class-posts-grid-block.php | 12 + src/blocks/blocks/posts/block.json | 4 + src/blocks/blocks/posts/inspector.js | 262 +++++++++--------- src/blocks/blocks/posts/types.d.ts | 7 +- .../frontend/rank-math-content/index.ts | 15 + webpack.config.js | 11 +- 6 files changed, 175 insertions(+), 136 deletions(-) create mode 100644 src/blocks/frontend/rank-math-content/index.ts diff --git a/inc/render/class-posts-grid-block.php b/inc/render/class-posts-grid-block.php index 3f330e3b5..5b91680c8 100644 --- a/inc/render/class-posts-grid-block.php +++ b/inc/render/class-posts-grid-block.php @@ -22,6 +22,18 @@ class Posts_Grid_Block { * @return mixed|string */ public function render( $attributes ) { + + if ( ! empty( $attributes['enableRankMathContentAnalysis'] ) ) { + + // Load script for rank math integration. + $asset_file = include OTTER_BLOCKS_PATH . '/build/blocks/rank-math-content.asset.php'; + $asset_file['dependencies'][] = 'wp-hooks'; + $asset_file['dependencies'][] = 'rank-math-analyzer'; + wp_enqueue_script( 'otter-rank-math-integration', OTTER_BLOCKS_URL . 'build/blocks/rank-math-content.js', $asset_file['dependencies'], $asset_file['version'], true ); + wp_script_add_data( 'otter-rank-math-integration', 'defer', true ); + } + + $categories = 0; if ( isset( $attributes['categories'] ) ) { diff --git a/src/blocks/blocks/posts/block.json b/src/blocks/blocks/posts/block.json index d8e633208..9124e849c 100644 --- a/src/blocks/blocks/posts/block.json +++ b/src/blocks/blocks/posts/block.json @@ -231,6 +231,10 @@ }, "featuredPostOrder": { "type": "string" + }, + "enableRankMathContentAnalysis": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/src/blocks/blocks/posts/inspector.js b/src/blocks/blocks/posts/inspector.js index 56b34dfaf..0e701d4e0 100644 --- a/src/blocks/blocks/posts/inspector.js +++ b/src/blocks/blocks/posts/inspector.js @@ -120,7 +120,7 @@ const Inspector = ({ const categorySuggestions = categoriesList.reduce( ( accumulator, category ) => ({ ...accumulator, - [ category.name ]: category + [category.name]: category }), {} ); @@ -174,7 +174,7 @@ const Inspector = ({ }; const changeBoxShadow = ( type, data ) => { - const boxShadow = { ...attributes[ type ] }; + const boxShadow = { ...attributes[type] }; Object.entries( data ).map( ([ key, val ] = data ) => { boxShadow[key] = val; }); @@ -185,7 +185,7 @@ const Inspector = ({ return ( - { 'settings' === tab && ( + {'settings' === tab && ( { + label={__( 'Post Type', 'otter-blocks' )} + help={__( 'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.', 'otter-blocks' )} + value={attributes.postTypes[0] || null} + onChange={( value ) => { if ( value ) { setAttributes({ postTypes: [ value ] }); } - } } + }} options={ slugs.map( slug => ({ label: convertToTitleCase( slug ), value: slug }) ) } /> setAttributes({ style: value }) } + value={attributes.style} + onChange={value => setAttributes({ style: value })} /> - { 'grid' === attributes.style && ( + {'grid' === attributes.style && ( setAttributes({ columns }) } - min={ 1 } - max={ 5 } + label={__( 'Columns', 'otter-blocks' )} + value={attributes.columns} + onChange={columns => setAttributes({ columns })} + min={1} + max={5} /> - ) } + )} setAttributes({ textAlign }) } + onChange={textAlign => setAttributes({ textAlign })} hasIcon /> setAttributes({ order: value }) } - onOrderByChange={ value => setAttributes({ orderBy: value }) } - numberOfItems={ attributes.postsToShow } - onNumberOfItemsChange={ value => setAttributes({ postsToShow: value }) } - categorySuggestions={ categorySuggestions } - selectedCategoryId={ selectedCategoryId } - selectedCategories={ selectedCategories } - onCategoryChange={ selectCategories } + order={attributes.order} + orderBy={attributes.orderBy} + onOrderChange={value => setAttributes({ order: value })} + onOrderByChange={value => setAttributes({ orderBy: value })} + numberOfItems={attributes.postsToShow} + onNumberOfItemsChange={value => setAttributes({ postsToShow: value })} + categorySuggestions={categorySuggestions} + selectedCategoryId={selectedCategoryId} + selectedCategories={selectedCategories} + onCategoryChange={selectCategories} /> setAttributes({ offset: Number( value ) }) } + value={attributes.offset} + min={0} + onChange={value => setAttributes({ offset: Number( value ) })} /> setAttributes({ enableFeaturedPost })} + label={__( 'Enable Featured Post', 'otter-blocks' )} + checked={attributes.enableFeaturedPost} + onChange={enableFeaturedPost => setAttributes({ enableFeaturedPost })} /> { attributes.enableFeaturedPost && ( setAttributes({ featuredPostOrder: 'none' !== value ? value : undefined }) } + ]} + onChange={value => setAttributes({ featuredPostOrder: 'none' !== value ? value : undefined })} /> ) } + setAttributes({ enableRankMathContentAnalysis })} + /> + - + - ) } + )} - { 'style' === tab && ( + {'style' === tab && ( setAttributes({ titleTag }) } + ]} + onChange={titleTag => setAttributes({ titleTag })} /> responsiveSetAttributes( value, [ 'customTitleFontSize', 'customTitleFontSizeTablet', 'customTitleFontSizeMobile' ]) } + value={responsiveGetAttributes([ attributes.customTitleFontSize, attributes.customTitleFontSizeTablet, attributes.customTitleFontSizeMobile ])} + onChange={value => responsiveSetAttributes( value, [ 'customTitleFontSize', 'customTitleFontSizeTablet', 'customTitleFontSizeMobile' ])} /> responsiveSetAttributes( value, [ 'customDescriptionFontSize', 'customDescriptionFontSizeTablet', 'customDescriptionFontSizeMobile' ]) } + value={responsiveGetAttributes([ attributes.customDescriptionFontSize, attributes.customDescriptionFontSizeTablet, attributes.customDescriptionFontSizeMobile ])} + onChange={value => responsiveSetAttributes( value, [ 'customDescriptionFontSize', 'customDescriptionFontSizeTablet', 'customDescriptionFontSizeMobile' ])} /> responsiveSetAttributes( value, [ 'customMetaFontSize', 'customMetaFontSizeTablet', 'customMetaFontSizeMobile' ]) } + value={responsiveGetAttributes([ attributes.customMetaFontSize, attributes.customMetaFontSizeTablet, attributes.customMetaFontSizeMobile ])} + onChange={value => responsiveSetAttributes( value, [ 'customMetaFontSize', 'customMetaFontSizeTablet', 'customMetaFontSizeMobile' ])} /> setAttributes({ textColor }), @@ -420,133 +426,133 @@ const Inspector = ({ label: __( 'Border', 'otter-blocks' ), isShownByDefault: false } - ] } + ]} /> setAttributes({ borderRadius }) } + label={__( 'Border Radius', 'otter-blocks' )} + values={numberToBox( attributes.borderRadius )} + onChange={borderRadius => setAttributes({ borderRadius })} id="o-border-raduis-box" /> - { 'list' === attributes.style && ( + {'list' === attributes.style && ( responsiveSetAttributes( value, [ 'imageWidth', 'imageWidthTablet', 'imageWidthMobile' ]) } + value={responsiveGetAttributes([ attributes.imageWidth, attributes.imageWidthTablet, attributes.imageWidthMobile ])} + onChange={value => responsiveSetAttributes( value, [ 'imageWidth', 'imageWidthTablet', 'imageWidthMobile' ])} /> - ) } + )} changeBoxShadow( 'imageBoxShadow', data ) } + boxShadow={attributes.imageBoxShadow} + onChange={data => changeBoxShadow( 'imageBoxShadow', data )} /> - { 'list' !== attributes.style && ( + {'list' !== attributes.style && ( responsiveSetAttributes( value, [ 'columnGap', 'columnGapTablet', 'columnGapMobile' ]) } + value={responsiveGetAttributes([ attributes.columnGap, attributes.columnGapTablet, attributes.columnGapMobile ])} + onChange={value => responsiveSetAttributes( value, [ 'columnGap', 'columnGapTablet', 'columnGapMobile' ])} /> - ) } + )} responsiveSetAttributes( value, [ 'rowGap', 'rowGapTablet', 'rowGapMobile' ]) } + value={responsiveGetAttributes([ attributes.rowGap, attributes.rowGapTablet, attributes.rowGapMobile ])} + onChange={value => responsiveSetAttributes( value, [ 'rowGap', 'rowGapTablet', 'rowGapMobile' ])} /> responsiveSetAttributes( value, [ 'padding', 'paddingTablet', 'paddingMobile' ]) } + value={responsiveGetAttributes([ attributes.padding, attributes.paddingTablet, attributes.paddingMobile ])} + onChange={value => responsiveSetAttributes( value, [ 'padding', 'paddingTablet', 'paddingMobile' ])} /> setAttributes({ contentGap }) } + value={attributes.contentGap} + onChange={contentGap => setAttributes({ contentGap })} /> setAttributes({ borderWidth }) } + label={__( 'Width', 'otter-blocks' )} + value={attributes.borderWidth} + onChange={borderWidth => setAttributes({ borderWidth })} /> setAttributes({ cardBorderRadius }) } + label={__( 'Radius', 'otter-blocks' )} + value={attributes.cardBorderRadius} + onChange={cardBorderRadius => setAttributes({ cardBorderRadius })} id="o-border-raduis-box" /> changeBoxShadow( 'boxShadow', data ) } + boxShadow={attributes.boxShadow} + onChange={data => changeBoxShadow( 'boxShadow', data )} /> - ) } + )} ); }; diff --git a/src/blocks/blocks/posts/types.d.ts b/src/blocks/blocks/posts/types.d.ts index aa1330aa1..79921bee6 100644 --- a/src/blocks/blocks/posts/types.d.ts +++ b/src/blocks/blocks/posts/types.d.ts @@ -32,7 +32,7 @@ type Attributes = { customDescriptionFontSize: number customDescriptionFontSizeTablet: number customDescriptionFontSizeMobile: number - borderRadius: number|object + borderRadius: number | object borderWidth: string cardBorderRadius: object boxShadow: BoxShadow @@ -40,7 +40,7 @@ type Attributes = { textAlign: string verticalAlign: string enableFeaturedPost: boolean - imageWidth: number|string + imageWidth: number | string imageWidthTablet: string imageWidthMobile: string columnGap: string @@ -54,7 +54,8 @@ type Attributes = { paddingMobile: string contentGap: string featuredPostOrder: string + enableRankMathContentAnalysis: boolean } export type PostProps = BlockProps -export interface PostInspectorProps extends InspectorProps {} +export interface PostInspectorProps extends InspectorProps { } diff --git a/src/blocks/frontend/rank-math-content/index.ts b/src/blocks/frontend/rank-math-content/index.ts new file mode 100644 index 000000000..16666ca90 --- /dev/null +++ b/src/blocks/frontend/rank-math-content/index.ts @@ -0,0 +1,15 @@ +import { domReady } from '../../helpers/frontend-helper-functions'; + +domReady( () => { + console.log( 'Loaded' ); + const postsHtml = document.querySelectorAll( '.wp-block-themeisle-blocks-posts-grid' ); + + const content = Array.from( postsHtml ).map( ( post ) => post.innerHTML ).join( '' ); + + window.wp.hooks.addFilter( 'rank_math_content', 'rank-math', () => { + console.log( 'rank_math_content' ); + return content; + }); + + window?.rankMathEditor?.refresh( 'content' ); +}); diff --git a/webpack.config.js b/webpack.config.js index 403006677..9154034d1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,15 +8,15 @@ const blocks = require( './blocks.json' ); defaultConfig.plugins.splice( 1, 1 ); // We need to remove Core's Copy Files plugin. -const blockFiles = Object.keys( blocks ).filter( block => blocks[ block ].block !== undefined && true !== blocks[ block ]?.isPro ) +const blockFiles = Object.keys( blocks ).filter( block => blocks[block].block !== undefined && true !== blocks[block]?.isPro ) .map( block => { return { - source: `src/${ blocks[ block ].block }`, - destination: `build/blocks/${ block }/` + source: `src/${blocks[block].block}`, + destination: `build/blocks/${block}/` }; }); -const blockFolders = Object.keys( blocks ).filter( block => true !== blocks[ block ]?.isPro ).map( block => `build/blocks/${ block }` ); +const blockFolders = Object.keys( blocks ).filter( block => true !== blocks[block]?.isPro ).map( block => `build/blocks/${block}` ); module.exports = [ { @@ -132,7 +132,8 @@ module.exports = [ sticky: './src/blocks/frontend/sticky/index.ts', accordion: './src/blocks/frontend/accordion/index.js', 'live-search': './src/blocks/frontend/live-search/index.ts', - 'live-search-style': './src/blocks/frontend/live-search/style.scss' + 'live-search-style': './src/blocks/frontend/live-search/style.scss', + 'rank-math-content': './src/blocks/frontend/rank-math-content/index.ts' }, output: { path: path.resolve( __dirname, './build/blocks' ),