';
55 |
56 |
57 | return $output;
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/assets/icons/acf.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/docs/otter-family-plugins.md:
--------------------------------------------------------------------------------
1 | # The big four
2 |
3 | As you can see, there are four other plugins besides Otter that are part of the family. They are:
4 | - Block Animation: allow you to add animation to any block.
5 | - Blocks CSS: allow you to add custom CSS to any block.
6 | - Block Export & Import: allow you to export and import blocks as JSON files.
7 |
8 | ## Block Animation
9 |
10 | This plugin offer the option to the user to animate the block via:
11 | - `animate.css` library ([link](https://animate.style)): we just add this classes to `className` attribute of the block.
12 | - Typing (text only). We use a format tag (`o-anim-typing`) to mark the text that should be animated. We use a custom script to animate the text.
13 | - Counting: Same as Typing, but with the tag `o-anim-counting`.
14 |
15 | When it come to upgrading, the `animate.css` library is sometime troublesome. We need to check if the new version is compatible with the old one. If not, we need to update the code to make it compatible.
16 |
17 | For Typing and Counting, we have total control over the code (since their are made in-house). So, it is easier to upgrade.
18 |
19 | ## Blocks CSS
20 |
21 | This plugin allow the user to add custom CSS to any block. The CSS is added to the block via a `style` tag. This is handy for edge cases where the user need to enhance a block with an option that is not available in Inspector.
22 |
23 | Also, it allow us to provide quick hacks to the user until we fix the issue with styling in a Block.
24 |
25 | ## Block Export & Import
26 |
27 | This is a utility plugin that allow the user to export and import blocks as JSON files. It is useful for the user to backup their blocks and for us to debug issues. Sometime we need to test a block with a specific configuration. This plugin allow us to do the sharing more easily.
28 |
29 | For importing, the trick is simple: deserialize the JSON file and replace the block with the new one. For exporting, we need to serialize the block and save it to a JSON file.
--------------------------------------------------------------------------------
/docs/woocommerce-extensions.md:
--------------------------------------------------------------------------------
1 | # WooCommerce Extensions
2 |
3 | In WordPress, WooCommerce is the most popular plugin for e-commerce. In a simple view of a plugin developer: people with business that have a high chance to pay for a premium plugin. The market is so big that we can't ignore it. Otter can not a respectable plugin, without WooCommerce integration.
4 |
5 | The available WooCommerce extensions are:
6 | - Add to cart Block
7 | - Product Review with Woo Sync
8 | - Live Search (show product information in search results)
9 | - Small Showcase Blocks (title, price, rating, stock, etc.)
10 |
11 | Woo Commerce own plugin offer a lot of features for Gutenberg, and is mostly redundant to re-invent the wheel for most of them. So winning strategy is to allow Otter users to integrate WooCommerce with Otter Blocks. You use Product Review at the beginning then migrate to WooCommerce, no need to redo things, you can just sync it. The feeling is more like a 'handy feature` than a full blow WooCommerce extension plugin.
12 |
13 | ## Structure
14 |
15 | | Feature | Location |
16 | | :-- | :-- |
17 | | Frontend Render Add to Cart | `./plugins/otter-pro/inc/render/class-add-to-cart-button-block.php` |
18 | | Frontend Render Small Blocks | `./plugins/otter-pro/inc/render/woocommerce` |
19 | | Editor Add to Cart | `./src/pro/blocks/add-to-cart-button` |
20 | | Editor Small Blocks | `./src/pro/woocommerce` |
21 |
22 | For Live Search, learn more [here](live-search.md).
23 |
24 | ## Mentions
25 |
26 | - All of those feature require WooCommerce to be installed and activated. If WooCommerce is not installed, the block will be disabled. The features are built on top of WooCommerce API, so it is not possible to use them without WooCommerce.
27 | - When developing a new feature, you should always check if WooCommerce is installed and activated. If not, you should disable the feature.
28 | - Have stability always in mind. An e-commerce website is extremely important for the owner. Crashing the website is like hiding the owner's wallet.
--------------------------------------------------------------------------------
/docs/live-search.md:
--------------------------------------------------------------------------------
1 | # Live Search
2 |
3 | Live Search plugin is an enhancement to default Search block. It unlock new style and the ability to preview search results.
4 |
5 | ## Structure
6 |
7 | | Feature | Location |
8 | | :-- | :-- |
9 | | Editor Block Extension Upsell | `./src/blocks/plugins/live-search` |
10 | | Editor Block Extension | `./src/pro/plugins/live-search` |
11 | | Frontend | `./src/blocks/frontend/live-search` |
12 | | Backend | `./plugins/otter-pro/inc/plugins/class-live-search` |
13 |
14 |
15 | ## How it works
16 |
17 | The normal search will only show the results when you press the Submit button, and the result will be a page with a list of posts. Live Search will show the results as you type, and the result will be shown as a dropdown with list of posts, pages, products, and other custom post types.
18 |
19 | Every time you type a new character, the search will be triggered with [this function](https://github.com/Codeinwp/otter-blocks/blob/4d9eafabaec64c02d0e522d78f08404e56a80396/src/blocks/frontend/live-search/index.ts#L59-L79). The request will be processed [here](https://github.com/Codeinwp/otter-blocks/blob/4d9eafabaec64c02d0e522d78f08404e56a80396/plugins/otter-pro/inc/server/class-live-search-server.php#L131-L171) by leveraging WordPress `WP_Query`.
20 |
21 | In a nutshell, this is just fancy interface that makes the classic Search Block to feel more modern. The inspiration point was the [search bar for MDN Web Docs](https://developer.mozilla.org/en-US/) [#1135](https://github.com/Codeinwp/otter-blocks/issues/1135).
22 |
23 | The main selling point of this plugin is showing useful information to the end user. This information is mostly from metadata, like: date, author, product price, category, etc. Users to run e-commerce websites will find this plugin very useful.
24 |
25 | When you are developing a new feature for it have those in mind:
26 | - Monitor the request time, it should be as fast as possible.
27 | - Watch the requests number. You don't want to overload the server.
28 | - Pay attention to error handling when integrating with other plugins.
29 |
--------------------------------------------------------------------------------
/inc/css/blocks/class-timeline-item-css.php:
--------------------------------------------------------------------------------
1 | add_item(
38 | array(
39 | 'properties' => array(
40 | array(
41 | 'property' => '--o-timeline-cnt-bg',
42 | 'value' => 'containerBackgroundColor',
43 | ),
44 | array(
45 | 'property' => '--o-timeline-cnt-br-c',
46 | 'value' => 'containerBorderColor',
47 | ),
48 | array(
49 | 'property' => '--o-timeline-i-color',
50 | 'value' => 'iconColor',
51 | ),
52 | array(
53 | 'property' => '--o-timeline-cnt-br-w',
54 | 'value' => 'containerBorder',
55 | 'format' => function ( $value, $attrs ) {
56 | return CSS_Utility::box_values(
57 | $value,
58 | array(
59 | 'left' => '8px',
60 | 'right' => '8px',
61 | 'top' => '8px',
62 | 'bottom' => '8px',
63 | )
64 | );
65 | },
66 | ),
67 | array(
68 | 'property' => '--o-timeline-cnt-br-r',
69 | 'value' => 'containerRadius',
70 | 'format' => function ( $value, $attrs ) {
71 | return CSS_Utility::box_values(
72 | $value,
73 | array(
74 | 'left' => '8px',
75 | 'right' => '8px',
76 | 'top' => '8px',
77 | 'bottom' => '8px',
78 | )
79 | );
80 | },
81 | ),
82 | ),
83 | )
84 | );
85 |
86 | $style = $css->generate();
87 |
88 | return $style;
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Setup
2 |
3 | More details about the setup can be found in [docs/environment-installation.md](docs/environment-installation.md).
4 |
5 | This projects requires you to have Node.js (with npm) and Composer.
6 |
7 | - You can run `npm ci` & `composer install` to install dependencies.
8 | - Once done, you can run `npm run build` to generate build files.
9 | - You can also use `npm run start` to generate dev build if you are working on the files.
10 |
11 | The project also ships with a `docker-compose.yml` file, you can run `docker compose up -d` to bring the instance up.
12 |
13 | ## Project Structure
14 |
15 | This repo is codebase for five different plugins, which are:
16 |
17 | - Otter Blocks
18 | - Otter Pro
19 | - Blocks Animation
20 | - Blocks CSS
21 | - Blocks Export Import
22 |
23 | Blocks Animation, CSS & Export Import are also shipped as part of Otter Blocks. Codebase of each sister-plugin of Otter, which is plugin-specific, can be found in `/plugins` folder of the repo, while the code which is shared in both Otter & sister-plugins is kept inside `/inc` folder.
24 |
25 | You can take a look at `/bin/dist.sh` file to see how each plugin is generated. Each sister-plugin has its own `.distignore` and `.wordpress-org` file/directory that needs to be maintained with latest changes.
26 |
27 | And finally, `blocks.json` file defines the build path of block assets.
28 |
29 | ## Compatibility
30 |
31 | Any change you make, you should test with at least last 2 major versions of WordPress.
32 |
33 | ## Releasing
34 |
35 | This repository uses conventional [changelog commit](https://github.com/Codeinwp/conventional-changelog-simple-preset) messages to trigger release
36 |
37 | How to release a new version:
38 |
39 | - Clone the master branch
40 | - Do your changes
41 | - Send a PR to master and merge it using the following subject message
42 | - `release: ` - for patch release
43 | - `release(minor): ` - for minor release
44 | - `release(major): ` - for major release
45 | The release notes will inherit the body of the commit message which triggered the release. For more details check the [simple-preset](https://github.com/Codeinwp/conventional-changelog-simple-preset) that we use.
46 |
--------------------------------------------------------------------------------
/inc/css/blocks/class-sharing-icons-css.php:
--------------------------------------------------------------------------------
1 | $attrs ) {
38 | $css->add_item(
39 | array(
40 | 'selector' => ' .is-' . $icon,
41 | 'properties' => array(
42 | array(
43 | 'property' => '--icon-bg-color',
44 | 'value' => $icon,
45 | 'format' => function ( $value, $attrs ) {
46 | return $value['backgroundColor'];
47 | },
48 | 'condition' => function ( $attrs ) use ( $icon ) {
49 | return isset( $attrs[ $icon ]['backgroundColor'] );
50 | },
51 | ),
52 | array(
53 | 'property' => '--text-color',
54 | 'value' => $icon,
55 | 'format' => function ( $value, $attrs ) {
56 | return $value['textColor'];
57 | },
58 | 'condition' => function ( $attrs ) use ( $icon ) {
59 | return isset( $attrs[ $icon ]['textColor'] );
60 | },
61 | ),
62 | ),
63 | )
64 | );
65 | }
66 |
67 | $css->add_item(
68 | array(
69 | 'properties' => array(
70 | array(
71 | 'property' => '--icons-gap',
72 | 'value' => 'gap',
73 | 'unit' => 'px',
74 | ),
75 | array(
76 | 'property' => '--border-radius',
77 | 'value' => 'borderRadius',
78 | 'unit' => 'px',
79 | ),
80 | ),
81 | )
82 | );
83 |
84 | return $css->generate();
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/inc/css/blocks/class-slider-css.php:
--------------------------------------------------------------------------------
1 | add_item(
38 | array(
39 | 'properties' => array(
40 | array(
41 | 'property' => '--height',
42 | 'value' => 'height',
43 | 'format' => function ( $value, $attrs ) {
44 | return is_numeric( $value ) ? $value . 'px' : $value;
45 | },
46 | ),
47 | array(
48 | 'property' => '--height-tablet',
49 | 'value' => 'heightTablet',
50 | ),
51 | array(
52 | 'property' => '--height-mobile',
53 | 'value' => 'heightMobile',
54 | ),
55 | array(
56 | 'property' => '--width',
57 | 'value' => 'width',
58 | ),
59 | array(
60 | 'property' => '--arrows-color',
61 | 'value' => 'arrowsColor',
62 | ),
63 | array(
64 | 'property' => '--arrows-background-color',
65 | 'value' => 'arrowsBackgroundColor',
66 | ),
67 | array(
68 | 'property' => '--pagination-color',
69 | 'value' => 'paginationColor',
70 | ),
71 | array(
72 | 'property' => '--pagination-active-color',
73 | 'value' => 'paginationActiveColor',
74 | ),
75 | array(
76 | 'property' => '--border-color',
77 | 'value' => 'borderColor',
78 | ),
79 | array(
80 | 'property' => '--border-width',
81 | 'value' => 'borderWidth',
82 | ),
83 | array(
84 | 'property' => '--border-radius',
85 | 'value' => 'borderRadius',
86 | ),
87 | ),
88 | )
89 | );
90 |
91 | $style = $css->generate();
92 |
93 | return $style;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/docs/form-block-workflow.md:
--------------------------------------------------------------------------------
1 | # Form Block Workflow
2 |
3 | A guide about how Form workflow works.
4 |
5 | ## The scope
6 |
7 | Allowing the end user to send some data to the website owner. Data can be: text, number, email, date, files, etc. The can be sent to a third party service or to the website owner. It can go via email or internal storage.
8 |
9 | When doing this we need to consider the following:
10 | - Bots. We need to prevent bots from sending data.
11 | - Security. We need to prevent malicious data from being sent. Data sanitization, validation, etc. For files we have to consider the numbers, the size and the type.
12 | - 3rd party services. We need to consider the API of the service and how to send the data.
13 |
14 | ## How it works from the Submit click to the data being sent
15 |
16 | When the user clicks on the Submit button, the following happens:
17 | - The data is validated with JS and collected. Then sended to the server via `wp-json/form/frontend` endpoint (definition in `./inc/server/class-form-server.php`).
18 | - The data is validated with PHP via `otter_form_validate_form` filter hook. If the data is invalid, we check if it was sended by a bot with `otter_form_anti_spam_validation` filter hook.
19 | - If all ok, we apply some data preparation `otter_form_data_preparation`. This will add or change the data from the `$form_data` variable.
20 | - If everything goes well, we get the provider (the service that will receive the data) and run with the current data request of `$form_data`.
21 | - At the end we do a `otter_form_after_submit` to trigger extra actions. (deleting files, sending data to 3rd party services, auto-responder, etc.)
22 |
23 | You will see in the server a lot of error handling. This is because we need to be sure that the data is sent to the user. If something goes wrong, we need to inform the user or the admin (in critical cases). For the server part, the PHP utility files are in `./inc/integrations/`.
24 |
25 | ## Where are the options for the form?
26 |
27 | As you know, you can not trust the request that come to the server. It might be malicious. When we process a request, we pull the options of the form that send the request with the `get_option` function (the data is saved in WordPress options and you can see the definition in `./inc/plugins/class-options-settings.php` ) and check if request respect the options. If not, we return an error.
28 |
29 | If you add a new feature and need to save in options, make sure to change the definition from `./inc/plugins/class-options-settings.php`.
30 |
31 |
--------------------------------------------------------------------------------
/inc/render/class-leaflet-map-block.php:
--------------------------------------------------------------------------------
1 | ';
29 | $output .= ' ';
30 | $output .= '';
31 |
32 | return $output;
33 | }
34 |
35 | // Set the ID and the class name.
36 | $id = isset( $attributes['id'] ) ? esc_attr( $attributes['id'] ) : 'wp-block-themeisle-blocks-map-' . wp_rand( 10, 100 );
37 | $class = '';
38 | $style = '';
39 |
40 | if ( isset( $attributes['height'] ) ) {
41 | $style .= 'height:' . esc_attr( $attributes['height'] . 'px;' );
42 | }
43 |
44 | if ( isset( $attributes['align'] ) ) {
45 | $class .= 'align' . esc_attr( $attributes['align'] );
46 | }
47 |
48 | $wrapper_attributes = get_block_wrapper_attributes(
49 | array(
50 | 'id' => $id,
51 | 'class' => $class,
52 | 'style' => $style,
53 | )
54 | );
55 |
56 | // Load the attributes in the page and make a placeholder to render the map.
57 | $output = '' . "\n";
58 | $output .= '' . "\n";
64 |
65 | return $output;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/assets/icons/meta.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/inc/render/class-google-map-block.php:
--------------------------------------------------------------------------------
1 | ';
35 | $output .= ' ';
36 | $output .= '';
37 |
38 | return $output;
39 | }
40 |
41 | $id = isset( $attributes['id'] ) ? esc_attr( $attributes['id'] ) : 'wp-block-themeisle-blocks-google-map-' . wp_rand( 10, 100 );
42 | $class = '';
43 | $style = '';
44 |
45 | if ( isset( $attributes['align'] ) ) {
46 | $class .= 'align' . esc_attr( $attributes['align'] );
47 | }
48 |
49 | if ( isset( $attributes['height'] ) ) {
50 | $style .= 'height:' . esc_attr( is_numeric( $attributes['height'] ) ? $attributes['height'] . 'px' : $attributes['height'] );
51 | }
52 |
53 | $wrapper_attributes = get_block_wrapper_attributes(
54 | array(
55 | 'class' => $class,
56 | 'style' => $style,
57 | )
58 | );
59 |
60 | $output = '' . "\n";
61 | $output .= '' . "\n";
67 |
68 | return $output;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/webpack.config.pro.js:
--------------------------------------------------------------------------------
1 | const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
2 | const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
3 | const NODE_ENV = process.env.NODE_ENV || 'development';
4 | const ANALYZER = 'true' === process.env.NODE_ANALYZER ? true : false;
5 | const path = require( 'path' );
6 | const FileManagerPlugin = require( 'filemanager-webpack-plugin' );
7 | const blocks = require( './blocks.json' );
8 |
9 | defaultConfig.plugins.splice( 1, 1 ); // We need to remove Core's Copy Files plugin.
10 |
11 | const blockFilesPro = Object.keys( blocks ).filter( block => blocks[ block ].block !== undefined && true === blocks[ block ]?.isPro )
12 | .map( block => {
13 | return {
14 | source: `src/${ blocks[ block ].block }`,
15 | destination: `build/pro/${ block }/`
16 | };
17 | });
18 |
19 | const blockFoldersPro = Object.keys( blocks ).filter( block => true === blocks[ block ]?.isPro ).map( block => `build/pro/${ block }` );
20 |
21 | const changeTextDomain = textdomain => {
22 | return {
23 | test: /\.(j|t)sx?$/,
24 | exclude: /node_modules/,
25 | use: [
26 | {
27 | loader: require.resolve( 'babel-loader' ),
28 | options: {
29 | cacheDirectory:
30 | process.env.BABEL_CACHE_DIRECTORY || true,
31 | babelrc: false,
32 | configFile: false,
33 | presets: [
34 | require.resolve(
35 | '@wordpress/babel-preset-default'
36 | )
37 | ],
38 | plugins: [
39 | [ '@automattic/babel-plugin-replace-textdomain', { textdomain }]
40 | ]
41 | }
42 | }
43 | ]
44 | };
45 | };
46 |
47 | module.exports = [
48 | {
49 |
50 | // OTTER PRO
51 | ...defaultConfig,
52 | stats: 'minimal',
53 | devtool: 'development' === NODE_ENV ? 'eval-source-map' : undefined,
54 | mode: NODE_ENV,
55 | entry: {
56 | blocks: [
57 | './src/pro/blocks/index.js',
58 | './src/pro/plugins/index.js'
59 | ],
60 | dashboard: './src/pro/dashboard/index.js',
61 | woocommerce: './src/pro/woocommerce/index.js'
62 | },
63 | output: {
64 | path: path.resolve( __dirname, './build/pro' ),
65 | filename: '[name].js',
66 | chunkFilename: 'chunk-[name].js'
67 | },
68 | module: {
69 | rules: [
70 | changeTextDomain('otter-pro'),
71 | ...defaultConfig.module.rules
72 | ]
73 | },
74 | plugins: [
75 | ...defaultConfig.plugins,
76 | new FileManagerPlugin({
77 | events: {
78 | onEnd: {
79 | mkdir: blockFoldersPro,
80 | copy: blockFilesPro
81 | }
82 | },
83 | runOnceInWatchMode: false,
84 | runTasksInSeries: true
85 | }),
86 | new BundleAnalyzerPlugin({
87 | analyzerMode: 'disabled',
88 | generateStatsFile: ANALYZER
89 | })
90 | ]
91 | }
92 | ];
93 |
--------------------------------------------------------------------------------
/plugins/blocks-css/blocks-css.php:
--------------------------------------------------------------------------------
1 | 'free',
78 | ),
79 | tsdk_translate_link( tsdk_utmify( 'https://themeisle.link/otter-bf', 'bfcm', 'blocks-css' ) )
80 | );
81 |
82 | $configs[ BLOCKS_CSS_PRODUCT_SLUG ] = $config;
83 |
84 | return $configs;
85 | }
86 | );
87 |
--------------------------------------------------------------------------------
/inc/class-blocks-export-import.php:
--------------------------------------------------------------------------------
1 | init();
68 | }
69 |
70 | return self::$instance;
71 | }
72 |
73 | /**
74 | * Throw error on object clone
75 | *
76 | * The whole idea of the singleton design pattern is that there is a single
77 | * object therefore, we don't want the object to be cloned.
78 | *
79 | * @access public
80 | * @since 1.0.0
81 | * @return void
82 | */
83 | public function __clone() {
84 | // Cloning instances of the class is forbidden.
85 | _doing_it_wrong( __FUNCTION__, 'Cheatin’ huh?', '1.0.0' );
86 | }
87 |
88 | /**
89 | * Disable unserializing of the class
90 | *
91 | * @access public
92 | * @since 1.0.0
93 | * @return void
94 | */
95 | public function __wakeup() {
96 | // Unserializing instances of the class is forbidden.
97 | _doing_it_wrong( __FUNCTION__, 'Cheatin’ huh?', '1.0.0' );
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/inc/patterns/large-quote.php:
--------------------------------------------------------------------------------
1 | __( 'Large Quote', 'otter-blocks' ),
10 | 'categories' => array( 'otter-blocks', 'text' ),
11 | 'content' => '
"...The greatest victory is that which requires no battle...."
64 | );
65 | }
66 | } ]
67 | });
68 | ```
69 |
70 | If we refesh the page, the transition will be made and no error will appear.
71 |
72 | ```html
73 |
74 |
', // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation
12 | );
13 |
--------------------------------------------------------------------------------
/plugins/otter-pro/inc/plugins/class-fonts-module.php:
--------------------------------------------------------------------------------
1 | init();
96 | }
97 |
98 | return self::$instance;
99 | }
100 |
101 | /**
102 | * Throw error on object clone
103 | *
104 | * The whole idea of the singleton design pattern is that there is a single
105 | * object therefore, we don't want the object to be cloned.
106 | *
107 | * @access public
108 | * @since 2.0.5
109 | * @return void
110 | */
111 | public function __clone() {
112 | // Cloning instances of the class is forbidden.
113 | _doing_it_wrong( __FUNCTION__, esc_html__( 'Cheatin’ huh?', 'otter-pro' ), '1.0.0' );
114 | }
115 |
116 | /**
117 | * Disable unserializing of the class
118 | *
119 | * @access public
120 | * @since 2.0.5
121 | * @return void
122 | */
123 | public function __wakeup() {
124 | // Unserializing instances of the class is forbidden.
125 | _doing_it_wrong( __FUNCTION__, esc_html__( 'Cheatin’ huh?', 'otter-pro' ), '1.0.0' );
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/docs/project-structure.md:
--------------------------------------------------------------------------------
1 | # The Everlasting Otter
2 |
3 | As time goes by, the project grows and evolves. The codebase becomes more complex. It's important to keep the project organized and easy to understand for everyone.
4 |
5 | ## Project structure
6 |
7 | - `docs/` contains the documentation of the project
8 | - `src/` contains the source code of the project (mainly JS & SCSS files)
9 | - `blocks/` the JS & SCSS files for Otter Blocks plugin
10 | - `components/` contains reusable components
11 | - `blocks/` blocks definition and functionality
12 | - `frontend/` script that add functionality for the end user. E.g.: opening tabs in accordion, sending form to the backend for Form Block.
13 | - `plugins/` global features: Global Defaults, Sticky Blocks, Copy & Paste Styles, Dynamic Content & Conditions
14 | - `helpers/` utility functions: Add an ID to the block, Google Fonts loader.
15 | - `test` contains the test files for the blocks
16 | - `css/` contains the CSS files for Custom CSS plugin
17 | - `animation/` contains the JS & SCSS files for Animation plugin
18 | - `dashboard/` contains the JS & SCSS files for Otter Dashboard (in WP: Tools > Otter )
19 | - `export-import/` contains the JS & SCSS files for Export/Import Block plugin
20 | - `pro/` contains the JS & SCSS files for Otter Pro plugin
21 | - `blocks/` Pro blocks source files
22 | - `components/` reusable components
23 | - `dashboard/` dashboard extension with Pro features
24 | - `helpers/` utility functions
25 | - `plugins/` Pro features for Blocks: Dynamic Content & Conditions, Sticky options, Countdown options, Live Search, etc.
26 | - `woocommerce/` WooCommerce features and extensions
27 | - `inc/` contains the PHP files for all plugins
28 | - `css/` CSS dynamic generator for Blocks. It's used to generate the CSS for the blocks based on the user settings.
29 | - `integration/` Form Block utilities
30 | - `patterns/` contains the patterns for the Pattern Library
31 | - `plugins/` plugins functionality: Dynamic Content & Conditions, Stripe, WordPress Options definitions for Rest API, etc.
32 | - `render/` render classes for dynamic blocks (e.g.: Form File Field, Google/Leaflet Map, Plugin Card, Stripe Checkout, etc.)
33 | - `server/` WP REST API endpoints: Form Block, Dynamic Content & Conditions, Stripe, etc.
34 | - `plugins/` contains PHP files for other plugins
35 | - `blocks-css/` Custom CSS plugin
36 | - `blocks-animation/` Animation plugin
37 | - `blocks-export-import/` Export/Import Block plugin
38 | - `otter-pro/` Otter Pro plugin
39 | - `css/` CSS dynamic generator for Pro blocks
40 | - `plugins/` Pro features for Blocks: Dynamic Content & Conditions, Sticky options, Countdown options, Live Search, etc.
41 | - `render/` render classes for dynamic blocks: WooCommerce
42 | - `server/` WP REST API endpoints: Live Search
43 |
44 | ## Tips on navigation
45 |
46 | If you are working on Form block: `./src/blocks/blocks/form/`, `./inc/integrations/` and `./inc/server/class-form-server.php` are the main hot spots.
47 |
48 | Dealing with the CSS generation? `./inc/css/` are the main files.
49 |
50 | PHP loading related issues: `./inc/class-registration.php` is the main file.
51 |
52 | Add PHP functionality only for Otter Pro: `./plugins/otter-pro/` is the main folder.
53 |
54 | JS is not working on frontend for a block: `./src/blocks/frontend/`
55 |
56 | Add a new tab in Global Default interface for a block: `./src/blocks/plugins/options/global-defaults/controls`
57 |
58 | Add a new options in WordPress Options Settings: `./inc/plugins/class-options-settings.php`
59 |
60 | When you make a PHP file and don't know where to hook it up (make it visible to others) look at how similar file do it. API Endpoint? `./inc/server/`. CSS Generator? `./inc/css/`. Dynamic block rendering? `./inc/render/`.
--------------------------------------------------------------------------------
/assets/icons/woo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/inc/patterns/image-and-text-over-dark-background.php:
--------------------------------------------------------------------------------
1 | __( 'Image and Text over Dark Background', 'otter-blocks' ),
10 | 'categories' => array( 'otter-blocks', 'featured', 'columns' ),
11 | 'content' => '
Overline
Section with image
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.
